خصائص عنصر (ودجيت) الصف في فلاتر Flutter widget Row properties

خصائص ويدجيت (عنصر) الصف في فلاتر

Flutter Row widget properties
مقدمة  عن خصائص عنصر الصف في فلاتر 

استكشاف عنصر الصف (Row) في فلاتر Flutter

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

في هذا الدرس، سنقوم بفحص عنصر الصف (Row) في فلاتر Flutter بشكل شامل. سنستكشف خصائصه المختلفة وكيفية استخدامها بشكل فعال لتنظيم العناصر داخل واجهات التطبيق. سنقدم أمثلة عملية وتطبيقات لكل خاصية، مما يمكنك من فهم كيفية استخدامها في تطبيقاتك الخاصة.

هيا نجول  في استكشاف القوة والمرونة التي يوفرها عنصر الصف (Row) في بناء تطبيقات Flutter التفاعلية والجذابة.

ما هي خصائص ويدجيت الصف في فلاتر؟

Flutter Row widget properties

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

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

يمكن تعيين قيم مثل MainAxisAlignment.start (التوزيع من البداية)، MainAxisAlignment.center (التوزيع في
المنتصف)، MainAxisAlignment.end (التوزيع من النهاية)، وغيرها.

crossAxisAlignment: هذه الخاصية تحدد كيفية توزيع العناصر عبر المحور الثانوي، الذي هو المحور العمودي في حالة الـ Row.
يمكن تعيين قيم مثل CrossAxisAlignment.start (التوزيع من البداية)، CrossAxisAlignment.center (
التوزيع في المنتصف)، CrossAxisAlignment.end (التوزيع من النهاية)، وغيرها.

mainAxisSize: تحدد حجم الـ Row على طول المحور الرئيسي. يمكن تعيين قيم مثل MainAxisSize.min (الحجم الأدنى،
أي تتكاثر الـ Row حسب حجم العناصر فيه) و MainAxisSize.max (الحجم الأقصى، أي يحتل الـ Row المساحة الكاملة
المتاحة).

textDirection: تحدد اتجاه نص العناصر في الـ Row. يمكن تعيين قيم مثل TextDirection.ltr (من اليسار إلى
اليمين) و TextDirection.rtl (من اليمين إلى اليسار).

verticalDirection: تحدد اتجاه ترتيب العناصر عمودياً. يمكن تعيين قيم مثل VerticalDirection.down (من
الأعلى إلى الأسفل) و VerticalDirection.up (من الأسفل إلى الأعلى).

textBaseline: في حال تواجد نصوص مختلفة الأحجام داخل الـ Row، فهذه الخاصية تحدد أساس النص لتحديد الارتفاعات. يمكن تعيين قيم مثل TextBaseline.alphabetic و TextBaseline.ideographic.

خطوة بخطوة كيف نستخدم خائص عنصر الصف في فلاتر؟

إليكم تطبيقا بسيطا لاستخدام خصائص عنصر الصف في ويدجيت الصف في فلاتر Flutter:

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

إنشاء عنصر الصف (Row): ضمن شجرة الويدجتات الخاصة بتطبيقك، قم بإنشاء عنصر الصف (Row) وقم بتضمين العناصر التي قمت بإنشائها في الخطوة الأولى كأطفال لعنصر الصف.

تحديد الخصائص: استخدم الخصائص المناسبة لتكوين تصميم الصف حسب احتياجاتك.

يمكنك تحديد الـ mainAxisAlignment لتحديد كيفية توزيع العناصر على طول المحور الرئيسي، وتحديد crossAxisAlignment لتحديد كيفية توزيع العناصر على طول المحور الثانوي،
وهكذا.

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

هاكم مثالا بسيطا يوضح كيفية استخدام خصائص عنصر الصف في فلاتر 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('Flutter Row Example'),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
width: 50,
height: 50,
color: Colors.red,
),
Container(
width: 50,
height: 50,
color: Colors.green,
),
Container(
width: 50,
height: 50,
color: Colors.blue,
),
],
),
),
),
);
}
}

هذا المثال يقوم بعرض صف أفقي يحتوي على ثلاثة حاويات بألوان مختلفة وموزعة بالتساوي.

شرح الكود:

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

import 'package:flutter/material.dart';:

يقوم بإدراج مكتبة Flutter التي تحتوي على المكونات والأدوات اللازمة لبناء التطبيقات.

void main() {:

تبدأ نقطة البداية لتطبيق Flutter. في هذه الحالة، يتم استدعاء دالة

يقوم بتشغيل التطبيق بواسطة ويدجت MyApp، والذي هو عادةً يمثل واجهة المستخدم الرئيسية للتطبيق.

class MyApp extends StatelessWidget {:

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

@override

تستخدم للتأكيد على أنه تم إعادة تعريف الدالة build() من الويدجت الأصلية (StatelessWidget).

Widget build(BuildContext context) {

يقوم ببناء وتقديم واجهة المستخدم الرسومية للتطبيق. يتم استدعاء هذه الدالة تلقائيًا عندما يتغير حالة الويدجت.

return MaterialApp(

يقوم بإنشاء وتهيئة تطبيق Flutter الرئيسي باستخدام مكونات Material Design.

home: Scaffold(

يقوم بتعريف جسم التطبيق الرئيسي الذي يحتوي على الهيكل الأساسي للصفحة، بما في ذلك شريط التطبيق والمحتوى.

appBar: AppBar(

يقوم بإضافة شريط عنوان إلى الصفحة.

title: Text('Flutter Row Example'),

يعرض عنوانًا لشريط التطبيق.

body: Center(

يقوم بوضع العناصر في وسط الشاشة.

child: Row(

يبدأ في تحديد عنصر الصف (Row)، والذي يتيح لنا ترتيب العناصر أفقيًا.

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

يحدد كيفية توزيع العناصر في الصف بالتساوي على طول المحور الرئيسي.

children: [ Container(...), Container(...), Container(...), ],

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

]);

يُغلق عنصر الصف.

]));

يُغلق Scaffold.

}); 

يُغلق MyApp.

}

يُغلق الدالة main.

هذا التطبيق يوفر نموذج بسيط لاستخدام وتخصيص عنصر الصف (Row) في Flutter.

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

قمنا بنسخ الكود وتشغيله عل مفسر فلاتر اونلاين فكانت النتيجة :

تطبيق 2:  عن كيفية استخدام كل خصائص عنصر الصف في فلاتر

في خطوات مرتبة سنقوم بإنشاء تطبيق Flutter يوضح كيفية استخدام كل خصائص عنصر الصف (Row) بشكل شامل.

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

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

الخطوة 2: تعديل الملف lib/main.dart

نقم بتعديل الملف lib/main.dart ليحتوي على التطبيق الذي سنقوم بإنشائه. استبدل الكود الحالي بالكود التالي:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: RowPropertiesDemo(),
);
}
}

class RowPropertiesDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Row Properties Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
textDirection: TextDirection.ltr,
verticalDirection: VerticalDirection.down,
textBaseline: TextBaseline.alphabetic,
children: [
Container(
width: 50,
height: 50,
color: Colors.red,
),
Container(
width: 100,
height: 100,
color: Colors.green,
),
Container(
width: 150,
height: 150,
color: Colors.blue,
),
],
),
],
),
),
);
}
}

الخطوة 3: تحليل الكود
نقوم بتعريف التطبيق الرئيسي MyApp وتعيين RowPropertiesDemo كشاشة البداية.
في RowPropertiesDemo، نقوم بتعريف واجهة المستخدم باستخدام Scaffold و AppBar.
يتم تعريف Row داخل الـ Center في body، ونستخدم جميع الخصائص الخاصة بعنصر الصف في هذا الـ Row، مثل
mainAxisAlignment، crossAxisAlignment، mainAxisSize، textDirection،
verticalDirection، و textBaseline.
داخل الـ Row، نقوم بإنشاء ثلاثة Container بأحجام مختلفة وألوان مختلفة.

الخطوة 4: تشغيل التطبيق

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

قمنا بنسخ الكود ثم تشغيله على مفسر فلاتر أون لاين فكانت النتيجة:

هذه الخطوات تمثل كيفية استخدام كل خصائص عنصر الصف (Row) في فلاتر Flutter. يمكنك تعديل القيم للخصائص واختبار تأثيراتها على تنسيق العناصر داخل الصف.

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

MyApp
└── MaterialApp
└── Scaffold
└── AppBar
└── MyRowWidget
└── Container
└── Row
├── Container
├── Container
└── Container
MyApp: هو واجهة التطبيق الرئيسية.

MaterialApp: واجهة التطبيق التي تعرض المواد التي تستخدمها التطبيقات بشكل موحّد مع تصميم مادي.

Scaffold: يوفر هيكلًا للتطبيق، بما في ذلك AppBar والجسم والعديد من الأشياء الأخرى.

AppBar: يعرض شريط العنوان في الجزء العلوي من واجهة المستخدم.

MyRowWidget: هو واجهة المستخدم التي نقوم بإنشائها لاستخدام عنصر الصف (Row).

Container: ويدجت تُستخدم لتخطيط وتنسيق وتزيين عناصر الواجهة.

Row: ويدجت يستخدم لترتيب العناصر أفقيًا.

Container (1): حاوية داخل عنصر الصف (Row)، يحتوي على نص ‘1’ ويتوسطه.

Container (2): حاوية داخل عنصر الصف (Row)، يحتوي على نص ‘2’ ويتوسطه.

Container (3): حاوية داخل عنصر الصف (Row)، يحتوي على نص ‘3’ ويتوسطه.

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

تطبيق 3: عن استخدام خصائص عنصر الصف في فلاتر مع الشرح

 سنقوم بإنشاء تطبيق يستخدم عنصر الصف (Row) مع بعض الخصائص الأخرى المختلفة عما سبق، وسيتضمن التطبيق صورًا بدلاً من الحاويات.
سنستخدم خصائص مثل mainAxisAlignment، crossAxisAlignment، و textDirection لتوضيح الفكرة
بشكل أفضل.

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('Row Properties Example'),
),
body: Center(
child: MyRowWidget(),
),
),
);
}
}

class MyRowWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
textDirection: TextDirection.rtl,
children: [
CircleAvatar(
radius: 50,
backgroundImage: AssetImage('assets/image1.jpg'),
),
CircleAvatar(
radius: 70,
backgroundImage: AssetImage('assets/image2.jpg'),
),
CircleAvatar(
radius: 90,
backgroundImage: AssetImage('assets/image3.jpg'),
),
],
);
}
}

في هذا التطبيق، قمنا بتحميل صور من ملفات الصور في المشروع (image1.jpg, image2.jpg, و image3.jpg)
باستخدام AssetImage. ثم قمنا بعرض هذه الصور في عنصر الصف (Row).

 شرح لكل ويدجت في التطبيق:

MyApp: واجهة التطبيق الرئيسية.

MaterialApp: واجهة التطبيق التي تعرض المواد التي تستخدمها التطبيقات بشكل موحّد مع تصميم مادي.

Scaffold: يوفر هيكلًا للتطبيق، بما في ذلك AppBar والجسم والعديد من الأشياء الأخرى.

AppBar: يعرض شريط العنوان في الجزء العلوي من واجهة المستخدم.

MyRowWidget: واجهة المستخدم التي نقوم بإنشائها لعرض عنصر الصف (Row).

Row: ويدجت يستخدم لترتيب العناصر أفقيًا.

CircleAvatar: ويدجت يعرض صورة دائرية.

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

استيراد المكتبات اللازمة:

import 'package:flutter/material.dart';

هذا السطر يستورد المكتبات اللازمة لتطوير تطبيق Flutter، بما في ذلك مكتبة المواد (Material).

نقطة البداية للتطبيق:

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

يعد هذا السطر نقطة البداية للتطبيق، حيث يتم استدعاء runApp() مع واجهة المستخدم الجذرية للتطبيق.

تعريف واجهة التطبيق الرئيسية:

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Row Properties Example'),
),
body: Center(
child: MyRowWidget(),
),
),
);
}
}

تعريف واجهة التطبيق الرئيسية MyApp، والتي ترث من StatelessWidget. يتم استخدام MaterialApp لتحديد العناصر
المادية في التطبيق. تستخدم Scaffold لتوفير هيكل الصفحة بما في ذلك شريط العنوان والجسم.

تعريف واجهة المستخدم التي تستخدم عنصر الصف (Row):

class MyRowWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
textDirection: TextDirection.rtl,
children: [
CircleAvatar(
radius: 50,
backgroundImage: AssetImage('assets/image1.jpg'),
),
CircleAvatar(
radius: 70,
backgroundImage: AssetImage('assets/image2.jpg'),
),
CircleAvatar(
radius: 90,
backgroundImage: AssetImage('assets/image3.jpg'),
),
],
);
}
}

تعريف واجهة المستخدم MyRowWidget التي تستخدم عنصر الصف (Row) لعرض الصور. يتم تحديد خصائص عنصر الصف مثل توزيع المحاور، واتجاه النص، وغيرها. يتم استخدام CircleAvatar لعرض الصور بشكل دائري.

تنفيذ التطبيق:

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

هذا السطر يقوم بتنفيذ التطبيق عن طريق استدعاء runApp() مع واجهة التطبيق الجذرية MyApp.

اختبار على خصائص عنصر (ويدجيت الصف) في فلاتر

إليك بعض الأسئلة التي يمكن استخدامها كاختبار لفهم درس استخدام عنصر الصف (Row) في Flutter:

1-ما هو دور عنصر الصف (Row) في Flutter؟

أ: يستخدم لترتيب العناصر عموديًا.
ب: يستخدم لترتيب العناصر أفقيًا.
ج: يستخدم لترتيب العناصر في شكل شبكة.

2-ما هي وظيفة خاصية mainAxisAlignment في عنصر الصف (Row)؟

أ: تحدد كيفية توزيع العناصر عموديًا.
ب: تحدد كيفية توزيع العناصر أفقيًا.
ج: تحدد موقع العناصر على طول المحور الرئيسي.

3-كيف يمكن تحديد اتجاه النص داخل عنصر الصف (Row)؟

أ: عبر خاصية crossAxisAlignment.
ب: عبر خاصية textDirection.
ج: عبر خاصية verticalDirection.

4-ما هي وظيفة CrossAxisAlignment في عنصر الصف (Row)؟

أ: تحدد موقع العناصر على طول المحور الرئيسي.
ب: تحدد كيفية توزيع العناصر عموديًا.
ج: تحدد كيفية توزيع العناصر أفقيًا.

5-ما هي الخاصية التي تُستخدم لتحديد توزيع العناصر في عنصر الصف (Row)؟

أ: distribution
ب: spacing
ج: mainAxisAlignment

6-كيف يتم تحديد اتجاه النص في عنصر الصف (Row)؟

أ: باستخدام خاصية textDirection.
ب: باستخدام خاصية mainAxisAlignment.
ج: باستخدام خاصية verticalDirection.

7-ما هو الويدجت المستخدم لعرض الصور بشكل دائري في Flutter؟

أ: Image
ب: CircleAvatar
ج: Avatar

إجابات:

ب: يستخدم لترتيب العناصر أفقيًا.
ج: تحدد موقع العناصر على طول المحور الرئيسي.
ب: عبر خاصية textDirection.
ج: تحدد كيفية توزيع العناصر أفقيًا.
ج: mainAxisAlignment
أ: باستخدام خاصية textDirection.
ب: CircleAvatar

ما هو الخاصية التي تحدد كيفية توزيع العناصر عمودياً في عنصر الصف (Row)؟

أ: mainAxisAlignment
ب: crossAxisAlignment
ج: verticalDirection

8-ما هي وظيفة textBaseline في عنصر الصف (Row)؟

أ: تحديد اتجاه النص داخل العناصر.
ب: تحديد المحور الرئيسي للعناصر.
ج: تحديد أساس النص لتحديد الارتفاعات.

9-ما هو التأثير الذي يحدث عند تعيين mainAxisSize إلى MainAxisSize.min؟

أ: يجعل الـ Row يأخذ مساحة العرض المطلوبة للعناصر فقط.
ب: يجعل الـ Row يأخذ أكبر مساحة ممكنة للعرض.
ج: لا تؤثر على حجم الـ Row.

10- ما هو التأثير الذي يحدث عند تعيين verticalDirection إلى VerticalDirection.up؟

أ: يتغير اتجاه ترتيب العناصر عموديًا من الأعلى إلى الأسفل.
ب: يتغير اتجاه ترتيب العناصر عموديًا من الأسفل إلى الأعلى.
ج: لا تؤثر على اتجاه ترتيب العناصر عموديًا.

11- ما الخاصية التي يمكن استخدامها لتغيير اتجاه العناصر في عنصر الصف (Row) من اليمين إلى اليسار؟

أ: crossAxisAlignment
ب: textDirection
ج: mainAxisAlignment
إجابات:
8. ب: crossAxisAlignment

ج: تحديد أساس النص لتحديد الارتفاعات.
أ: يجعل الـ Row يأخذ مساحة العرض المطلوبة للعناصر فقط.
ب: يتغير اتجاه ترتيب العناصر عموديًا من الأسفل إلى الأعلى.
ب: textDirection