SwiftUI Academy · Lektion

Bygg en Flow-layout

Skapa en layout med radbrytning i taggstil.

Lektion 4 av 413 steg

Bygg en Flow-layout är en gratis lektion i SwiftUI Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för SwiftUI Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i SwiftUI Academy innehåller totalt 4 lektioner.

Vad är en flow-layout?

En flow layout placerar objekt från vänster till höger och bryter till en ny rad när utrymmet tar slut, ungefär som radbrytning i text. 🏷️

Perfekt för taggar

Det här radbrytningsbeteendet passar precis för tag-chips, hashtaggar eller filterknappar med varierande bredd.

Börja med Layout

Bygg den genom att följa protokollet Layout så att ni själva styr radbrytningen, eftersom ingen stack radbryter automatiskt.

struct FlowLayout: Layout {
    var spacing: CGFloat = 8
}

Mät varje chip

I sizeThatFits frågar ni varje underordnad vy efter dess storlek och simulerar sedan placeringen för att hitta den totala höjd som behövs.

let sizes = subviews.map {
    $0.sizeThatFits(.unspecified)
}

Håll reda på en markör

Håll reda på en x- och en y-markör. Flytta x åt höger för varje chip och återställ den när nästa chip inte får plats.

var x: CGFloat = 0
var y: CGFloat = 0

Upptäck när utrymmet tar slut

Innan ni placerar ett chip kontrollerar ni om x plus dess bredd överskrider den tillgängliga bredden. Flytta i så fall chipet till nästa rad.

if x + size.width > maxWidth {
    x = 0
    y += rowHeight + spacing
}

Flytta fram raden

När ett chip har placerats flyttar ni x framåt med dess bredd plus mellanrummet och ökar rowHeight till höjden på det högsta chipet hittills.

x += size.width + spacing
rowHeight = max(rowHeight, size.height)

Placera i det andra steget

I placeSubviews upprepar ni samma radbrytningsberäkning, men anropar place vid varje beräknad punkt.

view.place(at: CGPoint(x: bounds.minX + x,
                       y: bounds.minY + y),
           proposal: .unspecified)

Returnera höjden

sizeThatFits ska returnera den föreslagna bredden och det slutliga y plus höjden på den sista raden.

CGSize(width: maxWidth,
       height: y + rowHeight)

Lägg in den

Använd den nu som vilken behållare som helst: omslut era chips så radbryter FlowLayout dem över så många rader som behövs.

FlowLayout {
    ForEach(tags, id: \.self) { tag in
        TagChip(tag)
    }
}

Återanvändbar överallt

Eftersom den är en riktig Layout fungerar er flow-layout med alla vyer, anpassar sig efter bredden och animeras tillsammans med resten av SwiftUI. ✨

Snabb kontroll

Kom ihåg vad som utlöser en ny rad i en flow-layout.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni byggde en radbrytande FlowLayout med Layout-protokollet och höll reda på en markör för att automatiskt flöda chips över flera rader. 🎉

Gratis att börja

Lär dig Swift med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 30
Lektioner: 120

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Bygg en Flow-layout” gratis?

Ja – hela texten till ”Bygg en Flow-layout” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i SwiftUI Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i SwiftUI Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Bygg en Flow-layout”?

Skapa en layout med radbrytning i taggstil. Ni övar på SwiftUI Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig SwiftUI Academy?

Du behöver inga förkunskaper. Utbildningen i SwiftUI Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Bygg en Flow-layout”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här SwiftUI Academy-lektionen?

Ja. Varje SwiftUI Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till SwiftUI Academy