تعتبر ويدجت Row واحدة من العناصر الأساسية في Flutter التي تستخدم لترتيب العناصر على نفس السطر، سواء كانت عناصر نصية أو أخرى. توفر هذه الويدجت العديد من الخصائص التي تسمح بتخصيص ترتيب العناصر بشكل مفصل وفقًا لاحتياجات التطبيق. في هذا المقال، سنقوم بشرح كيفية استخدام ويدجت Row وجميع خصائصها بالتفصيل مع التوضيح بالأكواد.
استخدام ويدجت Row في فلاتر
لإنشاء ويدجت Row في Flutter، يمكن استخدام الكود التالي:
Row(
children: <Widget>[
// Add your widgets here
],
)
تتضمن ويدجت Row خاصية children التي تستخدم لإضافة العناصر التي تريد ترتيبها في نفس السطر. يتم تحديد العناصر باستخدام قائمة من العناصر.
“اقرأ أيضاً: شرح استخدام ويدجت StreamBuilder في فلاتر“
شرح خصائص ويدجت Row في فلاتر
توفر ويدجت Row العديد من الخصائص التي يمكن استخدامها لتخصيص ترتيب العناصر على نفس السطر. سنقوم بشرح جميع الخصائص بالتفصيل وكيفية استخدامها.
الخاصية mainAxisAlignment
تستخدم هذه الخاصية لتحديد توزيع العناصر الرئيسية داخل السطر. يمكن استخدام القيم التالية:
- MainAxisAlignment.start: يوضع العنصر الأول في اليسار وتتبع العناصر الأخرى على نفس الخط.
- MainAxisAlignment.end: يوضع العنصر الأخير في اليمين وتتبع العناصر الأخرى على نفس الخط.
- MainAxisAlignment.center: يتم توزيع العناصر بالتساوي حول الوسط.
- MainAxisAlignment.spaceBetween: يتم توزيع العناصر بالتساوي بين الحواف.
- MainAxisAlignment.spaceAround: يتم توزيع العناصر بالتساوي حول الحواف.
سترى الخصائص المختلفة في الأمثلة التالية:
// MainAxisAlignment.start example
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text('First'),
Text('Second'),
Text('Third'),
],
)
// MainAxisAlignment.end example
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text('First'),
Text('Second'),
Text('Third'),
],
)
// MainAxisAlignment.center example
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('First'),
Text('Second'),
Text('Third'),
],
)
// MainAxisAlignment.spaceBetween example
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('First'),
Text('Second'),
Text('Third'),
],
)
// MainAxisAlignment.spaceAround example
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text('First'),
Text('Second'),
Text('Third'),
],
)
“اقرأ أيضاً: شرح استخدام ويدجت ClipOval في فلاتر“
الخاصية crossAxisAlignment
تستخدم هذه الخاصية لتحديد توزيع العناصر عموديًا داخل السطر. يمكن استخدام القيم التالية:
- CrossAxisAlignment.start: يوضع العنصر الأول في الأعلى وتتبع العناصر الأخرى أسفله.
- CrossAxisAlignment.end: يوضع العنصر الأخير في الأسفل وتتبع العناصر الأخرى أعلى منه.
- CrossAxisAlignment.center: يتم توزيع العناصر بالتساوي على طول المحور الرأسي.
- CrossAxisAlignment.stretch: تمتد العناصر لتملأ الفراغ العمودي.
- CrossAxisAlignment.baseline: تمر العناصر على نقطة أساس محددة.
سترى الخصائص المختلفة في الأمثلة التالية:
// CrossAxisAlignment.start example
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('First'),
Text('Second'),
Text('Third'),
],
)
// CrossAxisAlignment.end example
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text('First'),
Text('Second'),
Text('Third'),
],
)
// CrossAxisAlignment.center example
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text('First'),
Text('Second'),
Text('Third'),
],
)
// CrossAxisAlignment.stretch example
Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text('First'),
Text('Second'),
Text('Third'),
],
)
// CrossAxisAlignment.baseline example
Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Text('First', style: TextStyle(fontSize: 20)),
Text('Second', style: TextStyle(fontSize: 30)),
Text('Third', style: TextStyle(fontSize: 40)),
],
)
الخاصية mainAxisSize
تستخدم هذه الخاصية لتحديد حجم السطر. يمكن استخدام القيمتين التاليتين:
- MainAxisSize.max: يتم تمديد السطر ليملأ المساحة المتاحة.
- MainAxisSize.min: يتم ضغط السطر إلى أصغر حجم ممكن.
سترى الخصائص المختلفة في الأمثلة التالية:
// MainAxisSize.max example
Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text('First'),
Text('Second'),
Text('Third'),
],
)
// MainAxisSize.min example
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('First'),
Text('Second'),
Text('Third'),
],
)
الخاصية textDirection
تستخدم هذه الخاصية لتحديد اتجاه النص داخل السطر. يمكن استخدام القيمتين التاليتين:
- TextDirection.ltr: الاتجاه من اليسار إلى اليمين.
- TextDirection.rtl: الاتجاه من اليمين إلى اليسار.
سترى الخصائص المختلفة في الأمثلة التالية:
// TextDirection.ltr example
Row(
textDirection: TextDirection.ltr,
children: <Widget>[
Text('First'),
Text('Second'),
Text('Third'),
],
)
// TextDirection.rtl example
Row(
textDirection: TextDirection.rtl,
children: <Widget>[
Text('First'),
Text('Second'),
Text('Third'),
],
)
الخاصية verticalDirection
تستخدم هذه الخاصية لتحديد اتجاه العناصر العمودية داخل السطر. يمكن استخدام القيمتين التاليتين:
- VerticalDirection.down: الاتجاه من الأعلى إلى الأسفل.
- VerticalDirection.up: الاتجاه من الأسفل إلى الأعلى.
سترى الخصائص المختلفة في الأمثلة التالية:
// VerticalDirection.down example
Row(
verticalDirection: VerticalDirection.down,
children: <Widget>[
Text('First'),
Text('Second'),
Text('Third'),
],
)
// VerticalDirection.up example
Row(
verticalDirection: VerticalDirection.up,
children: <Widget>[
Text('First'),
Text('Second'),
Text('Third'),
],
)
الخاصية crossAxisAlignment و textBaseline معًا
يمكن استخدام خاصية crossAxisAlignment و textBaseline معًا لتحديد نقطة الأساس للنص داخل السطر. يتم تحديد نقطة الأساس باستخدام القيم التالية:
- TextBaseline.alphabetic: يتم تحديد نقطة الأساس على خط النص الأساسي.
- TextBaseline.ideographic: يتم تحديد نقطة الأساس على خط النص العمودي.
سترى الخصائص المختلفة في الأمثلة التالية:
// crossAxisAlignment and textBaseline example
Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Text('First', style: TextStyle(fontSize: 20)),
Text('Second', style: TextStyle(fontSize: 30)),
Text('Third', style: TextStyle(fontSize: 40)),
],
)
مثال على استخدام Row في Flutter:
بإمكانك استخدام عنصر Row في Flutter لتنظيم العناصر بشكلٍ أفقي. وفيما يلي مثال بسيط يوضح كيفية استخدام Row في Flutter:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Row Example',
home: Scaffold(
appBar: AppBar(
title: Text('Row Example'),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
width: 50.0,
height: 50.0,
color: Colors.red,
),
Container(
width: 50.0,
height: 50.0,
color: Colors.green,
),
Container(
width: 50.0,
height: 50.0,
color: Colors.blue,
),
],
),
),
),
);
}
}
في هذا المثال، يتم إنشاء عنصر Row يحتوي على ثلاثة عناصر من نوع Container، ويتم توزيعها بشكلٍ متساوٍ بين الفراغات باستخدام الخاصية mainAxisAlignment التي تأخذ قيمة MainAxisAlignment.spaceBetween. ويتم تحديد عرض وارتفاع العناصر باستخدام الخاصية width و height في Container، وتم تعيين لون مختلف لكل عنصر بشكلٍ مختلف.
يتم إنشاء التطبيق باستخدام MaterialApp و Scaffold، ويتم تعيين AppBar وعنصر body يحتوي على Row. يمكنك تجربة هذا المثال بنفسك عن طريق إضافته إلى مشروع Flutter الخاص بك وتشغيل التطبيق.
“اقرأ أيضاً: شرح استخدام ويدجت RadioListTile في فلاتر“
يمكن استخدام ويدجت Row في Flutter لترتيب العناصر على نفس السطر، سواء كانت العناصر نصية أو أخرى. توفر هذه الويدجت العديد من الخصائص التي يمكن استخدامها لتخصيص ترتيب العناصر بشكل مفصل وفقًا لاحتياجات التطبيق. يمكن استخدام الخصائص المختلفة، مثل mainAxisAlignment، و crossAxisAlignment، و mainAxisSize، و textDirection، و verticalDirection، و textBaseline، لتحقيق الترتيب المطلوب. يمكن استخدام الأكواد المذكورة في هذا المقال للبدء في استخدام ويدجت Row في تطبيقات Flutter الخاصة بك.
