شرح استخدام ويدجت Column في فلاتر

تم تصميم ويدجت Column في Flutter لتنظيم العناصر بشكلٍ عمودي، وهو يعد أحد العناصر الأساسية في بناء واجهات المستخدم. يمكن استخدام Column لتنظيم العناصر بشكلٍ عمودي في الصفحة، ويمكن تحديد المساحة المخصصة لكل عنصر داخل العمود. يتميز عنصر Column بالعديد من الخصائص التي تساعد في تخصيص تصميم العناصر داخل العمود، وفيما يلي سنستعرض بعضًا من هذه الخصائص بالتفصيل.

كيفية استخدام Column في Flutter:

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

Column(
  children: <Widget>[
    // Add your widgets here
  ],
)

“اقرأ أيضاً: شرح استخدام ويدجت StreamBuilder في فلاتر“

الخصائص الأساسية لعنصر Column:

1- الخاصية children:

يتم استخدام الخاصية children في عنصر Column لإضافة العناصر التي سيتم تنظيمها داخل العمود. يمكن إضافة أي عنصر يرثى له، بما في ذلك صور ونصوص وأزرار وغيرها.

Column(
  children: <Widget>[
    Text('First item'),
    Text('Second item'),
    Text('Third item'),
    Text('Fourth item'),
  ],
)

2- الخاصية mainAxisAlignment:

يتم استخدام الخاصية mainAxisAlignment في عنصر Column لتحديد كيفية توزيع العناصر الرأسية داخل العمود. يمكن أن تأخذ هذه الخاصية القيم التالية:

• MainAxisAlignment.start: يتم توزيع العناصر من الجزء العلوي للعمود.
• MainAxisAlignment.end: يتم توزيع العناصر من الجزء السفلي للعمود.
• MainAxisAlignment.center: يتم توزيع العناصر بالتساوي في وسط العمود.
• MainAxisAlignment.spaceBetween: يتم توزيع العناصر بالتساوي في الفراغات بينها.
• MainAxisAlignment.spaceAround: يتم توزيع العناصر بالتساوي وبفراغات متساوية بينها وحولها.

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    Text('First item'),
    Text('Second item'),
    Text('Third item'),
    Text('Fourth item'),
  ],
)

“اقرأ أيضاً: شرح استخدام ويدجت ClipOval في فلاتر“

3- الخاصية crossAxisAlignment:

يتم استخدام الخاصية crossAxisAlignment في عنصر Column لتحديد كيفية توزيع العناصر الأفقية داخل العمود. يمكن أن تأخذ هذه الخاصية القيم التالية:

• CrossAxisAlignment.start: يتم توزيع العناصر من اليسار.
• CrossAxisAlignment.end: يتم توزيع العناصر من اليمين.
• CrossAxisAlignment.center: يتم توزيع العناصر بالتساوي في المنتصف.
• CrossAxisAlignment.stretch: يتم تمدد العناصر لتملأ المساحة الأفقية المخصصة لها.
• CrossAxisAlignment.baseline: يتم توزيع العناصر على أساس خط الأساس الذي يتم تحديده باستخدام الخاصية textBaseline.

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Text('First item'),
    Text('Second item'),
    Text('Third item'),
    Text('Fourth item'),
  ],
)

4- الخاصية mainAxisSize:

يتم استخدام الخاصية mainAxisSize في عنصر Column لتحديد حجم العمود. يمكن أن تأخذ هذه الخاصية القيم التالية:

• MainAxisSize.max: يتم تمدد العمود ليملأ المساحة الرأسية المتاحة.
• MainAxisSize.min: يتم تقليص العمود ليتناسب مع الحجم الفعلي للعناصر الموجودة داخله.

Column(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Text('First item'),
    Text('Second item'),
    Text('Third item'),
    Text('Fourth item'),
  ],
)

5- الخاصية verticalDirection:

يتم استخدام الخاصية verticalDirection في عنصر Column لتحديد اتجاه العناصر داخل العمود. يمكن أن تأخذ هذه الخاصية القيم التالية:

• VerticalDirection.up: يتم تنظيم العناصر بدءًا من الجزء السفلي للعمود إلى الجزء العلوي.
• VerticalDirection.down: يتم تنظيم العناصر بدءًا من الجزء العلوي للعمود إلى الجزء السفلي.

Column(
  verticalDirection: VerticalDirection.up,
  children: <Widget>[
    Text('First item'),
    Text('Second item'),
    Text('Third item'),
    Text('Fourth item'),
  ],
)

6- الخاصية textDirection:

يتم استخدام الخاصية textDirection في عنصر Column لتحديد اتجاه النص الموجود داخل العمود. يمكن أن تأخذ هذه الخاصية القيم التالية:

• TextDirection.ltr: يتم ترتيب النصوص من اليسار إلى اليمين.
• TextDirection.rtl: يتم ترتيب النصوص من اليمين إلى اليسار.

Column(
  textDirection: TextDirection.rtl,
  children: <Widget>[
    Text('First item'),
    Text('Second item'),
    Text('Third item'),
    Text('Fourth item'),
  ],
)

مثال على استخدام Column في Flutter:

لتوضيح استخدام Column في Flutter، سنقوم بإنشاء واجهة مستخدم بسيطة تستخدم Column لتنظيم العناصر بشكلٍ عمودي. سنستخدم الخصائص crossAxisAlignment وmainAxisAlignment لتحديد توضيح وتوزيع العناصر داخل العمود.

لدينا 3 عناصر: صورة، نص وزرار. سنستخدم crossAxisAlignment لجعل العناصر تبدأ من الجانب الأيسر للعمود، ونستخدم mainAxisAlignment لوضع الصورة في وسط العمود وباقي العناصر في الجزء السفلي من العمود.

فيما يلي الكود الخاص بواجهة المستخدم:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Column Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Column Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Image.network(
                  'https://picsum.photos/id/237/200/300'),
              Text(
                'Welcome to Column Example',
                style: TextStyle(fontSize: 24.0),
              ),
              ElevatedButton(
                onPressed: () {},
                child: Text('Click here'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

“اقرأ أيضاً: شرح استخدام ويدجت RadioListTile في فلاتر“

في النهاية، يعتبر عنصر Column في Flutter واحدًا من العناصر الأساسية التي يمكن استخدامها لتنظيم وترتيب عناصر واجهة المستخدم بشكلٍ عمودي. يمكن استخدام الخصائص العديدة المتاحة في Column لتحديد كيفية تنظيم وتوزيع العناصر داخل العمود بشكلٍ دقيق، مما يجعله أداة قوية لبناء واجهات المستخدم.