SwiftUI Academy · Aula

Criando um Layout de Fluxo

Crie um layout no estilo de etiquetas com quebra de linha.

Aula 4 de 413 etapas

Criando um Layout de Fluxo é uma aula grátis de SwiftUI Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de SwiftUI Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de SwiftUI Academy inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

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.

Responda na aula interativa

Recap

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

Grátis para começar

Aprenda Swift com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 30
Aulas: 120

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Criando um Layout de Fluxo” é grátis?

Sim — o texto completo de “Criando um Layout de Fluxo” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de SwiftUI Academy, atualize para CoddyKit PRO. O curso de SwiftUI Academy inclui 4 aulas no total.

O que vou aprender em “Criando um Layout de Fluxo”?

Crie um layout no estilo de etiquetas com quebra de linha. Você pratica SwiftUI Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar SwiftUI Academy?

Nenhuma experiência prévia é necessária. SwiftUI Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Criando um Layout de Fluxo”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de SwiftUI Academy?

Sim. Cada aula de SwiftUI Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para SwiftUI Academy