Слои с ZStack
Накладывайте представления от заднего плана к переднему, создавая глубину.
«Слои с ZStack» — бесплатный урок SwiftUI Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения SwiftUI Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс SwiftUI Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
Stacking in Depth
VStack goes down and HStack goes across, but sometimes you want views to overlap. That calls for a stack that works in depth. 🧱
Meet ZStack
A ZStack layers its children back to front, like sheets of glass piled on top of each other. Later views sit above earlier ones.
Your First ZStack
Inside a ZStack, the first child is the back layer and the last child is the front. Here the text sits on top of the colored background.
ZStack {
Color.blue
Text("On top")
}Back to Front Order
The drawing rule is simple: earlier children are behind, later children are in front. The last view you write wins the top spot.
Backgrounds Made Easy
A ZStack is a natural way to put a color or image behind your content. Drop a Color first, then layer your views on top of it.
Centered Overlap
By default a ZStack centers every child over the same point, so layers share one middle. You change this with an alignment argument.
ZStack(alignment: .topLeading) {
Color.gray
Text("Corner")
}Badges on Icons
A common ZStack pattern is a badge floating over an icon, like an unread count perched on the corner of a bell.
Sizing the ZStack
A ZStack takes the size of its largest child. A tiny label over a big image gives the stack the image's full footprint.
Cards with Overlays
Layer a gradient and a title over a photo to make a card. ZStack lets text stay readable on top of any background image.
ZStack {
Image("cover")
Text("Caption")
}ZStack Is a View
Like the other stacks, a ZStack is one view, so padding, frame, or background modifiers apply to the whole layered group together.
When to Reach for ZStack
Use a ZStack whenever views must overlap: a background behind content, a watermark, a badge, or text floating over an image.
Quick Check
Let's test your grasp of ZStack layering.
Recap: Layering Views
Awesome! A ZStack layers children back to front, centers them by default, and is your tool for backgrounds, badges, and overlapping cards. ✨
Часто задаваемые вопросы
Урок «Слои с ZStack» бесплатный?
Да — полный текст урока «Слои с ZStack» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс SwiftUI Academy, подпишись на CoddyKit PRO. Курс SwiftUI Academy содержит 4 уроков всего.
Чему я научусь в уроке «Слои с ZStack»?
Накладывайте представления от заднего плана к переднему, создавая глубину. Ты практикуешь SwiftUI Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать SwiftUI Academy?
Предыдущий опыт не требуется. SwiftUI Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Слои с ZStack»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке SwiftUI Academy?
Да. Каждый урок SwiftUI Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.