SwiftUI Academy · Lezione

Creare un layout Flow

Crei un layout a capo in stile tag.

Creare un layout Flow è una lezione SwiftUI Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento SwiftUI Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso SwiftUI Academy include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

What Is a Flow?

A flow layout places items left to right and wraps to a new line when they run out of room, like word-wrapped text. 🏷️

Perfect for Tags

This wrapping behavior is exactly what you want for tag chips, hashtags, or filter pills of varying widths.

Start with Layout

Build it by conforming to the Layout protocol so you control wrapping yourself, since no stack wraps automatically.

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

Measure Each Chip

In sizeThatFits, ask every subview for its size, then simulate placing them to find the total height needed.

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

Track a Cursor

Keep an x and a y cursor. Move x rightward for each chip and reset when the next chip would overflow.

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

Detect Overflow

Before placing a chip, check if x plus its width exceeds the available width; if so, wrap to the next row.

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

Advance the Row

After placing a chip, move x forward by its width plus spacing and grow rowHeight to the tallest chip seen.

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

Place in the Second Pass

In placeSubviews, repeat the same wrapping math but call place at each computed point.

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

Return the Height

Your sizeThatFits should return the proposed width and the final y plus the last row height.

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

Drop It In

Now use it like any container: wrap your chips and the FlowLayout wraps them across as many lines as needed.

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

Reusable Anywhere

Because it is a real Layout, your flow works with any views, adapts to width, and animates with the rest of SwiftUI. ✨

Quick Check

Recall what triggers a new row in a flow layout.

Recap

You built a wrapping FlowLayout with the Layout protocol, tracking a cursor to flow chips across rows automatically. 🎉

Domande Frequenti

La lezione «Creare un layout Flow» è gratuita?

Sì — il testo completo di «Creare un layout Flow» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso SwiftUI Academy, passa a CoddyKit PRO. Il corso SwiftUI Academy include 4 lezioni in totale.

Cosa imparerò in «Creare un layout Flow»?

Crei un layout a capo in stile tag. Eserciti SwiftUI Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare SwiftUI Academy?

Non è richiesta alcuna esperienza precedente. SwiftUI Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Creare un layout Flow»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione SwiftUI Academy?

Sì. Ogni lezione SwiftUI Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a SwiftUI Academy