عند تطوير تطبيقات Flutter، ستحتاج في كثير من الأحيان إلى عرض قوائم طويلة من العناصر. ومن أجل ذلك، تقدم Flutter عدة خيارات لإنشاء قوائم، بما في ذلك ListView.builder. في هذا المقال، سنتحدث عن ListView.builder في Flutter ونشرح كل الخصائص المتاحة له.
ما هو ListView.builder في فلاتر؟
ListView.builder هو ويدجت في Flutter يسمح لك بإنشاء قائمة من العناصر بناءً على المصفوفة أو القائمة التي تم تمريرها إليه كمدخلات. يسمح ListView.builder لك ببناء العناصر حسب الطلب (on-demand)، وبالتالي يقلل من استخدام الذاكرة ويساعد في تحسين أداء تطبيقات Flutter عندما تكون هناك قوائم طويلة.
“اقرأ أيضاً: شرح استخدام ويدجت StreamBuilder في فلاتر“
كيفية استخدام ListView.builder
قبل البدء في شرح خصائص ListView.builder، دعنا نلقي نظرة على كيفية استخدامه. لاستخدام ListView.builder، يجب عليك تمرير قائمة (List) أو مصفوفة (Array) تحتوي على العناصر التي تريد عرضها، بالإضافة إلى وظيفة البناء (builder function) التي تقوم بإنشاء كل عنصر. وظيفة البناء يجب أن تأخذ مثيلًا من BuildContext وفهرساً (index) وترجع عنصرًا في القائمة في هذا الموضع.
ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(title: Text(items[index]));
},
)
في هذا المثال، نقوم بتمرير قائمة من العناصر (items) إلى itemCount، ونستخدم itemBuilder لإنشاء كل عنصر في القائمة باستخدام ويدجت ListTile في فلاتر.
خصائص ويدجت ListView.builder
معرفة كل الخصائص المتاحة في ListView.builder مهم جداً عند تطوير تطبيقات Flutter. ولذلك، سنتحدث عن كل خاصية بالتفصيل في الأسطر التالية.
1- الخاصية itemCount
هذه الخاصية تحدد عدد العناصر في القائمة. يجب أن يكون هذا العدد مساويًا لعدد العناصر في القائمة التي تم تمريرها إلى ListView.builder.
ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(title: Text(items[index]));
},
)
2- الخاصية itemBuilder
هذه الخاصية تحدد وظيفة البناء التي تنشئ كل عنصر في القائمة. يجب أن تأخذ هذه الوظيفة مثيلًا من BuildContext وفهرسًا (index) وترجع عنصرًا في القائمة في هذا الموضع.
ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(title: Text(items[index]));
},
)
“اقرأ أيضاً: شرح استخدام ويدجت ClipOval في فلاتر“
3- الخاصية padding
هذه الخاصية تحدد حجم الهامش (padding) بين الحدود الخارجية لـ ListView.builder والعناصر داخله. يمكن تحديد قيمة الهامش بوحدة الـ pixels أو بوحدة EdgeInsets.
ListView.builder(
padding: EdgeInsets.all(16),
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(title: Text(items[index]));
},
)
4- الخاصية physics
هذه الخاصية تحدد نوع الفيزياء التي تستخدمها ListView.builder. يمكن استخدام عدة أنواع من الفيزياء، بما في ذلك ما يلي:
- AlwaysScrollableScrollPhysics، التي تسمح للمستخدم بالتمرير دائمًا.
- NeverScrollableScrollPhysics، التي تمنع المستخدم من التمرير.
- BouncingScrollPhysics، التي تسمح للمستخدم بالتمرير مع الانتعاش (bounce).
ListView.builder(
physics: AlwaysScrollableScrollPhysics(),
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(title: Text(items[index]));
},
)
5- الخاصية shrinkWrap
هذه الخاصية تحدد إذا كانت ListView.builder تتقلص لتناسب حجم العناصر المتاحة. يمكن تحديد قيمة هذه الخاصية على true إذا كانت ListView.builder في عرض صفحة واحدة.
ListView.builder(
shrinkWrap: true,
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(title: Text(items[index]));
},
)
6- الخاصية addAutomaticKeepAlives
هذه الخاصية تحدد إذا كانت ListView.builder تحافظ على حالات عناصر القائمة تلقائيًا. يمكن تحديد قيمة هذه الخاصية على true إذا كنت تستخدم قوائم قابلة للتحديث بانتظام.
ListView.builder(
addAutomaticKeepAlives: true,
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(title: Text(items[index]));
},
)
7- الخاصية addRepaintBoundaries
هذه الخاصية تحدد إذا كانت ListView.builder تضيف حدود إعادة الرسم التلقائية للعناصر في القائمة. يمكن تحديد قيمة هذه الخاصية على true إذا كنت تستخدم قوائم معقدة يمكن تغييرها بانتظام.
ListView.builder(
addRepaintBoundaries: true,
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(title: Text(items[index]));
},
)
مثال على استخدام ListView.builder في Flutter
هذا مثال كامل على استخدام ListView.builder في Flutter لإنشاء قائمة تحتوي على الاسماء والأعمار:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final List<Map<String, dynamic>> _dataList = [
{'name': 'أحمد', 'age': 25},
{'name': 'محمد', 'age': 30},
{'name': 'علي', 'age': 20},
{'name': 'أميرة', 'age': 28},
{'name': 'سارة', 'age': 21},
];
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter ListView.builder',
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter ListView.builder'),
),
body: ListView.builder(
itemCount: _dataList.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
leading: const Icon(Icons.person),
title: Text(_dataList[index]['name']),
subtitle: Text('العمر: ${_dataList[index]['age']}'),
trailing: const Icon(Icons.arrow_forward),
onTap: () {
// يمكن إضافة أي عملية تريد تنفيذها عند الضغط على العنصر هنا
},
);
},
),
),
);
}
}
في هذا المثال، يتم إنشاء ListView.builder في جسم Scaffold ويتم تحديد itemCount كـ _dataList.length (عدد العناصر في القائمة) ويتم استخدام itemBuilder لإنشاء عناصر القائمة. يتم إنشاء العناصر باستخدام ListTile ويتم تمرير البيانات من _dataList إلى ListTile وتم عرضها في Text وSubtitle.
يمكن إضافة أي عملية تريد تنفيذها عند الضغط على العنصر في onTap، في هذا المثال لا يوجد شيء يحدث عند الضغط على العنصر.
“اقرأ أيضاً: شرح استخدام ويدجت RadioListTile في فلاتر“
ListView.builder هو عنصر واجهة مستخدم قوي في Flutter يسمح لك بإنشاء قوائم طويلة من العناصر بطريقة فعالة من حيث الأداء والمرونة. يمكن تخصيص ListView.builder باستخدام عدد من الخصائص المتاحة، بما في ذلك itemCount و itemBuilder و padding و physics و shrinkWrap و addAutomaticKeepAlives و addRepaintBoundaries. عند استخدام ListView.builder، يجب النظر في أدائه واستخدام الخصائص المناسبة لضمان تجربة المستخدم الأمثل.
