SwiftUI Academy · درس

‏LazyVStack وLazyHStack

اعرض المحتوى الكبير بشكل كسول لتحسين الأداء

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

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

The Eager Problem

A regular VStack builds every child at once. With hundreds of rows, that eager work can stutter and waste memory.

Meet LazyVStack

A LazyVStack only creates rows as they scroll into view, keeping huge lists fast and light. ⚡

LazyVStack {
    ForEach(items) { item in
        Row(item)
    }
}

Lazy Needs Scrolling

Always place a LazyVStack inside a ScrollView, since lazy loading only pays off when content scrolls offscreen.

ScrollView {
    LazyVStack {
        ForEach(items) { Row($0) }
    }
}

The Horizontal Twin

A LazyHStack does the same trick sideways, perfect for long, swipeable rows of cards or thumbnails.

ScrollView(.horizontal) {
    LazyHStack {
        ForEach(photos) { Thumb($0) }
    }
}

Same Spacing API

Lazy stacks accept the same spacing and alignment options as their eager cousins, so your layout code barely changes.

LazyVStack(alignment: .leading, spacing: 12) {
    ForEach(items) { Row($0) }
}

Cells Get Reused

As rows leave the screen, a LazyVStack can discard them, so memory stays steady even with thousands of items.

Lazy vs List

A List is lazy too, but a LazyVStack gives you styling freedom with no built-in separators or insets.

Pinned Headers

Lazy stacks support pinnedViews, letting section headers stick to the top as you scroll, like a contacts app.

LazyVStack(pinnedViews: [.sectionHeaders]) {
    Section(header: Header()) {
        Rows()
    }
}

When to Stay Eager

For a handful of items a plain VStack is simpler. Reach for lazy only when the list grows long.

Watch the Scroll

You will not see new LazyVStack rows being built, but Instruments shows they appear just in time as you scroll.

Scale with Confidence

With lazy stacks you can show endless feeds, galleries, and timelines without ever worrying about performance. ✨

Quick Check

Think about why lazy stacks exist.

Recap

You met LazyVStack and LazyHStack: stacks that create children on demand inside a ScrollView for smooth, large layouts. 🎉

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

هل درس «‏LazyVStack وLazyHStack» مجاني؟

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

ماذا ستتعلم في «‏LazyVStack وLazyHStack»؟

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

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

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

كم من الوقت يستغرق درس «‏LazyVStack وLazyHStack»؟

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

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

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

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

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