LazyVStack: vad är vertikala och horisontella lata staplar i SwiftUI

Vad är LazyVStack och LazyHStack?

LazyVStack och LazyHStack — layoutcontainrar i SwiftUI som skapar och visar underordnade vyer endast vid behov, när de blir synliga i det rullbara området. LazyVStack placerar element vertikalt (uppifrån och ned), LazyHStack — horisontellt (från vänster till höger).

Båda staplarna introducerades av Apple i SwiftUI 2.0 (iOS 14, macOS 11, watchOS 7, tvOS 14) tillsammans med LazyVGrid och LazyHGrid. Innan lata staplar dök upp tvingades utvecklare att använda UITableView och UICollectionView via UIViewRepresentable för effektivt arbete med stora listor. LazyVStack eliminerade detta behov genom att tillhandahålla ett inbyggt SwiftUI-gränssnitt med automatisk lat inläsning.

Enligt data från Apple WWDC Session 10031 (2020) använder lata staplar mekanismen deferred view creation: SwiftUI lagrar källdata (t.ex. en array av modeller) och skapar vyinstanser precis innan rendering på skärmen. Vid rullning återanvänder staplarna redan skapade vyer och undviker nya allokeringar — detta minskar belastningen på minnesallokatorn och Swifts garbage collector.

För att arbeta med lata staplar måste du placera dem inuti en ScrollView — utan rullning kommer element som går utanför skärmens gränser helt enkelt att kapas, inte skapas lata.

Hur lat inläsning fungerar

Mekanismen för lat inläsning i LazyVStack är baserad på geometri: SwiftUI spårar positionen för varje underordnad vy i förhållande till ScrollView-behållaren. När ett element passerar gränsen för det synliga området (med en liten buffert på några punkter) anropar systemet dess initierare och renderar innehållet. När elementet lämnar skärmen förstör SwiftUI vyn, men behåller tillståndet via @State om det är markerat som bevaringsbart.

Detta tillvägagångssätt skiljer sig från VStack, där alla underordnade vyer skapas omedelbart vid initiering av behållaren, oavsett deras synlighet. För en lista med 10 000 element kommer VStack att skapa 10 000 vyinstanser i minnet, medan LazyVStack — endast de som får plats på skärmen (vanligtvis 8–15).

Storlekar och justering

LazyVStack accepterar tre konfigurationsparametrar: alignment (HorizontalAlignment — leading, center, trailing), spacing (CGFloat — mellanrum mellan element) och pinnedViews (PinnedScrollableViews — fästning av sektionsrubriker). LazyHStack använder samma parametrar, men alignment accepterar VerticalAlignment (top, center, bottom).

Skillnader mellan LazyVStack och VStack: prestanda och minne

Den största skillnaden mellan LazyVStack och VStack — strategin för att skapa underordnade element. VStack (eager stack) beräknar storlek och position för alla underordnade vyer vid renderingstillfället, vilket gör den olämplig för stora dynamiska listor. LazyVStack (lat stack) skjuter upp skapandet tills elementet blir synligt.

Låt oss jämföra beteendet med en lista på 1000 textrader. VStack laddar alla 1000 rader i minnet omedelbart, anropar initieraren för varje rad och allokerar minne för den. Detta leder till prestandaförsämring på svagare enheter (iPhone SE, iPad mini) och ökad starttid för skärmen. LazyVStack laddar endast de synliga 10–12 raderna och skapar resten under rullning.

Ett praktiskt test (med Xcode Instruments, profilen Allocations) visar: på iPhone 12 mini förbrukar en lista med 5000 element med LazyVStack 3–5 MB minne, medan VStack med samma innehåll — 150–250 MB, 50 gånger mer. Den initiala renderingstiden för LazyVStack är ~50 ms jämfört med ~800 ms för VStack på samma enhet.

Välj VStack för statiska eller korta listor (upp till 10–15 element) och LazyVStack — för dynamiska eller potentiellt långa listor. Apple rekommenderar att du använder LazyVStack som standard om du inte är säker på listans maximala storlek.

När VStack fortfarande behövs

VStack förblir det bästa valet för statiska gränssnitt: profilsida, inloggningsformulär, produktkort — där antalet element är känt och inte överstiger 10–15. VStack fungerar snabbare vid första renderingen av sådana antal element eftersom det inte slösar resurser på geometriövervakning och lat inläsning. Dessutom fungerar VStack korrekt utanför ScrollView (t.ex. inuti ZStack eller Group), medan LazyVStack utan ScrollView förlorar sin mening.

När du ska använda LazyVStack och LazyHStack

Lata staplar är optimala för scenarier med stort eller oförutsägbart antal element: sociala medieflöden, produktkataloger, chattlistor, mediafilbibliotek, händelseloggar, administrationspaneler med tusentals poster.

Specifika användningsfall: meddelandelista i en messenger (tiotusentals meddelanden), bildkarusell i en galleriapp, nyhetsflöde med oändlig inläsning, beställningslista i en webbutik. LazyHStack är särskilt användbart för horisontella karuseller — som Stories i Instagram eller reklambanners.

Kontraindikationer: gränssnitt med animering av elementframträdande (lata staplar stöder inte övergångar mellan tillstånd för borttagning av element utan extra logik), fall där alla element måste vara synliga samtidigt (kort kryssrute lista) och när du behöver exakt kontroll över cellåteranvändning (i detta fall kan List eller Table vara att föredra).

Kodexempel: lista, rutnät och sektioner

Exempel 1: Enkel vertikal lista med LazyVStack

Grundläggande exempel visar 1000 element med minimal minnesförbrukning. Nyckelelement: ScrollView som rullcontainer, LazyVStack för lat inläsning, ForEach med identifierare för dataiteration.

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

Koden skapar en ScrollView med en LazyVStack inuti med 8pt mellanrum mellan elementen. ForEach itererar genom items-arrayen och skapar Text för varje index. Tack vare lat inläsning finns det av 1000 element samtidigt endast synliga 10–12 i minnet.

Exempel 2: Sektioner med pinnedViews

Exemplet demonstrerar gruppering av element i sektioner med fästa rubriker, som i iOS-kontakter. Section definierar rubrik och innehåll, pinnedViews: .sectionHeaders fäster rubriken högst upp på skärmen vid rullning.

import SwiftUI

struct SectionedList: View {
    let cities = ["Moskva", "London", "Tokyo", "New York", "Paris"]
    let countries = ["Ryssland", "Storbritannien", "Japan", "USA", "Frankrike"]

    var body: some View {
        ScrollView {
            LazyVStack(pinnedViews: .sectionHeaders) {
                Section(header: Text("Städer").font(.title).bold()) {
                    ForEach(cities, id: \.self) { city in
                        Text(city).padding(8)
                    }
                }
                Section(header: Text("Länder").font(.title).bold()) {
                    ForEach(countries, id: \.self) { country in
                        Text(country).padding(8)
                    }
                }
            }
        }
    }
}

Fästa rubriker (.sectionHeaders) beter sig som section headers i UITableView: vid rullning av en sektion "fastnar" rubriken vid skärmens övre kant tills hela sektionen försvinner, då ersätts den av nästa sektions rubrik. pinnedViews kan kombineras: .sectionHeaders och .sectionFooters samtidigt.

Exempel 3: Horisontell karusell med LazyHStack

LazyHStack används för horisontell rullning — bildkaruseller, horisontella kategorilistor. Parametern alignment: .top justerar elementen till den övre kanten.

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

Koden skapar en horisontell ScrollView med LazyHStack. Av 100 rektanglar visas samtidigt 2–3 (beroende på skärmbredd och elementstorlek). Vid rullning åt vänster laddas nya element lätt. Behållarens höjd är fast (220pt) för att undvika oändlig höjd vid horisontell rullning.

PinnedViews och sektioner i lata staplar

PinnedScrollableViews — konfigurationsalternativ för LazyVStack och LazyHStack som hanterar fästning av sektionsrubriker och sidfötter vid rullning. Två värden stöds: sectionHeaders (rubriker fastnar i början av behållaren) och sectionFooters (sidfötter fastnar i slutet).

Mekanismen för pinned views fungerar endast inuti en Section-behållare nästlad i LazyVStack. Varje sektion har en rubrik och/eller sidfot som automatiskt får fastnande beteende. SwiftUI spårar positionen för varje sektion i förhållande till ScrollViews gränser och växlar synligheten för det fästa elementet vid övergång mellan sektioner.

Viktigt: pinnedViews ökar komplexiteten i layoutberäkningen eftersom SwiftUI ständigt måste räkna om vilken rubrik som för närvarande är fäst. Använd pinnedViews endast när funktionaliteten verkligen behövs — för enkla listor utan sektioner är det bättre att utelämna denna parameter. Apple rekommenderar i sin dokumentation (Human Interface Guidelines, 2024) användning av fästa rubriker för alfabetiska index och gruppering efter datum.

Tips för optimering av lata staplar

Korrekt användning av identifierare — den viktigaste faktorn för LazyVStacks prestanda. Varje element i ForEach måste ha ett stabilt unikt id. Användning av \.self med primitiva typer (Int, String) är tillåten, men för datamodeller implementera alltid Identifiable-protokollet. Instabila id:n (t.ex. UUID som genereras varje gång) tvingar SwiftUI att återskapa alla vyer vid varje uppdatering.

Undvik tunga beräkningar inuti body för varje element i stacken. Om elementet innehåller komplex layout eller databehandling — flytta logiken till en separat vy-struktur med egen lat inläsning. Använd EquatableView för att förhindra onödiga omritningar när elementets data inte har ändrats.

För bilder inuti LazyVStack, tillämpa obligatoriskt asynkron inläsning (AsyncImage) eller cachning via Kingfisher/Nuke. Varje element som visas på skärmen bör inte synkront ladda en bild — detta kommer att orsaka ryckningar vid rullning (jank). Enligt data från WWDC Session 10031 är den optimala buffertstorleken för prefetching 3–5 skärmar framåt och bakåt från den aktuella positionen.

Mät prestanda via Xcode Instruments med SwiftUI-profilen. Var uppmärksam på mätvärdena: antal body evaluations, allokeringar och bildhastighet (FPS). Målvärden: FPS > 55 vid rullning, renderingstid för ett element < 1 ms.