Swift Academy · Les

Een flowlayout bouwen

Laat items dynamisch over meerdere regels doorlopen.

Les 3 van 413 stappen

Een flowlayout bouwen is een gratis Swift Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Swift Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Swift Academy bevat in totaal 4 lessen.

Wat is een lay-out met terugloop

Een lay-out met terugloop plaatst elementen van links naar rechts en begint een nieuwe rij wanneer het volgende element niet meer in de beschikbare breedte past, zoals bij labelchips of teruglopende tekst.

Het plan

We berekenen in een gedeelde helper waar nieuwe rijen beginnen, geven de totale hoogte terug vanuit sizeThatFits en hergebruiken dezelfde berekening in placeSubviews. Door de logica te delen blijven de twee methoden consistent.

Een plaatsing modelleren

Een kleine structuur legt vast waar elke subweergave komt. Als je alle plaatsingen vooraf berekent, worden beide protocolmethoden eenvoudig.

struct Placement {
    let index: Int
    let point: CGPoint
    let size: CGSize
}

Het algoritme voor terugloop

Doorloop de subweergaven en houd de huidige x-positie bij. Als een onderliggende weergave de maximale breedte zou overschrijden, zet je x terug en ga je omlaag met de rijhoogte plus de tussenruimte.

func layout(_ subviews: Subviews, maxWidth: CGFloat) -> (placements: [Placement], height: CGFloat) {
    var placements: [Placement] = []
    var x: CGFloat = 0, y: CGFloat = 0, rowHeight: CGFloat = 0
    let spacing: CGFloat = 8
    for (i, s) in subviews.enumerated() {
        let size = s.sizeThatFits(.unspecified)
        if x + size.width > maxWidth, x > 0 {
            x = 0; y += rowHeight + spacing; rowHeight = 0
        }
        placements.append(Placement(index: i, point: CGPoint(x: x, y: y), size: size))
        x += size.width + spacing
        rowHeight = max(rowHeight, size.height)
    }
    return (placements, y + rowHeight)
}

sizeThatFits implementeren

sizeThatFits voert het algoritme uit voor de voorgestelde breedte en geeft de breedte van het voorstel met de berekende totale hoogte terug.

func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
    let maxWidth = proposal.width ?? .infinity
    let result = layout(subviews, maxWidth: maxWidth)
    return CGSize(width: maxWidth == .infinity ? result.placements.map { $0.point.x + $0.size.width }.max() ?? 0 : maxWidth,
                  height: result.height)
}

placeSubviews implementeren

placeSubviews voert hetzelfde algoritme uit, verschuift daarna elke plaatsing met bounds.origin en roept place aan.

func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
    let result = layout(subviews, maxWidth: bounds.width)
    for p in result.placements {
        let pt = CGPoint(x: bounds.minX + p.point.x, y: bounds.minY + p.point.y)
        subviews[p.index].place(at: pt, anchor: .topLeading,
                                proposal: ProposedViewSize(p.size))
    }
}

Het volledige type FlowLayout

Door de onderdelen te combineren ontstaat een complete, herbruikbare lay-out met terugloop. De gedeelde helper layout garandeert dat grootte en plaatsing overeenkomen.

struct FlowLayout: Layout {
    var spacing: CGFloat = 8
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        let r = layout(subviews, maxWidth: proposal.width ?? .infinity)
        return CGSize(width: proposal.width ?? 0, height: r.height)
    }
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        let r = layout(subviews, maxWidth: bounds.width)
        for p in r.placements {
            subviews[p.index].place(at: CGPoint(x: bounds.minX + p.point.x, y: bounds.minY + p.point.y),
                                    anchor: .topLeading, proposal: ProposedViewSize(p.size))
        }
    }
}

De lay-out met terugloop gebruiken

Gebruik deze net als elke andere container. De labels gaan automatisch naar een nieuwe rij wanneer de breedte kleiner wordt.

var body: some View {
    FlowLayout {
        ForEach(tags, id: \.self) { tag in
            Text(tag)
                .padding(8)
                .background(.blue.opacity(0.2))
                .clipShape(Capsule())
        }
    }
}

Het eerste element per rij afhandelen

De controle x > 0 voorkomt dat er vóór het eerste element in een rij een nieuwe rij wordt begonnen. Zonder deze controle zou een element dat breder is dan de container eindeloos kunnen blijven doorlopen of onnodig naar een lege rij kunnen worden verplaatst.

if x + size.width > maxWidth, x > 0 {
    // wrap only if the row already has content
}

Keuzes voor tussenruimte

Hier is de tussenruimte een opgeslagen eigenschap met een standaardwaarde. Lees in productie de spacing-voorkeur van elke subweergave om systeemmetingen te respecteren in plaats van een vaste waarde te gebruiken.

var spacing: CGFloat = 8 // configurable per instance

Randgevallen testen

Test met nul elementen, één enorm element en veel kleine elementen. Een correcte lay-out met terugloop rapporteert een hoogte van nul voor lege inhoud en knipt nooit één te groot onderliggend element af.

Korte controle: lay-out met terugloop

Test je begrip van het algoritme voor terugloop.

Beantwoord dit in de interactieve les

Samenvatting: een lay-out met terugloop bouwen

Een lay-out met terugloop houdt de oplopende x-positie bij en begint een nieuwe rij wanneer het volgende onderliggende element buiten de beschikbare breedte zou vallen. Een gedeelde helper berekent alle plaatsingen en de totale hoogte, zodat sizeThatFits en placeSubviews consistent blijven.

Verschuif plaatsingen met bounds.origin, controleer het eerste element per rij en test lege, te grote en grote aantallen elementen. Het resultaat is een herbruikbare container met terugloop.

Gratis beginnen

Leer Swift met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 122
Lessen: 409

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Een flowlayout bouwen” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Swift Academy, waaronder “Een flowlayout bouwen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Swift Academy bevat in totaal 4 lessen.

Wat leer ik in “Een flowlayout bouwen”?

Laat items dynamisch over meerdere regels doorlopen. Je oefent met Swift Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Swift Academy te beginnen?

Ervaring vooraf is niet nodig. Swift Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Een flowlayout bouwen”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Swift Academy?

Ja. Elke les over Swift Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Swift Academy