SwiftUI Academy · Lekcja

Warstwowanie za pomocą ZStack

Proszę nakładać widoki od tyłu do przodu, aby uzyskać efekt głębi.

Warstwowanie za pomocą ZStack to bezpłatna lekcja SwiftUI Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej SwiftUI Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs SwiftUI Academy zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

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. ✨

Często zadawane pytania

Czy lekcja „Warstwowanie za pomocą ZStack” jest bezpłatna?

Tak — pełny tekst „Warstwowanie za pomocą ZStack” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu SwiftUI Academy, przejdź na CoddyKit PRO. Kurs SwiftUI Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Warstwowanie za pomocą ZStack”?

Proszę nakładać widoki od tyłu do przodu, aby uzyskać efekt głębi. Ćwiczysz SwiftUI Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć SwiftUI Academy?

Nie wymagamy żadnego doświadczenia. SwiftUI Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Warstwowanie za pomocą ZStack”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji SwiftUI Academy?

Tak. Każda lekcja SwiftUI Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do SwiftUI Academy