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), ленивые стеки используют механизм deferred view creation: 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-стеки не поддерживают переходы между состояниями удаления элементов без дополнительной логики), случаи, когда все элементы должны быть видимы одновременно (короткий список флажков), и when вам нужен точный контроль над повторным использованием ячеек (в этом случае 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 мс.