تعد قوائم الترتيب من العناصر الأساسية في واجهات المستخدم، وتوفر Flutter عنصرًا مميزًا يسمى ReorderableListView لإنشاء قوائم قابلة لإعادة الترتيب بطريقة سهلة ومريحة. في هذه المقالة، سنقدم شرحًا مفصلاً لعنصر ReorderableListView وجميع خصائصه.
ما هو ReorderableListView؟
ReorderableListView هو عنصر واجهة مستخدم في Flutter يسمح للمستخدمين بإعادة ترتيب العناصر في القائمة بسهولة. يمكن استخدامه لإنشاء قوائم قابلة لإعادة الترتيب بطريقة سهلة ومريحة للمستخدم.
“اقرأ أيضاً: شرح استخدام ويدجت AspectRatio في فلاتر“
خصائص ReorderableListView
ReorderableListView يحتوي على العديد من الخصائص التي يمكن تعيينها لتخصيص سلوكه. يتم تفصيل الخصائص في الأسفل:
children
يحدد العناصر التي يتم عرضها في قائمة ReorderableListView. يمكن تعيين هذه الخاصية عبر الكود التالي:
children: [
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
ListTile(title: Text('Item 3')),
],
“اقرأ أيضاً: شرح استخدام ويدجت PositionedTransition في فلاتر“
onReorder
يحدد وظيفة يتم استدعاؤها عند إعادة ترتيب العناصر في القائمة. يمكن تعيين هذه الخاصية عبر الكود التالي:
onReorder: (int oldIndex, int newIndex) {
setState(() {
final item = _items.removeAt(oldIndex);
_items.insert(newIndex, item);
});
},
header
يحدد عنصر واجهة المستخدم الذي يتم عرضه في أعلى القائمة. يمكن تعيين هذه الخاصية عبر الكود التالي:
header: Text('Header'),
footer
يحدد عنصر واجهة المستخدم الذي يتم عرضه في أسفل القائمة. يمكن تعيين هذه الخاصية عبر الكود التالي:
footer: Text('Footer'),
scrollDirection
يحدد اتجاه التمرير في القائمة. يمكن تعيين هذه الخاصية عبر الكود التالي:
scrollDirection: Axis.vertical,
reverse
يحدد ما إذا كانت القائمة ستتم إظهارها بالترتيب العكسي أم لا. يمكن تعيين هذه الخاصية عبر الكود التالي:
reverse: false,
padding
يحدد الفراغات الداخلية للقائمة. يمكن تعيين هذه الخاصية عبر الكود التالي:
padding: EdgeInsets.all(16.0),
proxyDecorator
يحدد عنصر واجهة المستخدم الذي يتم عرضه أثناء إعادة ترتيب العناصر في القائمة. يمكن تعيين هذه الخاصية عبر الكود التالي:
proxyDecorator: (Widget child, int index, Animation<double> animation) {
return Material(
elevation: 10.0,
child: RotationTransition(
turns: animation,
child: child,
),
);
},
“اقرأ أيضاً: شرح استخدام ويدجت CircleAvatar في فلاتر“
في هذه المقالة، شرحنا عنصر ReorderableListView في Flutter وجميع خصائصه بالتفصيل. يمكن استخدام هذا العنصر لإنشاء قوائم قابلة لإعادة الترتيب بطريقة سهلة ومريحة للمستخدمين. يرجى ملاحظة أن بعض الخصائص المذكورة قد تحتاج إلى تعديلات إضافية حسب احتياجات التطبيق المحدد.
