Column – claudSoft

🧱 ما هي `Column`؟

Column هي ويدجت (عنصر واجهة مستخدم) في Flutter تقوم بترتيب مجموعة من الودجات (widgets) عموديًا (من الأعلى للأسفل أو العكس حسب الاتجاه).

Column(
  children: [
    Text('مرحبا'),
    Icon(Icons.star),
  ],
)

Column(
  children: [
    Text('مرحبا'),
    Icon(Icons.star),
  ],
)

Dart

🧩 متى نستخدم `Column`؟

لعرض عناصر فوق بعضها مثل:
- نموذج تسجيل دخول (Login Form)
- عناصر الشاشة في صفحة تفاصيل
- مزيج من أزرار ونصوص وصور بشكل رأسي

📌 أهم خصائص `Column`

1. `children`

قائمة العناصر التي توضع داخل العمود.

Column(
  children: [
    Text('العنصر الأول'),
    Text('العنصر الثاني'),
  ],
)

Column(
  children: [
    Text('العنصر الأول'),
    Text('العنصر الثاني'),
  ],
)

Dart

2. `mainAxisAlignment`

تتحكم في توزيع العناصر على المحور العمودي (الرأسي)

القيمة	التأثير
`start`	العناصر تبدأ من الأعلى (افتراضي)
`end`	العناصر تبدأ من الأسفل
`center`	العناصر في الوسط
`spaceBetween`	فراغ متساوٍ بين العناصر فقط
`spaceAround`	فراغ متساوٍ حول كل عنصر
`spaceEvenly`	فراغات متساوية بين وحول كل العناصر

🧠 في Column، Main Axis = المحور العمودي

3. `crossAxisAlignment`

تتحكم في محاذاة العناصر على المحور الأفقي

القيمة	التأثير
`start`	محاذاة إلى اليسار (أو اليمين في RTL)
`end`	محاذاة إلى الجهة الأخرى
`center`	توسيط أفقي
`stretch`	تمدد العرض ليملأ كامل المحور الأفقي
`baseline`	المحاذاة حسب خط الأساس للنص (يتطلب `textBaseline`)

🧠 Cross Axis في Column هو المحور الأفقي (العرض)

4. `mainAxisSize`

هل تأخذ Column كل الارتفاع المتاح، أم فقط على حسب محتواها؟

القيمة	التأثير
`MainAxisSize.max`	يملأ كامل الشاشة عموديًا (افتراضي)
`MainAxisSize.min`	يأخذ فقط المساحة اللازمة للعناصر

5. `textDirection`

يؤثر على اتجاه المحاذاة الأفقي في حال استخدام start و end

القيمة	التأثير
`TextDirection.ltr`	من اليسار لليمين
`TextDirection.rtl`	من اليمين لليسار

6. `verticalDirection`

يحدد اتجاه عرض العناصر عموديًا

القيمة	التأثير
`down`	من الأعلى للأسفل (افتراضي)
`up`	من الأسفل للأعلى

7. `clipBehavior`

قص المحتوى الزائد إذا خرج عن حدود العمود

القيمة	التأثير
`Clip.none`	لا يتم القصّ
`Clip.hardEdge`، `antiAlias`…	يتم القص بحسب الطريقة

🔁 مثال شامل:

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text('أعلى'),
    Icon(Icons.star),
    ElevatedButton(onPressed: () {}, child: Text('زر')),
  ],
)

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text('أعلى'),
    Icon(Icons.star),
    ElevatedButton(onPressed: () {}, child: Text('زر')),
  ],
)

Dart

💡 ملاحظات مهمة:

مثل Row، لا تدعم Column التمرير تلقائيًا.
إذا زاد المحتوى عن الشاشة، يجب استخدام:

SingleChildScrollView(
  child: Column(
    children: [...],
  ),
)

SingleChildScrollView(
  child: Column(
    children: [...],
  ),
)

Dart

🔁 الفرق بين `Expanded` و `Flexible` داخل `Column`

✅ `Expanded`

تملأ كل المساحة المتبقية عموديًا:

Column(
  children: [
    Text('أعلى'),
    Expanded(child: Container(color: Colors.blue)),
  ],
)

Column(
  children: [
    Text('أعلى'),
    Expanded(child: Container(color: Colors.blue)),
  ],
)

Dart

✅ `Flexible`

يستخدم جزء من المساحة بشكل مرن، دون إجبار

Column(
  children: [
    Flexible(child: Container(color: Colors.green)),
    Text('أسفل'),
  ],
)

Column(
  children: [
    Flexible(child: Container(color: Colors.green)),
    Text('أسفل'),
  ],
)

Dart

📦 مقارنة سريعة بين `Row` و `Column`

الميزة	Row	Column
ترتيب أفقي	✔️	❌
ترتيب عمودي	❌	✔️
mainAxis =	أفقي	عمودي
crossAxis =	عمودي	أفقي
Scroll مطلوب عند overflow	✔️	✔️

🛠️ مثال تطبيقي واقعي

SingleChildScrollView(
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Text(
          'تسجيل الدخول',
          style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        ),
        SizedBox(height: 20),
        TextField(decoration: InputDecoration(labelText: 'البريد')),
        SizedBox(height: 10),
        TextField(obscureText: true, decoration: InputDecoration(labelText: 'كلمة المرور')),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {},
          child: Text('تسجيل الدخول'),
        ),
      ],
    ),
  ),
)

SingleChildScrollView(
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Text(
          'تسجيل الدخول',
          style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        ),
        SizedBox(height: 20),
        TextField(decoration: InputDecoration(labelText: 'البريد')),
        SizedBox(height: 10),
        TextField(obscureText: true, decoration: InputDecoration(labelText: 'كلمة المرور')),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {},
          child: Text('تسجيل الدخول'),
        ),
      ],
    ),
  ),
)

Dart

✅ الخلاصة

الخاصية	Column
ترتيب عمودي للعناصر	✔️
يدعم المحاذاة الأفقية	✔️
التمدد ممكن باستخدام `Expanded` و `Flexible`	✔️
لا يلف تلقائيًا عند الزيادة	❌
يجب لفّه بـ `ScrollView` أحيانًا	✔️

🧱 ما هي Column؟

🧩 متى نستخدم Column؟

📌 أهم خصائص Column

1. children

2. mainAxisAlignment

3. crossAxisAlignment

4. mainAxisSize

5. textDirection

6. verticalDirection

7. clipBehavior

🔁 مثال شامل:

💡 ملاحظات مهمة:

🔁 الفرق بين Expanded و Flexible داخل Column

✅ Expanded

✅ Flexible

📦 مقارنة سريعة بين Row و Column

🛠️ مثال تطبيقي واقعي

✅ الخلاصة

🧱 ما هي `Column`؟

🧩 متى نستخدم `Column`؟

📌 أهم خصائص `Column`

1. `children`

2. `mainAxisAlignment`

3. `crossAxisAlignment`

4. `mainAxisSize`

5. `textDirection`

6. `verticalDirection`

7. `clipBehavior`

🔁 الفرق بين `Expanded` و `Flexible` داخل `Column`

✅ `Expanded`

✅ `Flexible`

📦 مقارنة سريعة بين `Row` و `Column`