التكديس باستخدام ZStack
راكب View من الخلف إلى الأمام لإضفاء العمق
التكديس باستخدام 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»؟
راكب View من الخلف إلى الأمام لإضفاء العمق تتمرن على SwiftUI Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ SwiftUI Academy؟
لا تُشترط خبرة سابقة. SwiftUI Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «التكديس باستخدام ZStack»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس SwiftUI Academy هذا؟
نعم. كل درس في SwiftUI Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- ترتيب View عمودياً
- الصفوف باستخدام HStack
- التكديس باستخدام ZStack
- المسافات والمحاذاة في حاويات التكديس