List — nedir, SwiftUI'de liste bileşeni

SwiftUI'de List nedir?

List, öğelerin bir dizisini dikey olarak kaydırılabilir bir listede görüntüleyen bir View'dir. iOS 13'te SwiftUI ile birlikte tanıtıldı ve UIKit'teki UITableView'in yerini alan veri listelerini görüntülemenin birincil yoludur. List, hücre yeniden kullanımını, kaydırmayı ve performansı otomatik olarak yönetir.

List, yavaş yüklemeyi kullanır: hücreler kaydırdıkça oluşturulur, hepsi bir kerede değil. Bu, onu ScrollView içindeki VStack ve ForEach'ten ayırır; burada tüm hücreler oluşturma zamanında oluşturulur. List ayrıca kaydırma eylemleri, çekerek yenileme, düzenleme (silme/taşıma) ve satır seçimi için yerleşik destek sağlar.

Apple WWDC 2021 (Session 10072)'ye göre, iOS 15+'daki List, koleksiyon düzeyinde yeni bir farklılaştırma mekanizması sayesinde önemli performans iyileştirmeleri aldı. Bu, özellikle yüzlerce satır içeren listeler için veri güncelleme sırasında List'i daha verimli hale getirdi.

List vs ScrollView + VStack

Geliştiriciler genellikle bir View kümesini görüntülemek için List ile ScrollView + VStack arasında seçim yapar. Temel fark: List, hücre yeniden kullanımını (UITableView gibi) kullanırken, ScrollView + VStack tüm View'ları hemen oluşturur. Sabit boyutlu listeler (20 öğeye kadar) için fark ihmal edilebilir düzeydedir. 50+ satırlı dinamik listeler için performans açısından List tercih edilir.

Statik ve dinamik listeler

Statik liste, doğrudan List gövdesinde belirtilen sabit sayıda satıra sahip bir listedir. Menüler, ayarlar ve bilinen öğe kümelerine sahip formlar için kullanılır. Her satır, döngü veya ForEach olmadan açıkça bildirilir.

// Statik liste (menüler ve ayarlar için)
List {
    Text("Profil")
    Text("Ayarlar")
    Text("Hakkında")
}

// Dinamik liste (veriler için)
struct UserList: View {
    let users: [User]

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

Dinamik liste, List(data:rowContent:) başlatıcısını veya List gövdesi içinde ForEach'i kullanır. İlk yaklaşım, her satırın bir veri öğesine karşılık gelmesi durumunda uygundur. İkincisi, veriler arasında bölümler veya ek öğeler olduğunda kullanışlıdır.

Tanımlama (Identifiable): Dinamik listeler için, veri öğeleri Identifiable protokolüne uymalı veya data:id demetinde benzersiz bir tanımlayıcıya KeyPath belirtmelisiniz. SwiftUI, değişiklikleri (ekleme, silme ve satır taşıma) izlemek için tanımlayıcıları kullanır.

Bölümler ve veri gruplama

Section, List'te satırları bir başlık ve isteğe bağlı footer ile gruplamak için bir View'dir. Section, header ve footer'ı ViewBuilder olarak kabul eder, bölüm başlıkları için yalnızca metin değil aynı zamanda özel View'lar kullanılmasına da olanak tanır.

struct SettingsView: View {
    var body: some View {
        List {
            Section(header: Text("Hesap")) {
                Text("Ad")
                Text("E-posta")
            }
            Section(header: Text("Bildirimler")) {
                Toggle("Push", isOn: $pushEnabled)
                Toggle("Email", isOn: $emailEnabled)
            }
        }
        .listStyle(.insetGrouped)
    }
}

// ForEach ile dinamik bölümler
List {
    ForEach(groupedData.keys.sorted(), id: \.self) { key in
        Section(header: Text(key)) {
            ForEach(groupedData[key]!) { item in
                Text(item.title)
            }
        }
    }
}

List Stilleri: SwiftUI, .listStyle() değiştiricisi aracılığıyla birkaç yerleşik stil sağlar. .insetGrouped — iOS Settings için standart, .plain — minimalist, .inset — girintili, .sidebar — iPad'de Sidebar için.

SwiftUI Cookbook (2024)'e göre, dinamik bölümler ve içinde ForEach bulunan Section, karmaşık yapıya sahip uygulamalarda verileri gruplamak için standart bir desendir. Temel kural: Section'ı Section içine yerleştirmeyin ve Section ile birlikte List(data:) başlatıcısını kullanmayın — List gövdesi içinde ForEach kullanın.

Kaydırma eylemleri ve çekerek yenileme

.swipeActions(edge:allowsFullSwipe:content:) — iOS 15+ için List satırlarına kaydırma eylemleri ekleyen bir değiştirici. Sola (varsayılan) veya sağa kaydırırken farklı renkler ve rollerle (destructive, cancel) düğmelerin görüntülenmesine olanak tanır.

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

    var body: some View {
        List {
            ForEach($tasks) { $task in
                Text(task.title)
                    .swipeActions(edge: .trailing) {
                        Button("Sil", role: .destructive) {
                            tasks.removeAll { $0.id == task.id }
                        }
                    }
                    .swipeActions(edge: .leading) {
                        Button(task.isDone ? "Geri al" : "Bitti") {
                            task.isDone.toggle()
                        }
                        .tint(.green)
                    }
            }
        }
        .refreshable {
            // Zamansız veri yükleme
            await loadTasks()
        }
    }
}

.refreshable — iOS 15+ için çekerek yenileme ekleyen bir değiştirici. Kullanıcı listeyi aşağı çektiğinde yürütülen bir async closure kabul eder. SwiftUI otomatik olarak bir yükleme göstergesi görüntüler. İşlem tamamlandıktan sonra gösterge gizlenir.

.onDelete ve .onMove — iOS 13+ için satır silme ve yeniden sıralama desteği ekleyen değiştiriciler. Bunları kullanmak için, verileri Binding ile ForEach içine sarın veya List veya ForEach'te .onDelete(perform:) aracılığıyla closure'ları iletin.

List performansı ve optimizasyon

List performansı satır sayısına, her hücrenin karmaşıklığına ve veri güncelleme sıklığına bağlıdır. SwiftUI, yavaş yükleme ve hücre yeniden kullanımı (UITableView.dequeueReusableCell'e benzer) kullanır, ancak 500+ satırlı listeler için ek optimizasyonlar gerekebilir.

Sorun 1: Sık güncellemeler. Listedeki veriler sık sık güncelleniyorsa (örneğin, her saniye), List her durum değişikliğinde görünür hücreleri yeniden çizebilir. Çözüm: veriler için yapılar (değer türleri) kullanın — SwiftUI bunları değere göre karşılaştırır ve yalnızca değişen satırları yeniden çizer.

Sorun 2: Ağır hücreler. Her satır karmaşık bir View hiyerarşisi, resimler ve animasyonlar içeriyorsa, kaydırma yavaşlayabilir. Çözüm: hücreleri ayrı View'lara çıkarın, gereksiz yeniden çizmeleri önlemek için EquatableView kullanın. SwiftUI Lab (2024)'e göre, karmaşık bir satırı alt bileşenlere ayırmak, oluşturma süresini %30–50 oranında azaltır.

Sorun 3: Çok sayıda satır. 1000+ satırla List, yavaş yükleme sayesinde hâlâ verimli çalışır, ancak düzen hesaplaması nedeniyle ilk yükleme yavaşlayabilir. Çözüm: List özelliklerinin (kaydırma, bölümler) gerekli olmadığı tek tip satırlara sahip listeler için yalnızca LazyVStack kullanın. Tam özellikli listeler için List en iyi seçim olmaya devam ediyor.