عنصر الصف في فلاتر Flutter Row widget
Flutter widget Row
مقدمة
درسنا هذا حول استخدام عنصر Row في تطوير تطبيقات Flutter. عنصر Row هو أحد العناصر الأساسية في تصميم واجهات المستخدم في Flutter، حيث يسمح لك بتنظيم العناصر بشكل أفقي في صف واحد. يوفر عنصر Row مجموعة من الخصائص التي تمكنك من تخصيص ترتيب وتوزيع العناصر بشكل مرن وفقًا لاحتياجات تطبيقك.
في هذا الدرس، سنقوم بفحص خصائص عنصر Row وكيفية استخدامها بشكل فعال في تطوير تطبيقات Flutter. سنتعرف على خصائص مثل mainAxisAlignment و crossAxisAlignment و mainAxisSize وغيرها، وسنقدم أمثلة تطبيقية توضح كيفية تخصيص وتنظيم واجهات المستخدم باستخدام هذا العنصر.
في نهاية هذا الدرس، ستكون قادرًا على استخدام عنصر Row بثقة لتنظيم عناصر واجهة المستخدم بشكل أفقي وفقًا لاحتياجات تطبيقاتك.
هيا بنا نبدأ في استكشاف عنصر Row واكتشاف قدراته الرائعة في تطوير تطبيقات Flutter!
عنصر الصف ( ودجت الصف ) في فلاتر
Flutter Row widget هو عنصر واجهة مستخدم يُستخدم في ترتيب عناصر واجهة المستخدم أفقيًا، يمثل هذا العنصر صفًا أفقيًا يحتوي على عدة عناصر فرعية تُرتب جنبًا إلى جنب. يمكن استخدامه لتنظيم العناصر المتعددة داخل الواجهة بطريقة تسمح بعرضها بشكل متساوٍ أفقيًا. يعتبر استخدام الـ Row widget من الطرق الشائعة لتنظيم عناصر واجهة المستخدم في Flutter عندما يكون الهدف تنظيم العناصر أفقيًا. يمكن للـ Row widget أيضًا التعامل مع توسيط العناصر، وتحديد المسافات بين العناصر، وتحديد كيفية توزيع العناصر داخل المساحة المتاحة.
خطوة بخطوة كيف ننشيء Flutter Row widget
لإنشاء عنصر Flutter Row widget بشكلٍ خطوة بخطوة، يمكن اتباع الخطوات التالية:
استورد مكتبة Flutter:
قم بإضافة استيراد لمكتبة Flutter في ملف الكود الخاص بك. يمكنك فعل ذلك عن طريق إضافة السطر التالي إلى أعلى ملف الكود:
import 'package:flutter/material.dart';
أنشئ العناصر التي تريد تضمينها في صف الـ Row:
نقم بإنشاء العناصر التي نرغب في وضعها ضمن الصف الأفقي. يمكننا استخدام أي عناصر واجهة مستخدم Flutter مثل النصوص، الصور، أو حتى عناصر أخرى مثل الأزرار.
استخدم عنصر الـ Row:
ضع العناصر التي أنشأتها في الخطوة السابقة ضمن عنصر الـ Row. يتم ذلك عن طريق وضعها داخل كائن Row كما يلي:
Row( children: [ // أضف هنا العناصر التي ترغب في وضعها في الصف الأفقي ], )
تخصيص خصائص الـ Row:
يمكننا تخصيص الصف الأفقي حسب الحاجة، مثل توسيط العناصر، تحديد المسافات بينها، أو تحديد كيفية توزيعها داخل المساحة المتاحة. يمكننا القيام بذلك باستخدام الخصائص المتاحة في عنصر الـ Row مثل mainAxisAlignment, crossAxisAlignment, وغيرها.
باستخدام هذه الخطوات، يمكنك إنشاء عنصر Flutter Row widget بسهولة وتخصيصه وفقًا لاحتياجات واجهة المستخدم الخاصة بنا.
مثال شامل مع الشرح عن Flutter Row widget
طبقًا للخطوات السابقة، سنقوم الآن بإنشاء مثال شامل يستخدم Flutter Row widget لعرض عناصر واجهة مستخدم بشكل أفقي. سنقوم بإنشاء تطبيق بسيط يحتوي على صف أفقي يحتوي على عدة أزرار.
نقم بإنشاء ملف جديد بإسم row_example.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('Flutter Row Widget Example'),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: () {},
child: Text('Button 1'),
),
ElevatedButton(
onPressed: () {},
child: Text('Button 2'),
),
ElevatedButton(
onPressed: () {},
child: Text('Button 3'),
),
],
),
),
),
);
}
}
في هذا المثال، قمنا بإنشاء تطبيق بسيط يحتوي على Scaffold مع AppBar وجسم الصفحة.
في جسم الصفحة، استخدمنا Row widget لتنظيم الأزرار أفقيًا.
mainAxisAlignment: MainAxisAlignment.spaceEvenly:
يُستخدم هذا الخاصية لتوزيع العناصر داخل الصف الأفقي بشكل متساوٍ، مما يجعل المسافات بينها متساوية.
children: هذه الخاصية تحتوي على قائمة من العناصر الفرعية التي سيتم عرضها ضمن الصف الأفقي.
في هذا المثال، استخدمنا ElevatedButton كعنصر فرعي.
عند تشغيل التطبيق، سترى ثلاثة أزرار مُرتبة أفقيًا في وسط الشاشة بناءً على توزيع المسافات بشكل متساوٍ.
هذا يوضح كيفية استخدام Flutter Row widget لترتيب العناصر أفقيًا في واجهة المستخدم.
شرح الكود :
استيراد مكتبة Flutter المسؤولة عن تقديم واجهات المستخدم.
في هذا السطر، نستورد المكتبات التي نحتاجها لبناء التطبيق. في هذا المثال، نستورد material.dart الذي يحتوي على مكونات واجهة المستخدم الموادية في Flutter.
import 'package:flutter/material.dart';:
نقوم بتعريف دالة main التي تعد نقطة بداية تطبيق Flutter.
Main Function (الدالة الرئيسية):
هذه الدالة هي النقطة التي يبدأ التطبيق فيها حيث نقوم بتشغيل التطبيق عبر تمرير كائن MyApp لدالة runApp().
تقوم بتشغيل التطبيق عن طريق استدعاء دالة runApp وتمريرها إلى عنصر واجهة المستخدم الجذري MyApp.
void main() { runApp(MyApp()); }:إنشأنا فئة :
MyApp Class (صنف التطبيق):
هذا الصنف هو جزء أساسي من التطبيق. يرث من StatelessWidget ويقوم بإعادة بناء واجهة التطبيق. في هذا المثال، نقوم بإرجاع MaterialApp.
حيث هذا السطر يعرف فئة MyApp التي تمثل تطبيق Flutter. تستمد هذه الفئة من StatelessWidget مما يعني أنها لا تحتوي على حالة قابلة للتغيير.
class MyApp extends StatelessWidget {:هذا السطر نعرف دالة build التي تُعيد عنصر واجهة المستخدم الذي يجب تقديمه للتطبيق.
@override Widget build(BuildContext context) {:في هذا السطر، نقوم بإنشاء واجهة تطبيق MaterialApp التي تحتوي على سمة مظهر المواد الجاهزة للاستخدام.
return MaterialApp( ... );:
نحدد عنصر Scaffold كجسم رئيسي للتطبيق، والذي يحتوي على AppBar وجسم الصفحة.
home: Scaffold( ... ),:
في هذا السطر، نحدد شريط التطبيق العلوي AppBar ونعطيه عنوانًا باستخدام عنصر النص Text.
appBar: AppBar( ... ),:
في هذا السطر، نعرف جسم الصفحة ونقوم بتحديد موقع عناصره بوساطة عنصر Center.
body: Center( ... ),:
نعرف عنصر Row الذي يستخدم لترتيب العناصر أفقيًا.
child: Row( ... ),:
يحدد كيفية توزيع العناصر داخل الصف الأفقي، حيث تُوزع بشكل متساوٍ.
mainAxisAlignment: MainAxisAlignment.spaceEvenly,:
هنا، نضيف العناصر التي ستكون في الصف الأفقي. في هذا المثال، أضفنا ثلاثة أزرار.
children: [ ... ],:
ينشئ زرًا مرتفعًا يستجيب للنقرات.
ElevatedButton( ... ),:
تحديد الإجراء الذي يتم تنفيذه عند النقر على الزر، في هذه الحالة، لا يوجد أي إجراء محدد.
onPressed: () {},:لعرض نصًا داخل الزر.
child: Text('Button 1'),:انتهاء عنصر Row.
);:
انتهاء عنصر Center.
),:
انتهاء عنصر Scaffold.
),:
انتهاء عنصر MaterialApp.
),:
انتهاء دالة build.
),:
انتهاء تعريف فئة MyApp.
} // end of MyApp class.:
شجرة التطبيق مع الشرح
ترتيب العناصر في Flutter على أنها “شجرة واجهة المستخدم”، حيث يُمكن تصور التطبيق كشجرة تحتوي على فروع وأوراق.
هنا سنقوم بتحليل الشجرة للتطبيق السابق، خطًا بخط.
Import Statements (البيانات المستوردة):
في هذا السطر، نستورد المكتبات التي نحتاجها لبناء التطبيق. في هذا المثال، نستورد material.dart الذي يحتوي على مكونات واجهة المستخدم الموادية في Flutter.
import 'package:flutter/material.dart';
Main Function (الدالة الرئيسية):
هذه الدالة هي النقطة التي يبدأ التطبيق فيها. نقوم بتشغيل التطبيق عبر تمرير كائن MyApp لدالة runApp().
void main() {
runApp(MyApp());
}
MyApp Class (صنف التطبيق):
هذا الصنف هو جزء أساسي من التطبيق. يرث من StatelessWidget ويقوم بإعادة بناء واجهة التطبيق. في هذا المثال، نقوم بإرجاع MaterialApp.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// يُعرض Scaffold كواجهة المستخدم الأساسية للتطبيق
);
}
}
MaterialApp (مادة التطبيق):
هذا هو واحد من أهم مكونات التطبيق. يوفر MaterialApp بنية أساسية لتطبيق Flutter، بما في ذلك العديد من الإعدادات الافتراضية. في هذا المثال، نحدد الـ Scaffold كواجهة مستخدم الأساسية.
MaterialApp( home: Scaffold( // يُعرض AppBar و Body ), );
Scaffold (السقالة):
Scaffold هو عبارة عن واجهة مستخدم تقدم هيكلًا للتطبيق. يشمل AppBar و Body والعديد من الميزات الأخرى.
في هذا المثال، نحدد AppBar و Body.
Scaffold(
appBar: AppBar(
title: Text('Flutter Row Widget Example'), // عنوان الشريط العلوي
),
body: Center(
// يُعرض Row كجسم الصفحة
),
);
AppBar (شريط العنوان):
AppBar يعرض شريط العنوان في الجزء العلوي من واجهة المستخدم. في هذا المثال، نحدد عنوانًا لشريط العنوان.
AppBar(
title: Text('Flutter Row Widget Example'), // عنوان الشريط العلوي
),
Body (الجسم):
Body يمثل جسم الصفحة في Scaffold، حيث يتم عرض المحتوى الرئيسي للتطبيق. في هذا المثال، نحدد عنصر Row كجسم الصفحة.
body: Center( // يُعرض Row كجسم الصفحة ),
Center (التوسيط):
يستخدم Center لوضع العنصر الفرعي (في هذا الحالة، Row) في وسط الجسم. يساعد هذا في توسيط العنصر الفرعي أفقيًا ورأسيًا.
Center( child: Row( // يتم عرض الأزرار داخل الصف الأفقي ), ),
Row (الصف الأفقي):
Row هو عنصر واجهة المستخدم الذي يتيح لنا ترتيب العناصر أفقيًا.
في هذا المثال، نقوم بوضع عدة أزرار داخل الصف الأفقي.
Row( children: [ // يتم وضع الأزرار هنا ], ),
ElevatedButton (الزر المرتفع):
هذا هو عنصر الزر المرتفع الذي يعمل كعنصر فرعي داخل الصف الأفقي.
في هذا المثال، نقوم بإنشاء زر لكل عنصر في الصف الأفقي.
ElevatedButton(
onPressed: () {}, // يُنفذ عند الضغط على الزر
child: Text('Button 1'), // نص الزر
),
تكرر هذا الكود لكل زر في الصف الأفقي.
كود الازرار الثلاثة كاملا هنا
Row(
children: [
ElevatedButton(
onPressed: () {}, // الدالة التي ستُستدعى عند الضغط على الزر
child: Text('Button 1'), // نص الزر
),
ElevatedButton(
onPressed: () {}, // الدالة التي ستُستدعى عند الضغط على الزر
child: Text('Button 2'), // نص الزر
),
ElevatedButton(
onPressed: () {}, // الدالة التي ستُستدعى عند الضغط على الزر
child: Text('Button 3'), // نص الزر
),
],
),
في هذا الجزء، نحن داخل عنصر Row، ونضيف عدة أزرار كأطفال له. كل زر هو ElevatedButton، والذي يأتي مع مكونات المواد في Flutter. يتم تحديد ما يحدث عند الضغط على الزر باستخدام onPressed، حيث يُنفذ المصفوفة فارغة حاليًا {}، ويُمكن استبدالها بالأمر الذي ترغب في تنفيذه عند الضغط.
تشغيل التطبيق:
قمنا بنسخ الكوج وتجربته على موقع مفسر فلاتر اون لاين فكانت النتيجة:
خصائص properties of Flutter Row widget
تمثل خصائص عنصر Flutter Row widget العديد من الخيارات التي يمكنك استخدامها لتخصيص ترتيب وعرض العناصر داخل الصف الأفقي. إليك بعض الخصائص الهامة:
mainAxisAlignment (توجيه العناصر الرئيسية):
هذه الخاصية تحدد كيفية توزيع العناصر الفرعية داخل الصف الأفقي.
يمكن أن تكون القيم مثل start (البداية)، end (النهاية)، center (الوسط)، spaceBetween (التباعد بين العناصر)، spaceEvenly (التباعد المتساوي) وغيرها.
crossAxisAlignment (توجيه العناصر العرضية):
هذه الخاصية تحدد كيفية توزيع العناصر في الاتجاه العرضي.
يمكن أن تكون القيم مثل start (البداية)، end (النهاية)، center (الوسط)، stretch (التمدد لملء الفراغ) وغيرها.
mainAxisSize (حجم العناصر الرئيسية):
هذه الخاصية تحدد كيفية تكيف حجم الصف الأفقي مع حجم العناصر الرئيسية في الاتجاه الأفقي.
يمكن أن تكون القيم مثل mainAxisSize.min (الحجم الأدنى للعناصر الرئيسية) و mainAxisSize.max (الحجم الأقصى للعناصر الرئيسية).
textDirection (اتجاه النص):
هذه الخاصية تحدد اتجاه النص داخل الصف الأفقي، وتؤثر على اتجاه ترتيب النصوص والأيقونات داخل العناصر.
verticalDirection (اتجاه عمودي):
تحدد هذه الخاصية اتجاه ترتيب العناصر الرأسية داخل الصف الأفقي، مثل VerticalDirection.down و VerticalDirection.up.
textBaseline (خط النص):
تحدد هذه الخاصية خط النص الذي يستخدم لتحديد مواضع العناصر النصية داخل الصف الأفقي.
هذه الخصائص تمنحنا مرونة كبيرة في تخصيص تصميم واجهة المستخدم باستخدام عنصر Flutter Row widget، مما يتيح لنا تنظيم العناصر بالطريقة التي تناسب تطبيقك بشكل أفضل.
مثال تطبيقي على خصائص Flutter row widget
طبقًا لطلبك، سأقدم مثالًا تطبيقيًا خطوة بخطوة يستخدم خصائص عنصر Flutter Row widget لعرض عناصر واجهة المستخدم بشكل أفقي. سنقوم بإنشاء تطبيق بسيط يحتوي على صف أفقي يحتوي على عناصر نصية متعددة، وسنقوم بتخصيص ترتيبها باستخدام خصائص Row.
خطوات الإنشاء:
خطوة 1:نقم بإنشاء ملف جديد بإسم row_example.dart.
خطوة 2 :ن قم بإضافة الاستيرادات الضرورية:
import 'package:flutter/material.dart';
خطوة 3 :قم بإنشاء الدالة الرئيسية main():
void main() {
runApp(MyApp());
}
خطوة 4: نقم بإنشاء صنف MyApp الذي يرث من StatelessWidget:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Row Widget Example'),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('First', style: TextStyle(fontSize: 20)),
Text('Second', style: TextStyle(fontSize: 20)),
Text('Third', style: TextStyle(fontSize: 20)),
],
),
),
);
}
}
في هذا المثال، قمنا بإنشاء تطبيق يحتوي على Scaffold بعنوان “Flutter Row Widget Example”.
وفي الجسم، استخدمنا عنصر Row لترتيب عناصر النص أفقيًا. وقمنا بتخصيص توزيع العناصر باستخدام mainAxisAlignment، حيث قمنا بتعيينه إلى spaceEvenly لتوزيع العناصر بالتساوي.
هذا المثال يوضح كيفية استخدام عنصر Row لتنظيم عناصر واجهة المستخدم أفقيًا، مع تخصيص ترتيبها باستخدام خصائص Row.
الكود النهائي
ها هو الكود النهائي للتطبيق الذي يستخدم عنصر Flutter Row widget مع تخصيص خصائصه:
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 Widget Example'),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('First', style: TextStyle(fontSize: 20)),
Text('Second', style: TextStyle(fontSize: 20)),
Text('Third', style: TextStyle(fontSize: 20)),
],
),
),
);
}
}
هذا التطبيق يقوم بإنشاء واجهة مستخدم بسيطة تحتوي على Scaffold مع AppBar يحمل عنوان “Flutter Row Widget Example”. وفي الجسم، يتم استخدام عنصر Row لترتيب ثلاثة عناصر نصية أفقيًا بتوزيع متساوٍ.
تشغيل التطبيق:
قمنا بنسخ الكود النهائي وتجربته على مفسر فلاتر اون لاين فكانت النتيجة:
شجرة التطبيق
MyApp
└─ MaterialApp
└─ Scaffold
├─ AppBar
│ └─ Text
└─ Row
├─ Text ('First')
├─ Text ('Second')
└─ Text ('Third')MyApp: هو الصنف الرئيسي للتطبيق ويُعرض عند تشغيل التطبيق.
MaterialApp: يوفر بنية المادة للتطبيق مع العديد من الإعدادات الافتراضية.
Scaffold: يقدم هيكلًا لواجهة المستخدم بما في ذلك AppBar و Body.
AppBar: يُعرض في الجزء العلوي من واجهة المستخدم، ويحتوي على عنوان “Flutter Row Widget Example”.
Row: يستخدم لترتيب العناصر أفقيًا.
Text (‘First’): عنصر نصي يعرض النص “First”.
Text (‘Second’): عنصر نصي يعرض النص “Second”.
Text (‘Third’): عنصر نصي يعرض النص “Third”.
تلك هي شجرة التطبيق التي توضح كيفية تنظيم وترتيب عناصر التطبيق بشكل هرمي.
تطبيق اخر خطوة بخوة على خصائص Row widget
بالطبع، سنقوم بإنشاء مثال آخر يستخدم عنصر Row widget مع تخصيص خصائصه. في هذا المثال، سنقوم بإنشاء صف أفقي يحتوي على عناصر صورة ونص.
ها هو الكود الذي يُظهر كيفية استخدام خصائص عنصر Row widget:
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 Widget Example'),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Icon(Icons.access_alarm, size: 50),
Text('Alarm', style: TextStyle(fontSize: 20)),
],
),
Column(
children: [
Icon(Icons.mail, size: 50),
Text('Mail', style: TextStyle(fontSize: 20)),
],
),
Column(
children: [
Icon(Icons.phone, size: 50),
Text('Phone', style: TextStyle(fontSize: 20)),
],
),
],
),
),
),
);
}
}
في هذا المثال، نقوم بعرض صورة مصغرة (أيقونة) مع نص مرتبة بشكل أفقي باستخدام عنصر Row. قمنا أيضًا بتخصيص موقع العناصر داخل الصف الأفقي باستخدام MainAxisAlignment.spaceEvenly، وهو يقوم بتوزيع العناصر بالتساوي داخل الصف.
يحتوي الصف على ثلاثة عناصر من الأعمدة، كل عمود يحتوي على أيقونة ونص. تم تنظيمها في الصف الأفقي باستخدام عنصر Row وتوزيع المسافات بالتساوي بين العناصر باستخدام MainAxisAlignment.spaceEvenly.
اختبار على عنصر الصف في فلاتر Flutter widget Row
سنقوم بإنشاء كويز قصير يختبر فهمنا لخصائص عنصر Row widget وكيفية استخدامها في تطوير تطبيقات Flutter.
سؤال 1: ما هي وظيفة عنصر Row في تطبيقات Flutter؟
أ) عرض عناصر واجهة المستخدم بشكل عمودي
ب) عرض عناصر واجهة المستخدم بشكل أفقي
ج) عرض الصفحات المتعددة في التطبيق
د) عرض القوائم العمودية
سؤال 2: ما هي الخاصية التي تحدد كيفية توزيع العناصر داخل الصف الأفقي في عنصر Row؟
أ) crossAxisAlignment
ب) mainAxisAlignment
ج) mainAxisSize
د) textDirection
سؤال 3: ما الخاصية التي تحدد كيفية توزيع المسافات بين العناصر داخل الصف الأفقي في عنصر Row؟
أ) crossAxisAlignment
ب) mainAxisAlignment
ج) mainAxisSize
د) textDirection
الإجابات الصحيحة:
سؤال 1: ب) عرض عناصر واجهة المستخدم بشكل أفقي
سؤال 2: ب) mainAxisAlignment
سؤال 3: ب) mainAxisAlignment
شرح:
سؤال 1: يستخدم عنصر Row في تطبيقات Flutter لعرض عناصر واجهة المستخدم بشكل أفقي.
سؤال 2: الخاصية التي تحدد كيفية توزيع العناصر داخل الصف الأفقي هي MainAxisAlignment.
سؤال 3: الخاصية التي تحدد كيفية توزيع المسافات بين العناصر داخل الصف الأفقي هي MainAxisAlignment.
سؤال 4: ما هي الخاصية التي تحدد كيفية توزيع العناصر الرئيسية داخل الصف الأفقي في عنصر Row؟
أ) crossAxisAlignment
ب) mainAxisAlignment
ج) mainAxisSize
د) textDirection
سؤال 5: ما هي القيمة التي يمكن تعيينها لخاصية mainAxisAlignment لتوزيع العناصر بالتساوي داخل الصف الأفقي في عنصر Row؟
أ) MainAxisAlignment.start
ب) MainAxisAlignment.spaceEvenly
ج) MainAxisAlignment.end
د) MainAxisAlignment.spaceBetween
سؤال 6: ما الخاصية التي تحدد كيفية توزيع المسافات بين العناصر داخل الصف الأفقي في عنصر Row بالنسبة للاتجاه الرأسي؟
أ) crossAxisAlignment
ب) mainAxisAlignment
ج) mainAxisSize
د) verticalDirection
سؤال 7: كيف يمكن استخدام عنصر Row في تنظيم عناصر واجهة المستخدم بشكل عمودي؟
أ) بتحديد crossAxisAlignment إلى CrossAxisAlignment.start
ب) بتحديد mainAxisAlignment إلى MainAxisAlignment.center
ج) بتحديد crossAxisAlignment إلى CrossAxisAlignment.center
د) بتحديد mainAxisSize إلى MainAxisSize.max
الإجابات الصحيحة:
سؤال 4: ب) mainAxisAlignment
سؤال 5: ب) MainAxisAlignment.spaceEvenly
سؤال 6: د) verticalDirection
سؤال 7: أ) بتحديد crossAxisAlignment إلى CrossAxisAlignment.start
شرح:
سؤال 4: الخاصية التي تحدد كيفية توزيع العناصر الرئيسية داخل الصف الأفقي هي MainAxisAlignment.
سؤال 5: القيمة التي يمكن تعيينها لخاصية mainAxisAlignment لتوزيع العناصر بالتساوي داخل الصف الأفقي في عنصر Row هي MainAxisAlignment.spaceEvenly.
سؤال 6: الخاصية التي تحدد كيفية توزيع المسافات بين العناصر داخل الصف الأفقي في عنصر Row بالنسبة للاتجاه الرأسي هي verticalDirection.
سؤال 7: يمكن استخدام عنصر Row في تنظيم عناصر واجهة المستخدم بشكل عمودي بتحديد crossAxisAlignment إلى CrossAxisAlignment.start.
سؤال 8: ما الخاصية التي تحدد كيفية توزيع العناصر العرضية داخل الصف الأفقي في عنصر Row؟
أ) crossAxisAlignment
ب) mainAxisAlignment
ج) mainAxisSize
د) textBaseline
سؤال 9: ما القيمة التي يمكن تعيينها لخاصية crossAxisAlignment لتوزيع العناصر بشكل مركزي داخل الصف الأفقي في عنصر Row؟
أ) CrossAxisAlignment.start
ب) CrossAxisAlignment.center
ج) CrossAxisAlignment.end
د) CrossAxisAlignment.stretch
سؤال 10: ما الخاصية التي تحدد اتجاه ترتيب العناصر الرأسية داخل الصف الأفقي في عنصر Row؟
أ) textDirection
ب) verticalDirection
ج) mainAxisAlignment
د) mainAxisSize
سؤال 11: كيف يمكن استخدام عنصر Row لتوزيع العناصر بشكل متساوٍ في الاتجاه العرضي داخل الصف الأفقي؟
أ) بتحديد mainAxisAlignment إلى MainAxisAlignment.center
ب) بتحديد mainAxisAlignment إلى MainAxisAlignment.spaceBetween
ج) بتحديد crossAxisAlignment إلى CrossAxisAlignment.center
د) بتحديد crossAxisAlignment إلى CrossAxisAlignment.stretch
الإجابات الصحيحة:
سؤال 8: أ) crossAxisAlignment
سؤال 9: ب) CrossAxisAlignment.center
سؤال 10: ب) verticalDirection
سؤال 11: ب) بتحديد mainAxisAlignment إلى MainAxisAlignment.spaceBetween
شرح:
سؤال 8: الخاصية التي تحدد كيفية توزيع العناصر العرضية داخل الصف الأفقي في عنصر Row هي crossAxisAlignment.
سؤال 9: القيمة التي يمكن تعيينها لخاصية crossAxisAlignment لتوزيع العناصر بشكل مركزي داخل الصف الأفقي في عنصر Row هي CrossAxisAlignment.center.
سؤال 10: الخاصية التي تحدد اتجاه ترتيب العناصر الرأسية داخل الصف الأفقي في عنصر Row هي verticalDirection.
سؤال 11: يمكن استخدام عنصر Row لتوزيع العناصر بشكل متساوٍ في الاتجاه العرضي داخل الصف الأفقي بتحديد mainAxisAlignment إلى MainAxisAlignment.spaceBetween.