التخطيط: Row وColumn وPadding وExpanded وSizedBox

نظّم عدة عناصر widget على الشاشة باستخدام الأعمدة والصفوف والمسافات وتوزيع المساحة.

9 دقيقة · 3 أسئلة

نادرًا ما تعرض شاشة حقيقية عنصر widget واحدًا: بل عليك تنظيمها. وهذه مهمة عناصر التخطيط. يكدّس Column أبناءه عموديًا، من الأعلى إلى الأسفل؛ ويصفّهم Row أفقيًا، من اليسار إلى اليمين. وبما أنهما يقبلان عدة أبناء، لم يعد الوسيط يُسمى child بل children، ويتلقّى قائمة: عناصر widget بين قوسين معقوفين مربّعين [ ]، مفصولة بفواصل.

import 'package:flutter/material.dart';

Widget buildProfile() {
  return const Column(
    children: [
      Icon(Icons.person, size: 48),
      Text("Sonia Ben Ali"),
      Text("Flutter Developer"),
    ],
  );
}

يعمل Row بالطريقة نفسها تمامًا، لكن أفقيًا. ومحوره الرئيسي هو العرض: يختار الوسيط mainAxisAlignment كيفية توزيع الأبناء على هذا المحور (center لتجميعهم في الوسط، وspaceBetween لتباعدهم قدر الإمكان...). ولإدراج مسافة فارغة بسيطة بين عنصرَي widget، استخدم SizedBox: صندوق غير مرئي تحدّد عرضه (width) أو ارتفاعه (height).

import 'package:flutter/material.dart';

Widget buildRating() {
  return const Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(Icons.star, color: Colors.amber),
      SizedBox(width: 8),
      Text("4.8 out of 5"),
    ],
  );
}

يضيف Padding مسافة حول ابنه، حتى لا يلتصق المحتوى بالحواف. ويوصَف مقدار المسافة باستخدام EdgeInsets: تضع EdgeInsets.all(16) مقدار 16 بكسل على الجهات الأربع جميعها، وEdgeInsets.only(left: 8) على اليسار فقط، وEdgeInsets.symmetric(horizontal: 12) على اليسار واليمين في آنٍ واحد.

import 'package:flutter/material.dart';

Widget buildQuote() {
  return const Padding(
    padding: EdgeInsets.all(16),
    child: Text("A text with some room around it"),
  );
}

أداة أخيرة: Expanded. عند وضعها بين أبناء Row أو Column، تطلب من ابنها أن يشغل كل المساحة المتبقية. في المثال أدناه، يحتفظ الصندوق الرمادي بعرضه البالغ 80 بكسل، ويتمدّد الصندوق الأزرق المخضرّ ليملأ بقية العرض، مهما كان حجم الشاشة.

import 'package:flutter/material.dart';

Widget buildProgress() {
  return Row(
    children: [
      Container(width: 80, height: 40, color: Colors.grey),
      Expanded(
        child: Container(height: 40, color: Colors.teal),
      ),
    ],
  );
}

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. في أيّ اتجاه يرتّب Column أبناءه؟
   • أفقيًا، من اليسار إلى اليمين
   • عموديًا، من الأعلى إلى الأسفل
   • في دائرة، حول وسط الشاشة
2. ما فائدة العنصر Expanded؟
   • لجعل ابنه يشغل كل المساحة المتبقية في Row أو Column
   • لتكبير خط كل نص على الشاشة
   • لتكبير صورة عند لمسها
3. كيف تدرج مسافة فارغة بحجم 8 بكسل بين عنصرَي widget في Row؟
   • بوضع SizedBox(width: 8) بين الاثنين
   • بالضغط على مفتاح المسافة ثماني مرات
   • باستخدام Expanded(width: 8)