عنصر (ويدجت) العمود في فلاتر Flutter Column Widget

Flutter Column Widget

مقدمة

هذا الدرس يستكشف استخدام عنصر Column في تطبيقات Flutter. عنصر Column هو أحد العناصر الأساسية في إطار العمل Flutter ويستخدم لترتيب العناصر بشكل عمودي في واجهة المستخدم. يتيح لنا هذا العنصر إنشاء تصميمات مرنة وسهلة القراءة لتطبيقاتنا.

خلال هذا الدرس، سنتعلم كيفية استخدام عنصر Column بشكل فعال في ترتيب وتنظيم عناصر واجهة المستخدم، بالإضافة إلى فهم الخصائص المختلفة المتاحة لتخصيص التصميم.

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

هذا الدرس موجه للمبتدئين في Flutter الذين يرغبون في فهم كيفية استخدام عنصر Column بشكل فعال في تطبيقاتهم.

ما هو ويدجت العمود أو فئة العمود أو عنصر العمود في فلاتر؟

الـ Flutter Column Widget هو عنصر واجهة مستخدم يستخدم في تطوير تطبيقات الهاتف المحمول وتطبيقات الويب باستخدام إطار العمل Flutter. يُستخدم هذا العنصر لترتيب العناصر الفرعية الخاصة به في عمود واحد عموديًا. يمكن استخدامه لعرض قائمة عناصر أو عناصر واجهة مستخدم أخرى بشكل عمودي على الشاشة.

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

يمكن تخصيص خصائص الـ Column Widget مثل الفارغة (المسافة) بين العناصر، وتوجيهه لليمين، اليسار، الوسط أو القاع في الشاشة. تسمح هذه المرونة بتخصيص تصميم الواجهة بشكل مرن وفقًا لاحتياجات تطبيقك.

خطوة بخطوة كيف ننشء ونستخدم ويدجت أو عنصر العمود في فلاتر ؟

Flutter Column Widget

لإنشاء واستخدام عنصر واجهة المستخدم Column في Flutter، يمكن اتباع الخطوات التالية:

إضافة الاستيراد:
نجلب مكتبة فلاتر في ملف الكود الخاص بك.

import 'package:flutter/material.dart';

استخدام Column Widget:

يمكننا استخدام Column Widget كعنصر واجهة مستخدم في أي مكان داخل واجهة التطبيق .

على سبيل المثال، يمكننا وضعه داخل Scaffold Widget كمحتوى للجسم Body.

Scaffold(
appBar: AppBar(
title: Text('Column Example'),
),
body: Column(
children: [
// يضاف هنا العناصر الفرعية داخل الـ Column
],
),
);

إضافة العناصر الفرعية:
نضع العناصر الفرعية داخل قائمة الأطفال (children) لعنصر الـ Column.

يمكننا إضافة أي عنصر واجهة مستخدم نرغب في استخدامها داخل العمود.

Column(
children: [
Text('عنصر واجهة المستخدم الأول'),
Text('عنصر واجهة المستخدم الثاني'),
// يمكنك إضافة المزيد من العناصر هنا
],
)

تخصيص العناصر الفرعية:
يمكنك تخصيص كل عنصر فرعي داخل العمود بشكل مستقل، مثل تغيير النص أو تطبيق نمط النص أو أي تخصيص آخر يناسب تطبيقك.

Column(
children: [
Text(
'عنصر واجهة المستخدم الأول',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
FlatButton(
onPressed: () {},
child: Text('زر'),
color: Colors.blue,
),
// يمكنك إضافة المزيد من التخصيصات هنا
],
)

باستخدام هذه الخطوات، يمكنك إنشاء واستخدام عنصر واجهة المستخدم Column في تطبيقات Flutter الخاصة بك لتنظيم العناصر بشكل عمودي على الشاشة.

الكود النهائي:هذا مثال بسيط يوضح كيفية إنشاء واستخدام عنصر واجهة المستخدم Column في Flutter.

سنقوم بإنشاء تطبيق بسيط يعرض عناصر نصية في عمود واحد.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Column Widget Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'العنصر الأول',
style: TextStyle(fontSize: 24),
),
Text(
'العنصر الثاني',
style: TextStyle(fontSize: 24),
),
Text(
'العنصر الثالث',
style: TextStyle(fontSize: 24),
),
],
),
),
),
);
}
}

في هذا المثال:

تم استيراد مكتبة Flutter.
تم إنشاء الدالة ()main حيث يتم تشغيل التطبيق.
تم إنشاء فئة MyApp التي تمثل التطبيق.
داخل MyApp، تم إرجاع MaterialApp والذي يحتوي على Scaffold.
تم تحديد شريط التطبيق AppBar.
في الجسم (body) من الـ Scaffold، تم وضع عنصر Column المحتوي على عدة عناصر فرعية.
تم تحديد خصائص mainAxisAlignment لتوجيه العناصر الفرعية بشكل مركزي في العمود.
تم إضافة عدة عناصر نصية داخل الـ Column.
هذا التطبيق سيقوم بعرض ثلاثة عناصر نصية بشكل عمودي في واجهة المستخدم.

شرح الكود السابق في أسطر منفصلة:

يتم استيراد مكتبة Flutter لاستخدام مكوناتها في التطبيق.

تُعرّف دالة ()main التي تعمل كنقطة بداية للتطبيق، حيث يتم تشغيل التطبيق من خلالها.

تُعرّف فئة MyApp التي تمثل التطبيق نفسه، والتي تمتد من StatelessWidget.

يتم إنشاء MaterialApp والذي يشكل الهيكل الأساسي للتطبيق، حيث يمكن أن يحتوي على عناصر مثل Scaffold و AppBar.

يتم تعريف Scaffold الذي يوفر الإطار الرئيسي لواجهة المستخدم، بما في ذلك AppBar و body.

تُعرّف AppBar التي تعرض العنوان في أعلى التطبيق.

في الـ body من Scaffold، يتم استخدام Center لوضع العناصر في المنتصف الأفقي والعمودي.

يتم استخدام Column لترتيب العناصر بشكل عمودي، حيث يتم وضع عدة عناصر داخله.

تُعرّف العناصر النصية داخل Column، ويتم تحديد نص وحجم الخط لكل نص.

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

شجرة الويدجت (Widget tree)

للتطبيق البسيط الذي تم عرضه في الأمثلة السابقة:

– MaterialApp
– Scaffold
– AppBar
– Text(“Column Widget Example”)
– body
– Center
– Column
– Text(“العنصر الأول”)
– Text(“العنصر الثاني”)
– Text(“العنصر الثالث”)

شرح شجرة الويدجت

MaterialApp: هو عنصر واجهة المستخدم الرئيسي في التطبيق، ويوفر هيكلية لجميع العناصر الموجودة في التطبيق.

Scaffold: يمثل هيكلية الصفحة ويحتوي على عناصر مثل الـ AppBar والـ body.

AppBar: يحتوي على العنصر النصي “Column Widget Example” كعنوان للتطبيق.

body: يحتوي على وسيلة العرض الرئيسية للتطبيق.

Center: يُستخدم لوضع العناصر بالتوسط الأفقي والعمودي داخل الـ Scaffold.

Column: يُستخدم لترتيب العناصر بشكل عمودي.

Text: يُستخدم لعرض النص، وفي هذا المثال يوجد ثلاثة عناصر نصية داخل الـ Column.

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

تشغيل التطبيق:

تطبيق 2 : تطبيق خطوة بخطوة عن استخدام Flutter Column Widget

سنقوم خطوة بخطوة بإنشاء تطبيق بسيط باستخدام Flutter Column Widget.

الخطوة 1: إعداد المشروع
نقم بإنشاء مشروع Flutter جديد في محرر النصوص الخاص بك أو في واجهة الأوامر باستخدام الأمر التالي:

flutter create column_example

نقم بالانتقال إلى مجلد المشروع الجديد:

cd column_example

الخطوة 2: تحرير ملف الكود الرئيسي

نقم بفتح ملف lib/main.dart في محرر النصوص الخاص بك.

نقم بتعديل الملف ليبدو كالتالي:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Column Widget Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'لغة عربية',
                style: TextStyle(fontSize: 40),
              ),
              Text(
                'لغة انجليزية',
                style: TextStyle(fontSize: 40),
              ),
              Text(
                'علوم ',
                style: TextStyle(fontSize: 40),
              ),
              Text(
                'رياضيات ',
                style: TextStyle(fontSize: 40),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

الخطوة 3: تشغيل التطبيق
قم بتشغيل التطبيق عن طريق تشغيل الأمر التالي في واجهة الأوامر:

flutter run
بهذه الخطوات، قمت بإنشاء تطبيق Flutter بسيط يستخدم Column Widget لترتيب ثلاثة عناصر نصية بشكل عمودي.

شرح الكود

import 'package:flutter/material.dart';

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

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

هذا السطر يعرف الدالة main() والتي هي نقطة البداية لتنفيذ التطبيق. داخل هذه الدالة، نقوم بتشغيل التطبيق باستخدام دالة runApp() ونمرر إليها عنصر واجهة المستخدم الرئيسي للتطبيق.

class MyApp extends StatelessWidget {

نقوم هنا بتعريف فئة جديدة تسمى MyApp، والتي تمتد من StatelessWidget. تستخدم فئة StatelessWidget عندما لا تحتاج الواجهة لأن تتفاعل مع التغييرات في البيانات الخاصة بها.

@override
Widget build(BuildContext context) {
return MaterialApp(

تُعرف الدالة build() التي تستخدم لبناء وتقديم واجهة المستخدم للتطبيق. نقوم هنا بإرجاع عنصر MaterialApp الذي يحتوي على التطبيق بأكمله.

home: Scaffold(
appBar: AppBar(
title: Text('Column Widget Example'),
),

نحدد هنا Scaffold والذي يُعتبر هيكل الصفحة الأساسي في التطبيق، ونعرف AppBar الذي يحتوي على عنوان للتطبيق.

body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,

نحدد body الذي يمثل الجسم الرئيسي للتطبيق، ونستخدم Center لوضع العناصر في المنتصف الأفقي والعمودي. داخل Center، نستخدم Column لترتيب العناصر بشكل عمودي.

children: <Widget>[
Text(
'لغة عربية',
style: TextStyle(fontSize: 24),
),

نعرف هنا عناصر الواجهة الفرعية التي ستكون داخل Column. في هذا المثال، نقوم بإنشاء ثلاثة عناصر نصية باستخدام Text.

],
),
),
),
);
}
}

تُغلق هنا الدوال والفئات والعناصر، وتُنهي الدالة build() وفئة MyApp.

شجرة الويدجت

شجرة الويدجت (Widget tree) للتطبيق الذي تم إنشاؤه باستخدام Flutter Column Widget:

– MaterialApp
– Scaffold
– AppBar
– Text(“Column Widget Example”)
– body
– Center
– Column
– Text(“لغة عربية”)
– Text(“لغة انجليزية”)
– Text(“علوم”)

– Text(“رياضيات”)

هذه الشجرة توضح ترتيب العناصر في التطبيق بشكل تسلسلي، حيث يكون MaterialApp هو الجذر والذي يحتوي على Scaffold كعنصر فرعي، ويتضمن Scaffold عناصر أخرى مثل AppBar و body. وفي body، يتم وضع العناصر بواسطة Column Widget.

تشغيل التطبيق :

تطبيق 3:Flutter Column Widget

سنقوم بإنشاء تطبيق يعرض قائمة من العناصر النصية قابلة للتمرير داخل عمود، مع إضافة بعض التخصيصات للنصوص.

الخطوة 1: إعداد المشروع
نقم بإنشاء مشروع Flutter جديد باستخدام الأمر التالي:

flutter create advanced_column_example

ننتقل إلى مجلد المشروع الجديد:

cd advanced_column_example

الخطوة 2: تحرير ملف الكود الرئيسي

قم بفتح ملف lib/main.dart في محرر النصوص الخاص بك.

نستبدل المحتوى بالكود التالي:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
final List<String> items = List<String>.generate(50, (index) => "Item ${index + 1}");

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Advanced Column Widget Example'),
),
body: Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(items.length, (index) {
return Padding(
padding: EdgeInsets.symmetric(vertical: 8.0),
child: Text(
items[index],
style: TextStyle(fontSize: 20.0),
),
);
}),
),
),
),
),
);
}
}

الخطوة 3: تشغيل التطبيق
قم بتشغيل التطبيق باستخدام الأمر التالي:

flutter run

الخطوة 4: الشرح

قمنا بإضافة SingleChildScrollView حول Column لتمكين التمرير العمودي عندما تكون هناك قائمة طويلة من العناصر.
استخدمنا List.generate لإنشاء قائمة من العناصر النصية.
ضبطنا تخطيط العناصر بواسطة Padding لإضافة مسافة بين كل عنصر.
قمنا بتخصيص نمط النص باستخدام خاصية TextStyle.
بهذه الطريقة، يتم عرض قائمة من العناصر النصية داخل عمود، مع القدرة على التمرير إذا كانت القائمة طويلة.

شرح الكود في أسطر منفصلة

سطرًا بسطر في التطبيق الذي يستخدم Flutter Column Widget:

import 'package:flutter/material.dart';

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

في هذا الجزء من الكود، يتم استيراد المكتبة المطلوبة من Flutter والتي تتضمن المكونات والأدوات اللازمة لتطوير التطبيق.

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(

هنا، يتم تعريف فئة MyApp التي تمتد من StatelessWidget. هذه الفئة هي المدخل الرئيسي لتطبيقنا وتحتوي على واجهة المستخدم الرئيسية.

home: Scaffold(
appBar: AppBar(
title: Text('Column Widget Example'),
),

في هذا الجزء، يتم تحديد واجهة المستخدم الرئيسية باستخدام Scaffold ويتم تحديد شريط التطبيق AppBar الذي يحتوي على عنوان التطبيق.

body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'العنصر الأول',
style: TextStyle(fontSize: 24),
),
Text(
'العنصر الثاني',
style: TextStyle(fontSize: 24),
),
Text(
'العنصر الثالث',
style: TextStyle(fontSize: 24),
),
],
),
),
),
);
}
}

في هذا الجزء، يتم استخدام Column Widget لترتيب العناصر بشكل عمودي. يتم وضع ثلاثة عناصر نصية داخل Column، ويتم تحديد توجيهها بواسطة MainAxisAlignment.center. وتُظهر هذه النصوص بحجم الخط 24.

شجرة الويدجت

شجرة الويدجت لتطبيقنا الذي يستخدم Flutter Column Widget:

هذه الشجرة توضح كيفية تنظيم الواجهة بطريقة هرمية، حيث يكون MaterialApp هو العنصر الجذري الذي يحتوي على Scaffold كعنصر فرعي، والذي بدوره يحتوي على عناصر أخرى مثل AppBar و body. في body، يتم استخدام Column لترتيب العناصر بشكل عمودي.

تشغيل التطبيق: على مفسر فلاتر اون لاتر اون لاين جربنا التطبيق فكان:

اختبار على عنصر العمود في فلاتر

طبعاً، إليك بعض الأسئلة التي يمكن استخدامها لاختبار فهمك لموضوع “Flutter Column Widget”:

ما هو دور عنصر Column في تطبيق Flutter؟

ما الخاصية التي تحدد توجيه العناصر داخل Column Widget؟

كيف يمكنك إضافة مسافة بين العناصر داخل Column؟

ما هو دور عنصر SizedBox داخل Column Widget؟

متى يكون مناسبًا استخدام Column Widget في تطبيق Flutter؟

ما هي خطوات إنشاء تطبيق بسيط باستخدام Flutter Column Widget؟

كيف يمكن تخصيص تنسيق العناصر داخل Column بشكل محدد؟

ما هي الخطوة الأولى لإنشاء تطبيق جديد باستخدام Flutter؟

كيف يمكن تعيين عنوان لشريط التطبيق AppBar باستخدام Flutter؟

ما هو الفرق بين CrossAxisAlignment و MainAxisAlignment في عنصر Column؟

تأكد من فهمك للمفاهيم الأساسية وكيفية استخدام عنصر Column في تطبيقات Flutter.

الاجابات

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

الخاصية التي تحدد توجيه العناصر داخل Column Widget هي mainAxisAlignment.

يمكن إضافة مسافة بين العناصر داخل Column باستخدام عنصر SizedBox وتحديد الارتفاع أو العرض المطلوب.

عنصر SizedBox يستخدم لإضافة مسافة فارغة داخل Column Widget، حيث يمكن استخدامه لتحديد المسافة العمودية أو الأفقية بين العناصر.

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

الخطوة الأولى لإنشاء تطبيق جديد باستخدام Flutter هي إنشاء مشروع جديد باستخدام أمر “flutter create”، ثم التعديل على ملف الكود الرئيسي لتطبيق Flutter.

يمكن تخصيص تنسيق العناصر داخل Column بشكل محدد باستخدام الخصائص الخاصة بكل عنصر، مثل تحديد حجم النص، وتحديد اللون، وتحديد التباعد بين العناصر.

الفرق بين CrossAxisAlignment وMainAxisAlignment في عنصر Column هو أن CrossAxisAlignment يحدد توجيه العناصر عرضيًا (أفقيًا)، بينما MainAxisAlignment يحدد توجيه العناصر رأسيًا (عموديًا).

الخطوة الأولى لإنشاء تطبيق جديد باستخدام Flutter هي استيراد المكتبة وتعريف الدالة الرئيسية main()، ثم إنشاء فئة تمتد من StatelessWidget.

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

دارت | فلاتر

Curriculum