iOS / Swift / قيم Swift وملكية SwiftUI / الدرس 4
تخطيط SwiftUI والقوائم المستقرة
فكّر في الحجم المقترح وترتيب المعدلات وحجم النص الديناميكي وهوية الصف بدلا من تثبيت لقطة واحدة.
في هذه الصفحة
أهداف الدرس
- التخطيط تفاوض بين الحاوية والابن
- استخدم فراغا دلاليا وتركيبا مرنا
- اقرأ ترتيب المعدلات كبنية متداخلة
التخطيط تفاوض بين الحاوية والابن
تقترح حاويات SwiftUI أحجاما ويختار الأبناء أحجامهم ثم تضع الحاويات النتائج. يُدخل معدل frame مشاركا آخر في التخطيط بدلا من تغيير الطبيعة الذاتية للعرض. يفسر هذا أهمية ترتيب المعدلات وكيف يقص إطار ثابت المحتوى دون تقصير النص. ابدأ التشخيص بالمساحة المتاحة والحد الأدنى المفيد للمحتوى. اختبر عرضا ضيقا ووضعا أفقيا وDynamic Type كبيرا بدلا من افتراض أن اسم الجهاز يحدد المساحة. قد تغير المناطق الآمنة والعروض المنقسمة ولوحة المفاتيح هذه المساحة خلال جلسة واحدة.
استخدم فراغا دلاليا وتركيبا مرنا
يعبّر HStack وVStack عن العلاقات الأفقية والرأسية. يستهلك Spacer المساحة المتاحة بحسب التخطيط، وقد تؤثر layoutPriority في توزيعها على أبناء متنافسين. لا تقرر الآليات أهمية المعلومات. قد يختصر وقت ثانوي بينما يلتف عنوان أساسي؛ وهذا قرار منتج. فضّل محاذاة البداية والنهاية للبنية المراعية لاتجاه القراءة. وتجنب الارتفاعات الثابتة للبطاقات النصية إلا إذا حد عقد المحتوى ارتفاعها فعلا، فقد تحتاج الترجمة وأحجام الإتاحة إلى مساحة رأسية أكبر.
اقرأ ترتيب المعدلات كبنية متداخلة
ينشئ المقتطف الأول خلفيتين مختلفتين بتغيير ترتيب المعدلات. يصبح الحشو السابق للخلفية جزءا من المنطقة الملونة، بينما يقع اللاحق خارجها. المثال بسيط عمدا لتوقع الفرق دون صورة. وينطبق التفكير نفسه على القص والطبقات والإطارات ومناطق اللمس. عندما يبدو الهدف التفاعلي أصغر من البطاقة المرئية افحص الطبقة المالكة للإيماءة وشكل المحتوى. ولا تفترض أن الخلفية وحدها تنشئ عنصر التحكم الدلالي المطلوب.
struct PaddingDemo: View {
var body: some View {
VStack {
Text("Inside").padding(12).background(.teal)
Text("Outside").background(.teal).padding(12)
}
}
}
Inside has a padded teal region; Outside has teal behind its text with outer padding.
يتطلب SwiftUI. يوضح تركيب المعدلات لا قياس بكسلات أو لقطة مختبرة.
عرّف الصفوف بهوية المجال
يستخدم المقتطف الثاني سجلات Identifiable بمعرّفات نصية مستقرة. تستطيع List ربط هوية الصف بالسجل مع تغير موضعه. لا تولد المعرّفات داخل body ولا تستعمل تسمية قابلة للتعديل كهوية إذا أمكن تكرارها أو تغيرها. وإلا فقد تنتقل مسودة الصف أو تُصفّر أثناء الفرز. احفظ الاختيار بالمعرّف لا بفهرس لقطة مصفوفة. وإذا اختفى عنصر فقرّر إزالة الاختيار أو عرض عدم التوافر بدلا من قراءة فهرس قديم.
struct ReadingItem: Identifiable {
let id: String
let title: String
}
struct ReadingList: View {
let items = [ReadingItem(id: "b-7", title: "Maps"),
ReadingItem(id: "b-9", title: "Rivers")]
var body: some View { List(items) { item in Text(item.title) } }
}
The list displays Maps and Rivers with identities b-7 and b-9.
تمثل المعرّفات المستقرة العناصر لا المواضع. لا يفحص المقتطف البناء عند الحاجة أو التنقل أو عرض الجهاز.
اختر تركيب التمرير عن قصد
توفر List سلوك قوائم ملائما للمنصة، بينما يمنح ScrollView مع مكدس مناسب تركيبا أكثر تخصيصا. تؤجل المكدسات الكسولة الإنشاء للمحتوى المناسب، لكنها لا تجعل كل عملية صف رخيصة. تجنب تداخل التمرير لمجرد إصلاح القص دون تحديد السطح المالك للتمرير. يبقى الفرز المكلف أو فك الصور أو الشبكة داخل كل صف مشكلة مهما كان البناء كسولا. حضّر بيانات الصف لدى مالك نموذج وقِس تمريرا ممثلا قبل استبدال الحاويات القياسية بآليات مخصصة أعقد.
اختبر التخطيط بمحتوى وهوية متغيرين
راجع البيانات الفارغة والصفوف الكثيرة والتسميات العربية الطويلة والمعرّفات المختلطة وأحجام نص الإتاحة ونموذجا فوق النتائج مع لوحة مفاتيح ظاهرة. ثم حرر صفا ذا حالة وأعد الترتيب وافحص بقاء مسودته مع المعرّف نفسه. لا تكشف معاينة ثابتة لصفين إنجليزيين قصيرين هذه الأخطاء. افحص ترتيب التركيز وتسميات الإتاحة مع القص المرئي. واربط مقارنة الصور بإعداد محاكي وخطوط معروفين؛ وراجع الصورة المتغيرة بدلا من قبولها عمياء كمرجع جديد.
الأخطاء الشائعة وإصلاحها
لا يشمل اللون منطقة الحشو
- لماذا يحدث؟
- يسبق معدل الخلفية الحشو.
- كيف تصلحه؟
- ضع الحشو قبل الخلفية إذا شملته المنطقة المقصودة.
- كيف تتجنب تكراره؟
- اقرأ سلسلة المعدلات كطبقات تخطيط متداخلة.
يتغير الصف المختار بعد الإدراج
- لماذا يحدث؟
- يتبع الاختيار الفهرس لا هوية العنصر.
- كيف تصلحه؟
- خزّن معرّف السجل المستقر وحله في البيانات الحالية.
- كيف تتجنب تكراره؟
- اختبر الإدراج والحذف حول الصف المختار.
يُقص النص الكبير داخل البطاقة
- لماذا يحدث؟
- افترضت أبعاد ثابتة طولا وحجم خط واحدين.
- كيف تصلحه؟
- اسمح بالنمو أو الالتفاف أو ترتيب متجاوب.
- كيف تتجنب تكراره؟
- أدرج Dynamic Type والعربية في مراجعة التخطيط.
اختبر فهمك
1. لماذا لا يصلح UUID جديد مع كل body معرّفا مستقرا للصف؟
اعرض الحل المشروح
يخبر SwiftUI بأن كل وصف عنصر جديد، فيضعف استمرار الحالة والمقارنة. أنشئ الهوية عند إنشاء سجل المجال أو استخدم مفتاحه المستقر. ينبغي أن يغير الترتيب الموضع مع حفظ هوية العنصر.
2. هل يكون الاختصار العلاج الافتراضي لكل تسمية مترجمة؟
اعرض الحل المشروح
لا. حدّد المعلومات الأساسية. اسمح للتسمية الرئيسية بالالتفاف أو غيّر الترتيب عند الحاجة، وخصص الاختصار لحالات يبقى فيها المعنى قابلا للاسترجاع. اختبر الإجراء وتسمية الإتاحة كي لا يخفي العرض المختصر المهمة.
أهم ما تعلمته
- التخطيط تفاوض بين الحاوية والابن
- اختبر التخطيط بمحتوى وهوية متغيرين