0Pricing
Swift Academy · درس

أساسيات VStack وHStack وZStack

رتّبوا العروض رأسيًا وأفقيًا وضمن العمق مع التحكم في التباعد والمحاذاة.

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

مرحبًا بكم

إن `VStack` و`HStack` و`ZStack` هي حاويات التخطيط الأساسية الثلاث في SwiftUI. ويُعد فهمها ضروريًا لبناء أي واجهة.

‏VStack — عمودي

```swift VStack(alignment: .leading, spacing: 8) { Text("Title").font(.title) Text("Subtitle").foregroundColor(.secondary) Button("Action") {} } ```

‏HStack — أفقي

```swift HStack(spacing: 16) { Image(systemName: "star") Text("Favourite") Spacer() Text("4.9") } ```

‏ZStack — عمق

```swift ZStack(alignment: .bottomTrailing) { Image("background") Text("Overlay") .padding() .background(Color.black.opacity(0.5)) } ```

خيارات المحاذاة

محاذاة VStack: `.leading` و`.center` و`.trailing` محاذاة HStack: `.top` و`.center` و`.bottom` و`.firstTextBaseline` محاذاة ZStack: أي `Alignment` يجمع بين المحاذاة الأفقية والرأسية

معلمة التباعد

```swift VStack(spacing: 0) { // no space between views Divider() Text("A") Divider() Text("B") } ```

تداخل الحزم

```swift VStack { HStack { Image("icon"); Text("Name") } Text("Description") } ``` يمكن تداخل الحزم بأي عمق للوصول إلى أي تخطيط.

‏Spacer

```swift HStack { Text("Left") Spacer() // pushes views to edges Text("Right") } ```

‏Divider

```swift VStack { Text("Above") Divider() // horizontal line Text("Below") } ```

الأداء: Group مقابل Stack

عند وجود أكثر من 10 عناصر فرعية، لفّها داخل `Group` أو انتقل إلى `LazyVStack` لتجنب حدود شجرة العرض: ```swift ScrollView { LazyVStack { ForEach(items) { Text($0.name) } } } ```

تحقق سريع

أي حزمة تضع العروض على محور العمق، من الأمام إلى الخلف؟

خلاصة

أهم النقاط: • `VStack` — عمودي؛ و`HStack` — أفقي؛ و`ZStack` — عمق • استخدم المعلمتين `alignment:` و`spacing:` • تدفع `Spacer()` العناصر المجاورة إلى الحواف • أدخل الحزم داخل بعضها لإنشاء تخطيطات معقدة • استخدم `LazyVStack`/`LazyHStack` للقوائم الكبيرة التالي: LazyVGrid وLazyHGrid.

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

هل درس «أساسيات VStack وHStack وZStack» مجاني؟

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

ماذا ستتعلم في «أساسيات VStack وHStack وZStack»؟

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

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

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

كم من الوقت يستغرق درس «أساسيات VStack وHStack وZStack»؟

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

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

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

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

  1. أساسيات VStack وHStack وZStack
  2. ‏LazyVGrid وLazyHGrid
  3. معدِّلات Spacer وPadding وFrame
  4. ‏GeometryReader للتخطيطات المتكيفة
← العودة إلى Swift Academy