List — що це, компонент списку в SwiftUI

Що таке List у SwiftUI?

List — це View, що відображає послідовність елементів у вертикально прокручуваному списку. Воно з'явилося в iOS 13 разом зі SwiftUI і є основним способом відображення списків даних, замінюючи UITableView з UIKit. List автоматично керує перевикористанням комірок, скролом і продуктивністю.

List використовує lazy-loading: комірки створюються в міру прокручування, а не всі одразу. Це відрізняє його від VStack із ForEach всередині ScrollView, де всі комірки створюються під час рендерингу. List також надає вбудовану підтримку свайп-дій, pull-to-refresh, редагування (видалити/перемістити) та вибору рядків.

Згідно з Apple WWDC 2021 (Session 10072), List в iOS 15+ отримав суттєві покращення продуктивності завдяки новому механізму diffing на рівні колекцій. Це зробило List більш ефективним при оновленні даних, особливо для списків із сотнями рядків.

List vs ScrollView + VStack

Розробники часто обирають між List і ScrollView з VStack для відображення набору View. Ключова відмінність: List використовує перевикористання комірок (як UITableView), а ScrollView + VStack створює всі View одразу. Для списків із фіксованою кількістю елементів (до 20) різниця незначна. Для динамічних списків із 50+ рядками List є кращим вибором з точки зору продуктивності.

Статичні та динамічні списки

Статичний List — це список із фіксованою кількістю рядків, заданих безпосередньо в тілі List. Використовується для меню, налаштувань і форм із відомим набором елементів. Кожен рядок оголошується явно, без циклів або ForEach.

// Статичний список (для меню та налаштувань)
List {
    Text("Профіль")
    Text("Налаштування")
    Text("Про нас")
}

// Динамічний список (для даних)
struct UserList: View {
    let users: [User]

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

Динамічний List використовує ініціалізатор List(data:rowContent:) або ForEvaluate всередині тіла List. Перший варіант зручний, коли кожен рядок відповідає одному елементу даних. Другий — коли є секції або додаткові елементи між даними.

Ідентифікація (Identifiable): Для динамічних списків елементи даних повинні відповідати протоколу Identifiable або в кортежі data:id потрібно вказати KeyPath до унікального ідентифікатора. SwiftUI використовує ідентифікатори для відстеження змін: додавання, видалення та переміщення рядків.

Секції та групування даних

Section — це View для групування рядків у List із заголовком та опціональним footer. Section приймає header і footer як ViewBuilder, дозволяючи використовувати не лише текст, а й кастомні View для заголовків секцій.

struct SettingsView: View {
    var body: some View {
        List {
            Section(header: Text("Акаунт")) {
                Text("Ім'я")
                Text("Електронна пошта")
            }
            Section(header: Text("Сповіщення")) {
                Toggle("Push", isOn: $pushEnabled)
                Toggle("Email", isOn: $emailEnabled)
            }
        }
        .listStyle(.insetGrouped)
    }
}

// Динамічні секції з ForEach
List {
    ForEach(groupedData.keys.sorted(), id: \.self) { key in
        Section(header: Text(key)) {
            ForEach(groupedData[key]!) { item in
                Text(item.title)
            }
        }
    }
}

Стилі List: SwiftUI надає кілька вбудованих стилів через модифікатор .listStyle(). .insetGrouped — стандартний для iOS Settings, .plain — мінімалістичний, .inset — з відступами, .sidebar — для Sidebar на iPad.

Згідно з SwiftUI Cookbook (2024), Section з динамічними секціями та ForEach всередині — стандартний патерн для групування даних у додатках зі складною структурою. Ключове правило: не вкладайте Section всередину Section і не використовуйте ініціалізатор List(data:) разом із Section — використовуйте ForEach всередині тіла List.

Свайп-дії та pull-to-refresh

.swipeActions(edge:allowsFullSwipe:content:) — модифікатор для iOS 15+, що додає свайп-дії до рядків List. Дозволяє відображати кнопки при свайпі вліво (за замовчуванням) або вправо, з різними кольорами та ролями (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("Видалити", role: .destructive) {
                            tasks.removeAll { $0.id == task.id }
                        }
                    }
                    .swipeActions(edge: .leading) {
                        Button(task.isDone ? "Скасувати" : "Готово") {
                            task.isDone.toggle()
                        }
                        .tint(.green)
                    }
            }
        }
        .refreshable {
            // Асинхронне завантаження даних
            await loadTasks()
        }
    }
}

.refreshable — модифікатор для iOS 15+, що додає pull-to-refresh. Приймає асинхронне замикання (async), яке виконується, коли користувач тягне список униз. SwiftUI автоматично відображає індикатор завантаження. Після завершення операції індикатор ховається.

.onDelete та .onMove — модифікатори для iOS 13+, що додають підтримку видалення та перестановки рядків. Для їх використання оберніть дані в ForEach із Binding або передайте замикання через .onDelete(perform:) на List або ForEach.

Продуктивність List та оптимізація

Продуктивність List залежить від кількості рядків, складності кожної комірки та частоти оновлень даних. SwiftUI використовує lazy-loading і перевикористання комірок (аналогічно UITableView.dequeueReusableCell), але додаткові оптимізації можуть знадобитися для списків із 500+ рядками.

Проблема 1: часті оновлення. Якщо дані в списку оновлюються часто (наприклад, кожну секунду), List може перемальовувати видимі комірки при кожній зміні стану. Рішення: використовуйте структури (value types) для даних — SwiftUI порівнює їх за значенням і перемальовує лише змінені рядки.

Проблема 2: важкі комірки. Якщо кожен рядок містить складну ієрархію View, зображення та анімації, скрол може гальмувати. Рішення: виносьте комірки в окремі View, використовуйте EquatableView для запобігання зайвим перемальовуванням. Згідно з SwiftUI Lab (2024), розбиття складного рядка на підкомпоненти знижує час рендерингу на 30–50%.

Проблема 3: велика кількість рядків. При 1000+ рядках List все ще працює ефективно завдяки lazy-loading, але початкове завантаження може сповільнитися через обчислення layout. Рішення: використовуйте LazyVStack лише для списків з однотипними рядками, де не потрібні функції List (свайпи, секції). Для повнофункціональних списків List залишається найкращим вибором.