إتقان الشبكة في SwiftUI

الألعاب النارية ، habr. قبل أن ننتقل إلى المقالة ، أود أن أشارككم مجانًا تمامًا تسجيلاً لدرسين مفيدين للغاية قدمهما مدرسونا تحسباً لبدء الدورات الأساسية والمتقدمة في تطوير iOS:

1. بداية سريعة لتطوير iOS
2. عمل تطبيق Kotlin Multiplatform متعدد الخيوط

الآن دعنا ننتقل إلى المقال.

---

هذا الأسبوع ، أريد أن أتحدث إليكم عن Grids ، أحد أكثر الابتكارات المتوقعة في SwiftUI. كان الجميع ينتظر بفارغ الصبر بديلًا UICollectionViewفي SwiftUI ، وفي النهاية ظهر هذا العام. يوفر SwiftUI لنا LazyVGrid و جهات النظر LazyHGrid التي يمكننا استخدامها لإنشاء تخطيطات مع شبكات من العناصر.

أساسيات

LazyVGrid و LazyHGrid هما نوعان جديدان من طرق العرض التي توفرها لنا SwiftUI لإنشاء تخطيط مخصص فائق بناءً على شبكة من العناصر. الاختلاف الوحيد بينهما هو محور التعبئة. يملأ LazyVGrid المساحة المتاحة عموديًا. يضع LazyHGrid أطفاله أفقيًا. المحور هو الاختلاف الوحيد بين هذين الرأيين. لذلك ، فإن كل ما تعرفه عن LazyVGrid ينطبق على LazyHGrid والعكس صحيح. دعنا نلقي نظرة على المثال الأول.

struct ContentView: View {
    private var columns: [GridItem] = [
        GridItem(.fixed(100), spacing: 16),
        GridItem(.fixed(100), spacing: 16),
        GridItem(.fixed(100), spacing: 16)
    ]

    var body: some View {
        ScrollView {
            LazyVGrid(
                columns: columns,
                alignment: .center,
                spacing: 16,
                pinnedViews: [.sectionHeaders, .sectionFooters]
            ) {
                Section(header: Text("Section 1").font(.title)) {
                    ForEach(0...10, id: \.self) { index in
                        Color.random
                    }
                }

                Section(header: Text("Section 2").font(.title)) {
                    ForEach(11...20, id: \.self) { index in
                        Color.random
                    }
                }
            }
        }
    }
}

في المثال أعلاه ، نقوم بإنشاء شبكة من ثلاثة أعمدة مع كل عمود بحجم ثابت 100 نقطة. سأستخدم هذا المثال لوصف جميع خيارات التكوين المتاحة لنا.

1. المعلمة columnsعبارة عن مصفوفة تحدد الأعمدة في تخطيط الشبكة. لوصف عمود ، يوفر لنا SwiftUI نوع GridItem . سنتحدث عن ذلك بعد قليل.
2. هذه المعلمة alignmentيسمح لنا لمحاذاة محتويات الشبكة عن طريق نقل HorizontalAlignmentإلى LazyVGrid و VerticalAlignmentل LazyHGrid . يعمل نفس stack alignment.
3. spacingتحدد المعلمة المسافة بين كل صف داخل LazyVGrid أو المسافة بين كل عمود داخل LazyHGrid .
4. pinnedViewsتتيح لك المعلمة تحديد خيارات لتثبيت رؤوس وتذييلات الأقسام. إنه فارغ افتراضيًا ، مما يعني أن الرؤوس والتذييلات تتصرف مثل المحتوى وتختفي عند التمرير. يمكنك تمكين تثبيت الرأس والتذييل ، وفي هذه الحالة سيتداخلان مع المحتوى ويصبحان مرئيين بشكل دائم.

GridItem

يجب تعريف كل عمود في الشبكة بهيكل GridItem. GridItemيسمح لنا النوع بتحديد الحجم والمحاذاة والتباعد لكل عمود. دعنا نلقي نظرة على مثال صغير.

private var columns: [GridItem] = [
    GridItem(.fixed(50), spacing: 16, alignment: .leading),
    GridItem(.fixed(75)),
    GridItem(.fixed(100))
]

كما ترى ، يمكن أن يكون لكل عمود حجم وتباعد وخيارات محاذاة مختلفة. الشيء الأكثر إثارة للاهتمام هنا هو الحجم. هناك ثلاث طرق لتحديد حجم العمود داخل الشبكة. يمكن أن تكون ثابتة أو مرنة أو قابلة للتكيف. العمود



الثابت هو الأكثر وضوحًا. تضع الشبكة العمود وفقًا للحجم الذي تحدده. في المثال السابق ، أنشأنا تخطيطًا من ثلاثة أعمدة يتم فيه تثبيت الأعمدة عند 50 نقطة و 75 نقطة و 100 نقطة على التوالي.



خيار مرنيسمح لك بتحديد عمود يتوسع أو يتقلص بناءً على المساحة المتاحة. يمكننا أيضًا توفير الحد الأدنى والحد الأقصى من أحجام الأعمدة المرنة. بشكل افتراضي ، يستخدم الحد الأدنى للقيمة 10 نقاط ولا يتم تحديده عند الحد الأقصى.

private var columns: [GridItem] = [
    GridItem(.flexible(minimum: 250)),
    GridItem(.flexible())
]

نقوم هنا بإنشاء تخطيط يقسم المساحة المتاحة بين عمودين مرنين. يشغل العمود الأول 250 نقطة من الحد الأدنى لحجمه ، بينما يشتمل العمود الثاني على باقي المساحة المتاحة.



الخيار الأكثر إثارة للاهتمام هو التكيف . يتيح لنا خيار الاستجابة وضع عناصر متعددة في مساحة عمود واحد مرن. دعنا نحاول معرفة ذلك بمثال.

private var columns: [GridItem] = [
    GridItem(.adaptive(minimum: 50, maximum: 100)),
    GridItem(.adaptive(minimum: 150))
]

كما ترى ، لدينا عمودين متجاوبين. يحتوي العمود الأول على عدة عناصر بحجم لا يقل عن 50 نقطة ولا يزيد عن 100 نقطة. تكون الأعمدة المتجاوبة مفيدة عندما يحتاج عدد العناصر داخل عمود إلى أن يعتمد على المساحة المتاحة.



تأتي القوة الحقيقية للشبكات عندما تبدأ في خلط أنواع الأعمدة. يمكنك إنشاء تخطيط من عمودين ، حيث يتم إصلاح الأول والثاني متجاوب. دعونا نرى كيف سيبدو.

private var columns: [GridItem] = [
    GridItem(.fixed(100)),
    GridItem(.adaptive(minimum: 50))
]

خاتمة

تتيح لك الشبكة إنشاء تخطيطات معقدة للغاية ومثيرة للاهتمام عن طريق مزج أنواع مختلفة GridItem. تجدر الإشارة إلى أنه يمكن تحريك جميع التغييرات على الشبكات. آمل أن يحظى هذا المقال بإعجابكم. لا تتردد في متابعتي على Twitter وطرح أسئلتك المتعلقة بهذا الموضوع. شكرا لاهتمامكم ، أراك!

---

يمكنك معرفة المزيد عن دوراتنا باستخدام الروابط أدناه:

• مطور iOS. دورة اساسية
• مطور iOS. دورة متقدمة

---