SwiftUI Academy · Pelajaran

Pelapisan dengan ZStack

Tumpuk view dari belakang ke depan untuk menciptakan kedalaman.

Pelapisan dengan ZStack adalah pelajaran SwiftUI Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar SwiftUI Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus SwiftUI Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pelapisan dengan ZStack” gratis?

Ya — teks lengkap “Pelapisan dengan ZStack” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus SwiftUI Academy, upgrade ke CoddyKit PRO. Kursus SwiftUI Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pelapisan dengan ZStack”?

Tumpuk view dari belakang ke depan untuk menciptakan kedalaman. Kamu berlatih SwiftUI Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai SwiftUI Academy?

Tidak diperlukan pengalaman sebelumnya. SwiftUI Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Pelapisan dengan ZStack” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran SwiftUI Academy ini?

Ya. Setiap pelajaran SwiftUI Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke SwiftUI Academy