LazyVStack: що це, вертикальні та горизонтальні стеки в SwiftUI

Що таке LazyVStack і LazyHStack?

LazyVStack і LazyHStack — це контейнери компонування в SwiftUI, які створюють і відображають дочірні view тільки в міру необхідності, коли ті стають видимими в прокручуваній області. LazyVStack розташовує елементи вертикально (зверху вниз), а LazyHStack — горизонтально (зліва направо).

Обидва стеки були представлені Apple в SwiftUI 2.0 (iOS 14, macOS 11, watchOS 7, tvOS 14) разом з LazyVGrid і LazyHGrid. До появи лінивих стеків розробники були змушені використовувати UITableView і UICollectionView через UIViewRepresentable для ефективної роботи з великими списками. LazyVStack усунув цю необхідність, надавши нативний SwiftUI-інтерфейс з автоматичним лінивим завантаженням.

За даними Apple WWDC Session 10031 (2020), ліниві стеки використовують механізм відкладеного створення view: SwiftUI зберігає дані джерела (наприклад, масив моделей) і створює екземпляри view безпосередньо перед відображенням на екрані. При прокручуванні стеки повторно використовують вже створені view, уникаючи виділення нових — це знижує навантаження на алокатор пам'яті та збирач сміття Swift.

Для роботи з лінивими стеками обов'язково поміщайте їх всередину ScrollView — без прокручування елементи, що виходять за межі екрана, будуть просто обрізані, а не створені ліниво.

Як працює ліниве завантаження

Механізм лінивого завантаження в LazyVStack заснований на геометрії: SwiftUI відстежує позицію кожного дочірнього view відносно контейнера ScrollView. Коли елемент перетинає межу видимої області (з невеликим буфером у кілька пунктів), система викликає його ініціалізатор і відображає вміст. При виході елемента за межі екрана SwiftUI знищує view, але зберігає стан через @State, якщо воно позначене як збережуване.

Цей підхід відрізняється від VStack, де всі дочірні view створюються відразу при ініціалізації контейнера, незалежно від їх видимості. Для списку з 10 000 елементів VStack створить 10 000 екземплярів view в пам'яті, а LazyVStack — тільки ті, що поміщаються на екрані (зазвичай 8–15).

Розміри та вирівнювання

LazyVStack приймає три параметри конфігурації: alignment (HorizontalAlignment — leading, center, trailing), spacing (CGFloat — відступ між елементами) та pinnedViews (PinnedScrollableViews — закріплення заголовків секцій). LazyHStack використовує ті ж параметри, але alignment приймає VerticalAlignment (top, center, bottom).

Відмінності LazyVStack від VStack: продуктивність і пам'ять

Головна відмінність LazyVStack від VStack — стратегія створення дочірніх елементів. VStack (eager stack) обчислює розмір і положення всіх дочірніх view в момент відображення, що робить його непридатним для великих динамічних списків. LazyVStack (lazy stack) відкладає створення до моменту, коли елемент стає видимим.

Порівняємо поведінку на прикладі списку з 1000 рядків тексту. VStack завантажить всі 1000 рядків у пам'ять відразу, викликаючи ініціалізатор кожного рядка та виділяючи під неї пам'ять. Це призводить до падіння продуктивності на слабких пристроях (iPhone SE, iPad mini) та збільшення часу запуску екрана. LazyVStack завантажить лише видимі 10–12 рядків, створюючи інші в міру прокручування.

Практичний тест (використання Xcode Instruments, профіль Allocations) показує: на iPhone 12 mini список з 5000 елементів з LazyVStack споживає 3–5 МБ пам'яті, тоді як VStack з тим же вмістом — 150–250 МБ, що в 50 разів більше. При цьому початковий час відображення для LazyVStack становить ~50 мс проти ~800 мс для VStack на тому ж пристрої.

Вибирайте VStack для статичних або коротких списків (до 10–15 елементів), а LazyVStack — для будь-яких динамічних або потенційно довгих списків. Apple рекомендує використовувати LazyVStack за замовчуванням, якщо ви не впевнені в максимальному розмірі списку.

Коли VStack все ще потрібен

VStack залишається найкращим вибором для статичних інтерфейсів: екран профілю, форма входу, картка товару — де кількість елементів відома і не перевищує 10–15. VStack працює швидше при першому відображенні такої кількості елементів, оскільки не витрачає ресурси на відстеження геометрії та lazy-завантаження. Крім того, VStack коректно працює поза ScrollView (наприклад, всередині ZStack або Group), тоді як LazyVStack без ScrollView втрачає сенс.

Коли використовувати LazyVStack і LazyHStack

Ліниві стеки оптимальні для сценаріїв з великою або непередбачуваною кількістю елементів: стрічки соціальних мереж, каталоги товарів, списки чатів, бібліотеки медіафайлів, логи подій, панелі адміністратора з тисячами записів.

Конкретні випадки застосування: список повідомлень у месенджері (десятки тисяч повідомлень), карусель зображень у додатку галереї, стрічка новин з нескінченним завантаженням, список замовлень в інтернет-магазині. LazyHStack особливо корисний для горизонтальних каруселей — наприклад, Stories в Instagram або банерів акцій.

Протипоказання: інтерфейси з анімацією появи елементів (lazy-стеки не підтримують переходи між станами видалення елементів без додаткової логіки), випадки, коли всі елементи повинні бути видимі одночасно (короткий список прапорців), і коли вам потрібен точний контроль над повторним використанням комірок (у цьому випадку List або Table можуть бути кращими).

Приклади коду: список, сітка та секції

Приклад 1: Простий вертикальний список з LazyVStack

Базовий приклад відображає 1000 елементів з мінімальним споживанням пам'яті. Ключові елементи: ScrollView як контейнер прокрутки, LazyVStack для лінивого завантаження, ForEach з ідентифікатором для перебору даних.

import SwiftUI

struct LazyListExample: View {
    let items = Array(0..<1000)

    var body: some View {
        ScrollView {
            LazyVStack(spacing: 8) {
                ForEach(items, id: \.self) { index in
                    Text("Елемент #\(index)")
                        .font(.body)
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .padding()
                        .background(Color.gray.opacity(0.1))
                        .cornerRadius(8)
                }
            }
            .padding()
        }
    }
}

Код створює ScrollView, всередині якого розміщено LazyVStack з відступом 8pt між елементами. ForEach проходить по масиву items і створює Text для кожного індексу. Завдяки lazy-завантаженню з 1000 елементів одночасно в пам'яті знаходяться тільки видимі 10–12.

Приклад 2: Секції з pinnedViews

Приклад демонструє групування елементів по секціях з закріпленими заголовками, як в контактах iOS. Section визначає заголовок і вміст, pinnedViews: .sectionHeaders фіксує заголовок вгорі екрана при прокручуванні.

import SwiftUI

struct SectionedList: View {
    let cities = ["Москва", "Лондон", "Токіо", "Нью-Йорк", "Париж"]
    let countries = ["Росія", "Велика Британія", "Японія", "США", "Франція"]

    var body: some View {
        ScrollView {
            LazyVStack(pinnedViews: .sectionHeaders) {
                Section(header: Text("Міста").font(.title).bold()) {
                    ForEach(cities, id: \.self) { city in
                        Text(city).padding(8)
                    }
                }
                Section(header: Text("Країни").font(.title).bold()) {
                    ForEach(countries, id: \.self) { country in
                        Text(country).padding(8)
                    }
                }
            }
        }
    }
}

Закріплені заголовки (.sectionHeaders) поводяться як section headers в UITableView: при прокручуванні секції заголовок «прилипає» до верхньої межі екрана, поки вся секція не зникне, після чого його змінює заголовок наступної секції. pinnedViews можна комбінувати: .sectionHeaders і .sectionFooters одночасно.

Приклад 3: Горизонтальна карусель з LazyHStack

LazyHStack застосовується для горизонтальної прокрутки — каруселі зображень, горизонтальні списки категорій. Параметр alignment: .top вирівнює елементи по верхньому краю.

import SwiftUI

struct HorizontalCarousel: View {
    let colors: [Color] = [.red, .blue, .green, .orange, .purple, .pink]

    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            LazyHStack(spacing: 16, alignment: .top) {
                ForEach(0..<100, id: \.self) { index in
                    RoundedRectangle(cornerRadius: 12)
                        .fill(colors[index % colors.count])
                        .frame(width: 150, height: 200)
                        .overlay(Text("\(index + 1)").foregroundColor(.white).bold())
                }
            }
            .padding(.horizontal)
        }
        .frame(height: 220)
    }
}

Код створює горизонтальний ScrollView з LazyHStack. З 100 прямокутників одночасно відображаються 2–3 (залежить від ширини екрана та розміру елементів). При прокручуванні вліво нові елементи підвантажуються ліниво. Висота контейнера фіксована (220pt), щоб уникнути нескінченної висоти в горизонтальній прокрутці.

PinnedViews і секції в лінивих стеках

PinnedScrollableViews — опція конфігурації LazyVStack і LazyHStack, що керує закріпленням заголовків і підвалів секцій при прокручуванні. Підтримується два значення: sectionHeaders (заголовки прилипають до початку контейнера) і sectionFooters (підвали прилипають до кінця).

Механізм pinned views працює тільки всередині Section-контейнера, вкладеного в LazyVStack. Кожен Section має header і/або footer, які автоматично отримують поведінку прилипання. SwiftUI відстежує позицію кожної секції відносно меж ScrollView і перемикає видимість pinned-елемента при переході між секціями.

Важливо: pinnedViews збільшують складність обчислення layout, оскільки SwiftUI повинен постійно перераховувати, який заголовок зараз закріплений. Використовуйте pinnedViews тільки коли функціональність дійсно потрібна — для простих списків без секцій цей параметр краще опустити. Apple у своїй документації (Human Interface Guidelines, 2024) рекомендує використовувати pinned-заголовки для алфавітних покажчиків і групування за датами.

Поради щодо оптимізації лінивих стеків

Правильне використання ідентифікаторів — найважливіший фактор продуктивності LazyVStack. Кожен елемент в ForEach повинен мати стабільний унікальний id. Використання \.self з примітивами (Int, String) допустимо, але для моделей даних завжди реалізуйте протокол Identifiable. Нестабільні id (наприклад, UUID, що генерується щоразу) змушують SwiftUI перестворювати всі view при кожному оновленні.

Уникайте важких обчислень всередині body кожного елемента стеку. Якщо елемент містить складну розмітку або обробку даних — винесіть логіку в окрему view-структуру з власним лінивим завантаженням. Використовуйте EquatableView для запобігання зайвим перемальовкам, коли дані елемента не змінилися.

Для зображень всередині LazyVStack обов'язково застосовуйте асинхронне завантаження (AsyncImage) або кешування через Kingfisher/Nuke. Кожен елемент при появі на екрані не повинен синхронно завантажувати зображення — це викличе підвисання прокрутки (jank). За даними WWDC Session 10031, оптимальний розмір буфера для prefetching — 3–5 екранів вперед і назад від поточної позиції.

Вимірюйте продуктивність через Xcode Instruments з профілем SwiftUI. Звертайте увагу на метрики: тіло відображення (body evaluations), алокації (allocations) і частоту кадрів (FPS). Цільові показники: FPS > 55 при прокручуванні, час відображення одного елемента < 1 мс.