List — ano ito, component ng listahan sa SwiftUI

Ano ang List sa SwiftUI?

List — ay isang View na nagpapakita ng pagkakasunod-sunod ng mga elemento sa isang patayong nai-scroll na listahan. Lumitaw ito sa iOS 13 kasama ng SwiftUI at ito ang pangunahing paraan ng pagpapakita ng mga listahan ng data, na pumapalit sa UITableView mula sa UIKit. Awtomatikong pinamamahalaan ng List ang muling paggamit ng mga cell, pag-scroll, at performance.

Ang List ay gumagamit ng lazy-loading: ang mga cell ay nilikha habang nag-scroll, hindi lahat nang sabay-sabay. Ito ang nagpapakilala nito mula sa VStack na may ForEach sa loob ng ScrollView, kung saan lahat ng cell ay nilikha sa panahon ng rendering. Nagbibigay din ang List ng built-in na suporta para sa swipe actions, pull-to-refresh, pag-edit (delete/move), at pagpili ng mga row.

Ayon sa Apple WWDC 2021 (Session 10072), ang List sa iOS 15+ ay nakatanggap ng makabuluhang pagpapabuti sa performance dahil sa bagong mekanismo ng diffing sa antas ng koleksyon. Ito ay ginawang mas mahusay ang List sa pag-update ng data, lalo na para sa mga listahan na may daan-daang row.

List vs ScrollView + VStack

Ang mga developer ay madalas na pumipili sa pagitan ng List at ScrollView na may VStack para sa pagpapakita ng isang set ng Views. Ang pangunahing pagkakaiba: ang List ay gumagamit ng muling paggamit ng cell (tulad ng UITableView), habang ang ScrollView + VStack ay gumagawa ng lahat ng Views nang sabay-sabay. Para sa mga listahan na may nakapirming bilang ng mga elemento (hanggang 20), ang pagkakaiba ay hindi gaanong mahalaga. Para sa mga dynamic na listahan na may 50+ row, ang List ay mas gusto dahil sa performance.

Static at dynamic na mga listahan

Static na List — ay isang listahan na may nakapirming bilang ng mga row, na direktang tinukoy sa katawan ng List. Ginagamit para sa mga menu, setting, at form na may kilalang set ng mga elemento. Ang bawat row ay hayagang idineklara, walang mga loop o ForEach.

// Static na listahan (para sa mga menu at setting)
List {
    Text("Profile")
    Text("Mga Setting")
    Text("Tungkol")
}

// Dynamic na listahan (para sa data)
struct UserList: View {
    let users: [User]

    var body: some View {
        List(users) { user in
            HStack {
                Text(user.name)
                Text(user.role)
                    .foregroundColor(.secondary)
            }
        }
    }
}

Dynamic na List ay gumagamit ng initializer na List(data:rowContent:) o ForEach sa loob ng katawan ng List. Ang unang opsyon ay maginhawa kapag ang bawat row ay tumutugma sa isang elemento ng data. Ang pangalawa — kapag may mga seksyon o karagdagang elemento sa pagitan ng data.

Identipikasyon (Identifiable): Para sa mga dynamic na listahan, ang mga elemento ng data ay dapat sumunod sa Identifiable protocol o sa tuple na data:id ay dapat tukuyin ang KeyPath sa isang natatanging identifier. Ginagamit ng SwiftUI ang mga identifier para subaybayan ang mga pagbabago: pagdaragdag, pagtanggal, at paglipat ng mga row.

Mga seksyon at paggrupo ng data

Section — ay isang View para sa paggrupo ng mga row sa List na may heading at opsyonal na footer. Ang Section ay tumatanggap ng header at footer bilang ViewBuilder, na nagpapahintulot sa paggamit hindi lamang ng text, kundi pati na rin ng custom na Views para sa mga heading ng seksyon.

struct SettingsView: View {
    var body: some View {
        List {
            Section(header: Text("Account")) {
                Text("Pangalan")
                Text("Email")
            }
            Section(header: Text("Mga Notification")) {
                Toggle("Push", isOn: $pushEnabled)
                Toggle("Email", isOn: $emailEnabled)
            }
        }
        .listStyle(.insetGrouped)
    }
}

// Dynamic na mga seksyon na may ForEach
List {
    ForEach(groupedData.keys.sorted(), id: \.self) { key in
        Section(header: Text(key)) {
            ForEach(groupedData[key]!) { item in
                Text(item.title)
            }
        }
    }
}

Mga Estilo ng List: Ang SwiftUI ay nagbibigay ng ilang built-in na estilo sa pamamagitan ng modifier na .listStyle(). Ang .insetGrouped — pamantayan para sa iOS Settings, .plain — minimalist, .inset — may mga indentation, .sidebar — para sa Sidebar sa iPad.

Ayon sa SwiftUI Cookbook (2024), ang Section na may dynamic na mga seksyon at ForEach sa loob ay isang karaniwang pattern para sa paggrupo ng data sa mga application na may kumplikadong istraktura. Pangunahing patakaran: huwag ilagay ang Section sa loob ng Section, at huwag gamitin ang initializer na List(data:) kasama ng Section — gamitin ang ForEach sa loob ng katawan ng List.

Swipe actions at pull-to-refresh

.swipeActions(edge:allowsFullSwipe:content:) — modifier para sa iOS 15+ na nagdaragdag ng swipe actions sa mga row ng List. Nagbibigay-daan sa pagpapakita ng mga button kapag nag-swipe pakaliwa (default) o pakanan, na may iba't ibang kulay at papel (destructive, cancel).

struct TaskList: View {
    @Binding var tasks: [Task]

    var body: some View {
        List {
            ForEach($tasks) { $task in
                Text(task.title)
                    .swipeActions(edge: .trailing) {
                        Button("Tanggalin", role: .destructive) {
                            tasks.removeAll { $0.id == task.id }
                        }
                    }
                    .swipeActions(edge: .leading) {
                        Button(task.isDone ? "I-undo" : "Tapos") {
                            task.isDone.toggle()
                        }
                        .tint(.green)
                    }
            }
        }
        .refreshable {
            // Asynchronous na pag-load ng data
            await loadTasks()
        }
    }
}

.refreshable — modifier para sa iOS 15+ na nagdaragdag ng pull-to-refresh. Tumatanggap ng asynchronous closure (async) na isinasagawa kapag hinila ng user ang listahan pababa. Awtomatikong nagpapakita ang SwiftUI ng indicator ng pag-load. Pagkatapos makumpleto ang operasyon, ang indicator ay nakatago.

.onDelete at .onMove — mga modifier para sa iOS 13+ na nagdaragdag ng suporta para sa pagtanggal at paglipat ng mga row. Upang gamitin ang mga ito, balutin ang data sa ForEach na may Binding o magpasa ng mga closure sa pamamagitan ng .onDelete(perform:) sa List o ForEach.

Performance ng List at optimisasyon

Performance ng List ay nakadepende sa bilang ng mga row, pagiging kumplikado ng bawat cell, at dalas ng mga update ng data. Ang SwiftUI ay gumagamit ng lazy-loading at muling paggamit ng cell (katulad ng UITableView.dequeueReusableCell), ngunit ang karagdagang optimisasyon ay maaaring kailanganin para sa mga listahan na may 500+ row.

Problema 1: madalas na mga update. Kung ang data sa listahan ay madalas na na-update (halimbawa, bawat segundo), maaaring i-render muli ng List ang mga nakikitang cell sa bawat pagbabago ng estado. Solusyon: gumamit ng mga istraktura (value types) para sa data — ikinukumpara sila ng SwiftUI ayon sa halaga at ni-re-render lamang ang mga binagong row.

Problema 2: mabibigat na mga cell. Kung ang bawat row ay naglalaman ng kumplikadong hierarchy ng Views, mga larawan at animation, ang pag-scroll ay maaaring mabagal. Solusyon: ilipat ang mga cell sa hiwalay na Views, gumamit ng EquatableView upang maiwasan ang hindi kinakailangang muling pag-render. Ayon sa SwiftUI Lab (2024), ang paghahati ng isang kumplikadong row sa mga sub-component ay nagbabawas ng oras ng rendering ng 30–50%.

Problema 3: malaking bilang ng mga row. Sa 1000+ row, ang List ay mahusay pa ring gumagana dahil sa lazy-loading, ngunit ang paunang pag-load ay maaaring bumagal dahil sa pagkalkula ng layout. Solusyon: gamitin ang LazyVStack para lamang sa mga listahan na may magkakatulad na row kung saan hindi kailangan ang mga function ng List (swipe, mga seksyon). Para sa ganap na functional na mga listahan, ang List ay nananatiling pinakamahusay na pagpipilian.