التخطيطات وتنسيق الواجهة

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

تنبع الصعوبة من عادة منقولة من الويب. في CSS يملك العنصر حجمه الخاص ثم يتولى المتصفح التحكيم. أما في Flutter فالأمر معكوس: الأب يفرض القيود، والابن يختار حجمه ضمن هذه القيود، والأب يقرّر أين يضعه. ثلاث جمل وردت بهذه الصيغة في الوثائق الرسمية، وتنبثق منها كل سلوكيات التخطيط دون استثناء، بما فيها تلك التي تبدو غير منطقية.

سنستعرض هذا النموذج، ثم الـ widgets التي تستفيد منه: ‏Row وColumn وExpanded وFlexible وStack. وسنتسبب عمدًا في تجاوز الحدود أفقيًا، وهو أكثر أخطاء التخطيط شيوعًا في Flutter كله، ثم سنرى كيف نبني شاشة تتسع لهاتف بعرض 360 بكسل كما تتسع للوح.

النموذج في ثلاث جمل

القيود تنزل.   الأحجام تصعد.   الأب يحدّد المواضع.

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