SwiftUI Academy · Ders

ZStack ile Katmanlama

Derinlik oluşturmak için görünümleri arkadan öne doğru üst üste bindirin.

ZStack ile Katmanlama, CoddyKit'te ücretsiz bir SwiftUI Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, SwiftUI Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. SwiftUI Academy kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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

Sıkça Sorulan Sorular

“ZStack ile Katmanlama” dersi ücretsiz mi?

Evet — “ZStack ile Katmanlama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve SwiftUI Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. SwiftUI Academy kursu toplamda 4 dersten oluşur.

“ZStack ile Katmanlama” dersinde ne öğreneceğim?

Derinlik oluşturmak için görünümleri arkadan öne doğru üst üste bindirin. SwiftUI Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

SwiftUI Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te SwiftUI Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“ZStack ile Katmanlama” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu SwiftUI Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her SwiftUI Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← SwiftUI Academy Sayfasına Dön