SwiftUI Series 03｜استكشاف مشكلات التخطيط الشائعة وإصلاحها عندما "تبدو الصفحة سيئة بعض الشيء"

العديد من المشكلات المتعلقة بصفحات SwiftUI خفية:

• سمها خطأ، فهي ليست مكسورة بشكل واضح.
• دعنا نقول فقط أن هذا صحيح. يبدو أسوأ قليلا.

تشمل المشاعر الشائعة ما يلي:

• تبدو البطاقة عائمة بعض الشيء
• هناك علاقة غريبة بين النص والأيقونات
• التباعد يبدو غير مستقر
• تبدو بعض المناطق دائمًا مزدحمة أو فارغة

من المرجح أن يتم الخلط بين هذا النوع من المشكلات وبين “الجماليات غير الكافية” أو “التصميم يبدو خاطئًا”. لكن في كثير من الأحيان، لا تزال المشكلة تتعلق بالتخطيط بشكل أساسي، فقط:

هل تتماشى البنية وتخصيص المساحة والإيقاع البصري على نفس المستوى؟

1. العديد من الصفحات التي “تبدو سيئة بعض الشيء” هي في الواقع بسبب عدم استقرار البنية الرئيسية.

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

على سبيل المثال، إذا كانت كتلة البطاقة مسؤولة أيضًا عن:

• تخطيط المحور الرئيسي للمحتوى
• المحاذاة المحلية
• طبقات زخرفية
• إصلاح التباعد

في النهاية من السهل جدًا أن تصبح:

• يمكن عرضها بشكل منطقي
• إنها دائمًا متناثرة بصريًا بعض الشيء

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

2. المشكلة الأكثر شيوعًا هي أن المسؤوليات الهرمية مختلطة.

قد تبدو العديد من الصفحات بهذا الشكل:

• الطبقة الخارجية VStack -الوسطى HStack
• أضف padding إلى كل طبقة
• امزج المزيد من Spacer
• وفي النهاية، إذا لم يعجبك، قم بإضافة frame آخر

المشكلة في هذه الطريقة في الكتابة ليست بالضرورة خاطئة، بل هي المسؤوليات الهرمية غير الواضحة. من الصعب أن أقول:

• ما هي الطبقة المسؤولة عن بنية المحتوى
• ما هي الطبقة المسؤولة عن المحاذاة المحلية -أي طبقة هي مجرد زخرفة بصرية

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

3. غالبًا ما يكون سبب الصفحات “غير المستقرة” بصريًا هو أنظمة التباعد غير المستقرة.

هذه مشكلة ذات ترددات عالية جدًا.

العديد من الصفحات لا تبدو راقية. تبدو ظاهريًا كالألوان أو الخطوط، لكنها في الحقيقة أقرب إلى عدم التباعد والإيقاع:

• 12 بين أ و ب
• بين ب و ج18
• بين C و D يصبح 14 مرة أخرى

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

لذا، بالنسبة للعديد من الصفحات التي “تبدو سيئة”، فإن ما تحتاج حقًا إلى التحقق منه ليس:

• هل لا يزال هناك مقسم مفقود هنا؟

بدلاً من ذلك:

• ما إذا كان الإيقاع العمودي بين كتل المعلومات من نفس النوع متسقًا
• هل هناك تسلسل هرمي ثابت بين العنوان الرئيسي والعنوان الفرعي والنص التوضيحي؟
• ما إذا كانت الهوامش الداخلية والخارجية للبطاقة تتبع نفس مجموعة الأبعاد

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

4. النص غالبًا ما يجعل الصفحة “أسوأ”

لأن النص هو العنصر الذي يكشف بسهولة ما إذا كان منطق التخطيط مستقرًا.

الأسئلة المتداولة تشمل:

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

عادةً لا يتم تحديد هذه المشكلات مسبقًا:

• من لديه أولوية نصية أعلى؟
• ما مدى اتساع النص؟
• ما إذا كان التخطيط لا يزال مستقرًا عند وجود صفوف متعددة

بمجرد ظهور الصفحة بشكل طبيعي فقط في ظل “شروط النسخ القصيرة”، سيتم الكشف عن المحتوى الحقيقي بمجرد ظهوره.

5. كلما زاد اللحن، أصبح أكثر فوضوية.

لأنها تتعامل مع “المظاهر” وليس “الأسباب البنيوية”.

على سبيل المثال، عندما لا يرضي شيء ما على الصفحة عينيك، فمن السهل أن تفعل ذلك بشكل غريزي:

• أضف padding آخر
• أضف Spacer آخر
• قم بتعيين frame آخر

بالطبع قد يكون الأمر أكثر إمتاعًا للعين على المدى القصير، ولكن إذا لم تنظر إلى الوراء وتسأل:

• ما هو الطابق الذي يجب أن يكون مسؤولاً عن تخصيص المساحة هنا؟
• هل هذا الإصلاح يؤدي فقط إلى إزالة المشاكل الهيكلية؟

في المستقبل، سنعتمد غالبًا أكثر فأكثر على التصحيحات المحلية بدلاً من البنية نفسها.

السبب وراء سهولة “تصبح صفحات SwiftUI أكثر غرابة مع تغيرها” يرجع إلى حد كبير إلى أنها تجعل التعديلات المحلية سهلة بشكل خاص.

6. تسلسل أكثر فعالية لاستكشاف الأخطاء وإصلاحها

إذا كانت صفحة SwiftUI “تبدو سيئة”، فعادةً ما أقوم بالتحقق من هذا الترتيب:

1. ما إذا كانت الطبقة الهيكلية الرئيسية واضحة.
2. ما إذا كان التباعد بين كتل المعلومات على نفس المستوى موحدًا.
3. هل النص ثابت في المحتوى الطويل والمحتوى القصير والأسطر المتعددة؟
4. ما هي المعدلات الهيكلية وما هي مجرد تصحيحات لاحقة.
5. ما إذا كان التصحيح المحلي يعطل الإيقاع العام.

هذا الطلب له مزايا: إنه يسأل “ما هو مستوى المسؤولية الذي تم الخلط فيه؟”

7. الخلاصة: العديد من الصفحات “غير متقدمة” لأن مستوى التخطيط والإيقاع غير موحدين.

ولكي أختصر الأمر أقول:

صفحات SwiftUI دائمًا “تبدو أسوأ قليلًا”، وغالبًا ما تبدو غير كفؤة في كتابة الواجهات. في الواقع، لا يتم التعامل مع مستوى التخطيط وتخصيص المساحة والإيقاع البصري كنظام.

ولذلك، فإن الطريقة الأكثر فعالية للإصلاح هي عادة النظر إلى الوراء والمراجعة:

• هل الهيكل الرئيسي قائم؟
• ما إذا كانت المسافات لها إيقاع ثابت
• ما إذا كان النص والمحتوى يظلان مستقرين في ظل البيانات الحقيقية

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