SwiftUI Academy · درس

المسافات والمحاذاة في حاويات التكديس

اضبط المسافات والمحاذاة بين View المكدسة

المسافات والمحاذاة في حاويات التكديس درس مجاني في SwiftUI Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في SwiftUI Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Fine-Tuning Your Stacks

You can stack views in three directions, but real layouts need control over the gaps and edges between them. Let's tune that. 🎛️

The spacing Argument

Every stack accepts a spacing value that sets the gap between its children. A bigger number spreads views farther apart.

VStack(spacing: 20) {
    Text("Top")
    Text("Bottom")
}

Zero Spacing

Pass spacing: 0 to remove the gap entirely, so children sit flush against each other. This is handy for tight, edge-to-edge designs.

Default Spacing

If you skip the argument, SwiftUI picks a sensible default gap that matches Apple's design guidelines. You only override it when you need to.

Aligning a VStack

A VStack's alignment argument controls horizontal placement. Use .leading to left-align children instead of centering them.

VStack(alignment: .leading) {
    Text("Name")
    Text("Email")
}

Leading, Center, Trailing

VStack alignment offers .leading, .center, and .trailing. They decide whether children hug the left, the middle, or the right edge.

Aligning an HStack

An HStack's alignment is vertical instead. Use .top, .center, or .bottom to line children up along their tops, middles, or bottoms.

HStack(alignment: .top) {
    Text("Tall")
    Text("Short")
}

Spacing and Alignment Together

You can set both arguments at once. Alignment comes first, then spacing, giving you full control over the layout in one line.

VStack(alignment: .leading, spacing: 8) {
    Text("A")
    Text("B")
}

Meet Spacer

A Spacer is a flexible view that expands to push its neighbors apart, soaking up all the leftover space in a stack.

HStack {
    Text("Left")
    Spacer()
    Text("Right")
}

Pushing Views to Edges

Drop a Spacer between two views to send them to opposite ends, or before one view to shove it fully to the trailing side.

Baseline Alignment for Text

For mixed font sizes, HStack offers .firstTextBaseline so labels of different sizes share a clean reading line.

Quick Check

Let's check what each stack's alignment controls.

Recap: Spacing & Alignment

Well done! Use spacing to set gaps, alignment to position children, and Spacer to push views to the edges of any stack. 🚀

الأسئلة الشائعة

هل درس «المسافات والمحاذاة في حاويات التكديس» مجاني؟

نعم — نص درس «المسافات والمحاذاة في حاويات التكديس» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة SwiftUI Academy، انتقل إلى CoddyKit PRO. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.

ماذا ستتعلم في «المسافات والمحاذاة في حاويات التكديس»؟

اضبط المسافات والمحاذاة بين View المكدسة تتمرن على SwiftUI Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ SwiftUI Academy؟

لا تُشترط خبرة سابقة. SwiftUI Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «المسافات والمحاذاة في حاويات التكديس»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس SwiftUI Academy هذا؟

نعم. كل درس في SwiftUI Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

ترتيب View عمودياً
الصفوف باستخدام HStack
التكديس باستخدام ZStack
المسافات والمحاذاة في حاويات التكديس

← العودة إلى SwiftUI Academy