Создание Flow Layout
Создайте компоновку с переносом элементов в стиле тегов.
«Создание Flow Layout» — бесплатный урок SwiftUI Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения SwiftUI Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс SwiftUI Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
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 = 0Detect 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. 🎉
Часто задаваемые вопросы
Урок «Создание Flow Layout» бесплатный?
Да — полный текст урока «Создание Flow Layout» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс SwiftUI Academy, подпишись на CoddyKit PRO. Курс SwiftUI Academy содержит 4 уроков всего.
Чему я научусь в уроке «Создание Flow Layout»?
Создайте компоновку с переносом элементов в стиле тегов. Ты практикуешь SwiftUI Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать SwiftUI Academy?
Предыдущий опыт не требуется. SwiftUI Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Создание Flow Layout»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке SwiftUI Academy?
Да. Каждый урок SwiftUI Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Основы GeometryReader
- Пользовательские направляющие выравнивания
- Протокол Layout
- Создание Flow Layout