List — apa itu, komponen daftar di SwiftUI

Apa itu List di SwiftUI?

List — adalah View yang menampilkan urutan elemen dalam daftar yang dapat digulir secara vertikal. Muncul di iOS 13 bersama SwiftUI dan menjadi cara utama untuk menampilkan daftar data, menggantikan UITableView dari UIKit. List secara otomatis mengelola penggunaan ulang sel, pengguliran, dan performa.

List menggunakan lazy-loading: sel dibuat saat pengguliran, tidak sekaligus. Ini membedakannya dari VStack dengan ForEach di dalam ScrollView, di mana semua sel dibuat saat rendering. List juga menyediakan dukungan bawaan untuk aksi geser, pull-to-refresh, pengeditan (hapus/pindah), dan pemilihan baris.

Menurut Apple WWDC 2021 (Session 10072), List di iOS 15+ mendapatkan peningkatan performa yang signifikan berkat mekanisme diffing baru di tingkat koleksi. Ini membuat List lebih efisien saat memperbarui data, terutama untuk daftar dengan ratusan baris.

List vs ScrollView + VStack

Pengembang sering memilih antara List dan ScrollView dengan VStack untuk menampilkan sekumpulan View. Perbedaan utama: List menggunakan penggunaan ulang sel (seperti UITableView), sedangkan ScrollView + VStack membuat semua View sekaligus. Untuk daftar dengan jumlah elemen tetap (hingga 20), perbedaannya tidak signifikan. Untuk daftar dinamis dengan 50+ baris, List lebih disukai dari segi performa.

Daftar statis dan dinamis

Daftar Statis (Static List) — adalah daftar dengan jumlah baris tetap yang ditentukan langsung di badan List. Digunakan untuk menu, pengaturan, dan formulir dengan kumpulan elemen yang diketahui. Setiap baris dideklarasikan secara eksplisit, tanpa perulangan atau ForEach.

// Daftar statis (untuk menu dan pengaturan)
List {
    Text("Profil")
    Text("Pengaturan")
    Text("Tentang")
}

// Daftar dinamis (untuk data)
struct UserList: View {
    let users: [User]

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

Daftar Dinamis (Dynamic List) menggunakan inisialisasi List(data:rowContent:) atau ForEach di dalam badan List. Opsi pertama nyaman ketika setiap baris sesuai dengan satu elemen data. Opsi kedua — ketika ada seksi atau elemen tambahan di antara data.

Identifikasi (Identifiable): Untuk daftar dinamis, elemen data harus sesuai dengan protokol Identifiable atau dalam tuple data:id harus ditentukan KeyPath ke pengidentifikasi unik. SwiftUI menggunakan pengidentifikasi untuk melacak perubahan: penambahan, penghapusan, dan pemindahan baris.

Seksi dan pengelompokan data

Section — adalah View untuk mengelompokkan baris di List dengan judul dan footer opsional. Section menerima header dan footer sebagai ViewBuilder, memungkinkan penggunaan tidak hanya teks tetapi juga View kustom untuk judul seksi.

struct SettingsView: View {
    var body: some View {
        List {
            Section(header: Text("Akun")) {
                Text("Nama")
                Text("Email")
            }
            Section(header: Text("Notifikasi")) {
                Toggle("Push", isOn: $pushEnabled)
                Toggle("Email", isOn: $emailEnabled)
            }
        }
        .listStyle(.insetGrouped)
    }
}

// Seksi dinamis dengan ForEach
List {
    ForEach(groupedData.keys.sorted(), id: \.self) { key in
        Section(header: Text(key)) {
            ForEach(groupedData[key]!) { item in
                Text(item.title)
            }
        }
    }
}

Gaya List: SwiftUI menyediakan beberapa gaya bawaan melalui pengubah .listStyle(). .insetGrouped — standar untuk iOS Settings, .plain — minimalis, .inset — dengan lekukan, .sidebar — untuk Sidebar di iPad.

Menurut SwiftUI Cookbook (2024), Section dengan seksi dinamis dan ForEach di dalamnya adalah pola standar untuk mengelompokkan data di aplikasi dengan struktur kompleks. Aturan utama: jangan menempatkan Section di dalam Section, dan jangan gunakan inisialisasi List(data:) bersama dengan Section — gunakan ForEach di dalam badan List.

Aksi geser dan pull-to-refresh

.swipeActions(edge:allowsFullSwipe:content:) — pengubah untuk iOS 15+ yang menambahkan aksi geser ke baris List. Memungkinkan menampilkan tombol saat menggeser ke kiri (default) atau kanan, dengan warna dan peran yang berbeda (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("Hapus", role: .destructive) {
                            tasks.removeAll { $0.id == task.id }
                        }
                    }
                    .swipeActions(edge: .leading) {
                        Button(task.isDone ? "Urungkan" : "Selesai") {
                            task.isDone.toggle()
                        }
                        .tint(.green)
                    }
            }
        }
        .refreshable {
            // Pemuatan data asinkron
            await loadTasks()
        }
    }
}

.refreshable — pengubah untuk iOS 15+ yang menambahkan pull-to-refresh. Menerima closure asinkron (async) yang dijalankan saat pengguna menarik daftar ke bawah. SwiftUI secara otomatis menampilkan indikator pemuatan. Setelah operasi selesai, indikator disembunyikan.

.onDelete dan .onMove — pengubah untuk iOS 13+ yang menambahkan dukungan untuk menghapus dan memindahkan baris. Untuk menggunakannya, bungkus data dalam ForEach dengan Binding atau berikan closure melalui .onDelete(perform:) pada List atau ForEach.

Performa List dan optimasi

Performa List tergantung pada jumlah baris, kompleksitas setiap sel, dan frekuensi pembaruan data. SwiftUI menggunakan lazy-loading dan penggunaan ulang sel (mirip dengan UITableView.dequeueReusableCell), tetapi optimasi tambahan mungkin diperlukan untuk daftar dengan 500+ baris.

Masalah 1: pembaruan sering. Jika data dalam daftar sering diperbarui (misalnya setiap detik), List dapat merender ulang sel yang terlihat pada setiap perubahan status. Solusi: gunakan struktur (value types) untuk data — SwiftUI membandingkannya berdasarkan nilai dan hanya merender ulang baris yang berubah.

Masalah 2: sel berat. Jika setiap baris berisi hierarki View yang kompleks, gambar, dan animasi, pengguliran mungkin lambat. Solusi: pindahkan sel ke View terpisah, gunakan EquatableView untuk mencegah render ulang yang tidak perlu. Menurut SwiftUI Lab (2024), memecah baris kompleks menjadi sub-komponen mengurangi waktu rendering sebesar 30–50%.

Masalah 3: jumlah baris besar. Pada 1000+ baris, List masih bekerja efisien berkat lazy-loading, tetapi pemuatan awal mungkin melambat karena perhitungan layout. Solusi: gunakan LazyVStack hanya untuk daftar dengan baris homogen di mana fungsi List (geser, seksi) tidak diperlukan. Untuk daftar yang sepenuhnya fungsional, List tetap menjadi pilihan terbaik.