LazyVStack: co jsou vertikální a horizontální líné zásobníky ve SwiftUI

Co jsou LazyVStack a LazyHStack?

LazyVStack a LazyHStack — kontejnery rozvržení ve SwiftUI, které vytvářejí a zobrazují podřízené pohledy pouze v případě potřeby, když se stanou viditelnými v posouvatelné oblasti. LazyVStack umísťuje prvky vertikálně (shora dolů), LazyHStack — horizontálně (zleva doprava).

Oba zásobníky byly představeny Apple ve SwiftUI 2.0 (iOS 14, macOS 11, watchOS 7, tvOS 14) spolu s LazyVGrid a LazyHGrid. Před příchodem líných zásobníků byli vývojáři nuceni používat UITableView a UICollectionView přes UIViewRepresentable pro efektivní práci s velkými seznamy. LazyVStack tuto potřebu odstranil poskytnutím nativního rozhraní SwiftUI s automatickým líným načítáním.

Podle údajů Apple WWDC Session 10031 (2020) používají líné zásobníky mechanismus deferred view creation: SwiftUI ukládá zdrojová data (např. pole modelů) a vytváří instance pohledů těsně před vykreslením na obrazovku. Při posouvání zásobníky znovu používají již vytvořené pohledy, čímž se vyhýbají novým alokacím — to snižuje zatížení alokátoru paměti a garbage collectoru Swiftu.

Pro práci s línými zásobníky je nutné je umístit do ScrollView — bez posouvání budou prvky přesahující hranice obrazovky jednoduše oříznuty, nikoli líně vytvořeny.

Jak funguje líné načítání

Mechanismus líného načítání v LazyVStack je založen na geometrii: SwiftUI sleduje pozici každého podřízeného pohledu vůči kontejneru ScrollView. Když prvek překročí hranici viditelné oblasti (s malým bufferem několika bodů), systém zavolá jeho inicializátor a vykreslí obsah. Když prvek opustí obrazovku, SwiftUI pohled zničí, ale zachová stav přes @State, pokud je označen jako uchovatelný.

Tento přístup se liší od VStack, kde jsou všechny podřízené pohledy vytvořeny okamžitě při inicializaci kontejneru, bez ohledu na jejich viditelnost. Pro seznam 10 000 prvků VStack vytvoří 10 000 instancí pohledů v paměti, zatímco LazyVStack — pouze ty, které se vejdou na obrazovku (obvykle 8–15).

Velikosti a zarovnání

LazyVStack přijímá tři konfigurační parametry: alignment (HorizontalAlignment — leading, center, trailing), spacing (CGFloat — mezera mezi prvky) a pinnedViews (PinnedScrollableViews — připínání záhlaví sekcí). LazyHStack používá stejné parametry, ale alignment přijímá VerticalAlignment (top, center, bottom).

Rozdíly mezi LazyVStack a VStack: výkon a paměť

Hlavní rozdíl mezi LazyVStack a VStack — strategie vytváření podřízených prvků. VStack (eager stack) vypočítává velikost a pozici všech podřízených pohledů v okamžiku vykreslení, což ho činí nevhodným pro velké dynamické seznamy. LazyVStack (líný zásobník) odkládá vytvoření až do okamžiku, kdy se prvek stane viditelným.

Porovnejme chování na příkladu seznamu 1000 řádků textu. VStack načte všech 1000 řádků do paměti okamžitě, zavolá inicializátor každého řádku a přidělí mu paměť. To vede k poklesu výkonu na slabších zařízeních (iPhone SE, iPad mini) a prodloužení doby spouštění obrazovky. LazyVStack načte pouze viditelných 10–12 řádků a zbytek vytvoří během posouvání.

Praktický test (použití Xcode Instruments, profil Allocations) ukazuje: na iPhone 12 mini spotřebuje seznam 5000 prvků s LazyVStack 3–5 MB paměti, zatímco VStack se stejným obsahem — 150–250 MB, což je 50krát více. Počáteční doba vykreslení pro LazyVStack je ~50 ms oproti ~800 ms pro VStack na stejném zařízení.

Vyberte VStack pro statické nebo krátké seznamy (do 10–15 prvků) a LazyVStack — pro jakékoli dynamické nebo potenciálně dlouhé seznamy. Apple doporučuje používat LazyVStack ve výchozím nastavení, pokud si nejste jisti maximální velikostí seznamu.

Kdy je VStack stále potřeba

VStack zůstává nejlepší volbou pro statická rozhraní: obrazovka profilu, přihlašovací formulář, karta produktu — kde je počet prvků známý a nepřesahuje 10–15. VStack pracuje rychleji při prvním vykreslení takového počtu prvků, protože neplýtvá prostředky na sledování geometrie a líné načítání. Kromě toho VStack funguje správně mimo ScrollView (např. uvnitř ZStack nebo Group), zatímco LazyVStack bez ScrollView ztrácí smysl.

Kdy použít LazyVStack a LazyHStack

Líné zásobníky jsou optimální pro scénáře s velkým nebo nepředvídatelným počtem prvků: feedy sociálních sítí, katalogy produktů, seznamy chatů, knihovny mediálních souborů, deníky událostí, administrační panely s tisíci záznamy.

Konkrétní případy použití: seznam zpráv v messengeru (desítky tisíc zpráv), karusel obrázků v aplikaci galerie, zpravodajský feed s nekonečným načítáním, seznam objednávek v internetovém obchodě. LazyHStack je zvláště užitečný pro horizontální karusely — jako Stories v Instagramu nebo reklamní bannery.

Kontraindikace: rozhraní s animací výskytu prvků (líné zásobníky nepodporují přechody mezi stavy mazání prvků bez dodatečné logiky), případy kdy všechny prvky mají být viditelné současně (krátký seznam zaškrtávacích polí) a když potřebujete přesnou kontrolu nad opětovným použitím buněk (v tomto případě může být vhodnější List nebo Table).

Příklady kódu: seznam, mřížka a sekce

Příklad 1: Jednoduchý vertikální seznam s LazyVStack

Základní příklad zobrazuje 1000 prvků s minimální spotřebou paměti. Klíčové prvky: ScrollView jako kontejner posouvání, LazyVStack pro líné načítání, ForEach s identifikátorem pro iteraci dat.

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("Element #\(index)")
                        .font(.body)
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .padding()
                        .background(Color.gray.opacity(0.1))
                        .cornerRadius(8)
                }
            }
            .padding()
        }
    }
}

Kód vytvoří ScrollView, uvnitř kterého je umístěn LazyVStack s mezerou 8pt mezi prvky. ForEach prochází polem items a vytváří Text pro každý index. Díky línému načítání je z 1000 prvků současně v paměti pouze viditelných 10–12.

Příklad 2: Sekce s pinnedViews

Příklad demonstruje seskupování prvků do sekcí s připnutými záhlavími, jako v kontaktech iOS. Section definuje záhlaví a obsah, pinnedViews: .sectionHeaders fixuje záhlaví v horní části obrazovky při posouvání.

import SwiftUI

struct SectionedList: View {
    let cities = ["Moskva", "Londýn", "Tokio", "New York", "Paříž"]
    let countries = ["Rusko", "Velká Británie", "Japonsko", "USA", "Francie"]

    var body: some View {
        ScrollView {
            LazyVStack(pinnedViews: .sectionHeaders) {
                Section(header: Text("Města").font(.title).bold()) {
                    ForEach(cities, id: \.self) { city in
                        Text(city).padding(8)
                    }
                }
                Section(header: Text("Země").font(.title).bold()) {
                    ForEach(countries, id: \.self) { country in
                        Text(country).padding(8)
                    }
                }
            }
        }
    }
}

Připnutá záhlaví (.sectionHeaders) se chovají jako section headers v UITableView: při posouvání sekce se záhlaví „přilepí" k hornímu okraji obrazovky, dokud celá sekce nezmizí, poté je nahrazeno záhlavím následující sekce. pinnedViews lze kombinovat: .sectionHeaders a .sectionFooters současně.

Příklad 3: Horizontální karusel s LazyHStack

LazyHStack se používá pro horizontální posouvání — karusely obrázků, horizontální seznamy kategorií. Parametr alignment: .top zarovnává prvky k hornímu okraji.

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)
    }
}

Kód vytvoří horizontální ScrollView s LazyHStack. Ze 100 obdélníků se současně zobrazují 2–3 (v závislosti na šířce obrazovky a velikosti prvků). Při posouvání doleva se nové prvky načítají líně. Výška kontejneru je pevná (220pt), aby se předešlo nekonečné výšce v horizontálním posouvání.

PinnedViews a sekce v líných zásobnících

PinnedScrollableViews — možnost konfigurace LazyVStack a LazyHStack, která spravuje připínání záhlaví a zápatí sekcí při posouvání. Jsou podporovány dvě hodnoty: sectionHeaders (záhlaví se lepí k začátku kontejneru) a sectionFooters (zápatí se lepí ke konci).

Mechanismus pinned views funguje pouze uvnitř kontejneru Section vnořeného do LazyVStack. Každá sekce má záhlaví a/nebo zápatí, které automaticky získávají chování lepení. SwiftUI sleduje pozici každé sekce vůči hranicím ScrollView a přepíná viditelnost připnutého prvku při přechodu mezi sekcemi.

Důležité: pinnedViews zvyšují složitost výpočtu rozvržení, protože SwiftUI musí neustále přepočítávat, které záhlaví je právě připnuto. Používejte pinnedViews pouze když je funkce skutečně potřeba — pro jednoduché seznamy bez sekcí je lepší tento parametr vynechat. Apple ve své dokumentaci (Human Interface Guidelines, 2024) doporučuje použití připnutých záhlaví pro abecední rejstříky a seskupování podle data.

Tipy pro optimalizaci líných zásobníků

Správné používání identifikátorů — nejdůležitější faktor výkonu LazyVStack. Každý prvek ve ForEach musí mít stabilní jedinečné id. Použití \.self s primitivními typy (Int, String) je přípustné, ale pro datové modely vždy implementujte protokol Identifiable. Nestabilní id (např. UUID generované pokaždé) nutí SwiftUI znovu vytvářet všechny pohledy při každé aktualizaci.

Vyhněte se těžkým výpočtům uvnitř body každého prvku zásobníku. Pokud prvek obsahuje složité rozvržení nebo zpracování dat — přesuňte logiku do samostatné struktury pohledu s vlastním líným načítáním. Používejte EquatableView k zabránění zbytečnému překreslování, když se data prvku nezměnila.

Pro obrázky uvnitř LazyVStack bezpodmínečně aplikujte asynchronní načítání (AsyncImage) nebo cachování přes Kingfisher/Nuke. Každý prvek objevující se na obrazovce by neměl synchronně načítat obrázek — to způsobí zasekávání při posouvání (jank). Podle údajů WWDC Session 10031 je optimální velikost bufferu pro prefetching 3–5 obrazovek vpřed a vzad od aktuální pozice.

Měřte výkon přes Xcode Instruments s profilem SwiftUI. Věnujte pozornost metrikám: počet vyhodnocení body, alokace a snímková frekvence (FPS). Cílové hodnoty: FPS > 55 při posouvání, doba vykreslení jednoho prvku < 1 ms.