0Pricing
Swift Academy · درس

‏LazyVGrid وLazyHGrid

أنشئوا تخطيطات شبكية متجاوبة باستخدام أعمدة GridItem الثابتة والمرنة والمتكيفة.

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

مرحبًا بكم

يوفر كل من `LazyVGrid` و`LazyHGrid` تخطيطات شبكية مع تعريفات مخصصة للأعمدة أو الصفوف باستخدام `GridItem`. وهما مناسبان جدًا للمعارض والكتالوجات وتخطيطات البطاقات.

أنواع GridItem

• `.fixed(size)` — حجم ثابت بالبكسل • `.flexible(min:max:)` — يملأ المساحة المتاحة • `.adaptive(minimum:maximum:)` — أكبر عدد ممكن من الأعمدة ضمن المساحة

‏LazyVGrid الأساسي

```swift let columns = [GridItem(.adaptive(minimum: 100))] LazyVGrid(columns: columns, spacing: 16) { ForEach(items) { item in ItemCard(item: item) } } ```

أعمدة ثابتة

```swift let cols = Array(repeating: GridItem(.fixed(120)), count: 3) LazyVGrid(columns: cols) { ForEach(0..<12) { i in Color.blue.frame(height:80) } } ```

أنواع GridItem مختلطة

```swift let cols = [GridItem(.flexible(minimum:80)), GridItem(.fixed(100))] ``` ادمج الأنواع لإنشاء تخطيطات على نمط Pinterest.

‏LazyHGrid

```swift let rows = [GridItem(.fixed(60)), GridItem(.fixed(60))] ScrollView(.horizontal) { LazyHGrid(rows: rows, spacing: 8) { ForEach(tags) { tag in TagView(tag: tag) } } } ```

المحاذاة والتباعد

```swift LazyVGrid(columns: columns, alignment: .leading, spacing: 12) { ... } ```

عناوين الأقسام في الشبكة

```swift LazyVGrid(columns: columns, pinnedViews: .sectionHeaders) { Section(header: Text("Section 1").font(.headline)) { ForEach(items1) { ItemView($0) } } } ```

الاختيار بين Adaptive وFixed

• `.adaptive` — الأفضل لشبكات الصور والمحتوى الديناميكي • `.fixed` — عند الحاجة إلى تحكم دقيق • `.flexible` — يملأ المساحة بالتساوي، مثل عمود في CSS flexbox

أداء التحميل الكسول

تعني البادئة `Lazy` أن الخلايا المرئية فقط هي التي تُنشأ — وهذا ضروري للقوائم الطويلة. من دون التحميل الكسول، تُنشأ جميع العناصر مسبقًا.

تحقق سريع

ما نوع `GridItem` الذي يُنشئ أكبر عدد ممكن من الأعمدة التي تستوعب عرضًا أدنى؟

مراجعة

أهم النقاط: • `LazyVGrid(columns:)` / `LazyHGrid(rows:)` لتخطيطات الشبكات • `GridItem(.fixed)` و`.flexible()` و`.adaptive(minimum:)` • `pinnedViews: .sectionHeaders` لعناوين الأقسام الثابتة • التحميل الكسول = إنشاء الخلايا المرئية فقط • `.adaptive` هو الخيار الأسهل لإنشاء شبكات متجاوبة التالي: Spacer وpadding وframe.

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

هل درس «‏LazyVGrid وLazyHGrid» مجاني؟

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

ماذا ستتعلم في «‏LazyVGrid وLazyHGrid»؟

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

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

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

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

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

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

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

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

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