تعتبر ListView في Flutter أحد أكثر عناصر الواجهة استخدامًا، حيث يمكن استخدامها لإنشاء قوائم عرض المستخدم. توفر Flutter مجموعة متنوعة من عناصر ListView المختلفة، بما في ذلك ListView.builder و ListView.separated. يتيح ListView.separated إنشاء قائمة مع فواصل بين العناصر.
ما هو ListView.separated في فلاتر؟
ListView.separated هو عنصر واجهة المستخدم في Flutter يستخدم لإنشاء قوائم مع فواصل بين العناصر. يتم توفير خيارات لتخصيص الفواصل بين العناصر بشكل كامل، بما في ذلك لون الفاصل وارتفاع الفاصل ونوع الفاصل.
“اقرأ أيضاً: شرح استخدام ويدجت StreamBuilder في فلاتر“
استخدام ListView.separated في فلاتر
يمكن استخدام ListView.separated في Flutter بشكل مشابه لـ ListView.builder كما تم شرحه سابقا. يتم تحديد عدد العناصر في القائمة باستخدام itemCount، ويستخدم itemBuilder لإنشاء عناصر القائمة. ومن ثم يتم تحديد فصل العناصر باستخدام separatorBuilder.
هذا مثال بسيط يستخدم ListView.separated لعرض قائمة بسيطة تحتوي على الأسماء:
ListView.separated(
itemCount: _names.length,
separatorBuilder: (BuildContext context, int index) {
return Divider(
height: 1,
color: Colors.grey,
);
},
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(_names[index]),
);
},
)
خصائص ويدجت ListView.separated
تتوفر لـ ListView.separated العديد من الخصائص التي يمكن استخدامها لتخصيص فواصل العناصر. فيما يلي شرح لكل من الخصائص التي تتوفر في ListView.separated بالتفصيل:
1- الخاصية itemCount
itemCount هو عدد العناصر الموجودة في القائمة. يتم استخدام هذه القيمة لتحديد عدد عناصر القائمة التي تظهر في الشاشة.
ListView.separated( itemCount: _names.length, // ... )
2- الخاصية itemBuilder
itemBuilder هو callback يستخدم لإنشاء كل عنصر في القائمة. يتم تمرير الفهرس (index) للعنصر الحالي ويجب على المطور توفير واجهة المستخدم الخاصة به.
ListView.separated(
itemCount: _names.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(_names[index]),
);
},
)
“اقرأ أيضاً: شرح استخدام ويدجت ClipOval في فلاتر“
3- الخاصية separatorBuilder
separatorBuilder هو callback يستخدم لإنشاء فاصل بين كل عنصر في القائمة. يجب على المطور توفير واجهة المستخدم الخاصة به.
ListView.separated(
itemCount: _names.length,
separatorBuilder: (BuildContext context, int index) {
return Divider(
height: 1,
color: Colors.grey,
);
},
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(_names[index]),
);
},
)
مثال على استخدام ListView.separated في Flutter
هذا مثال كامل يستخدم ListView.separated في Flutter لإنشاء قائمة تحتوي على الأسماء وتفاصيل إضافية:
import 'dart:math';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final List<Map<String, dynamic>> _dataList = [
{'name': 'أحمد', 'age': 25, 'position': 'مطور'},
{'name': 'محمد', 'age': 30, 'position': 'مصمم'},
{'name': 'علي', 'age': 20, 'position': 'محلل'},
{'name': 'أميرة', 'age': 28, 'position': 'مسوق'},
{'name': 'سارة', 'age': 21, 'position': 'مدير'},
];
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter ListView.separated',
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter ListView.separated'),
),
body: ListView.separated(
itemCount: _dataList.length,
separatorBuilder: (BuildContext context, int index) {
return const Divider(
height: 1,
color: Colors.grey,
thickness: 3,
);
},
itemBuilder: (BuildContext context, int index) {
return ListTile(
leading: const Icon(Icons.person),
title: Text(_dataList[index]['name']),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('العمر: ${_dataList[index]['age']}'),
Text('المنصب: ${_dataList[index]['position']}'),
],
),
trailing: const Icon(Icons.arrow_forward),
onTap: () {
// يمكن إضافة أي عملية تريد تنفيذها عند الضغط على العنصر هنا
},
);
},
),
),
);
}
}
في هذا المثال، يتم إنشاء ListView.separated في جسم Scaffold. يتم تحديد itemCount كـ _dataList.length (عدد العناصر في القائمة) ويستخدم itemBuilder لإنشاء عناصر القائمة. يتم إنشاء العناصر باستخدام ListTile ويتم تمرير البيانات من _dataList إلى ListTile وتم عرضها في Text وSubtitle. يتم تحديد فاصل العناصر باستخدام separatorBuilder ويتم إنشاء الفاصل باستخدام Divider.
يمكن إضافة أي عملية تريد تنفيذها عند الضغط على العنصر في onTap، في هذا المثال لا يوجد شيء يحدث عند الضغط على العنصر.
“اقرأ أيضاً: شرح استخدام ويدجت RadioListTile في فلاتر“
ListView.separated هو عنصر واجهة المستخدم المثالي لإنشاء قائمة مع فواصل بين العناصر في Flutter. يتيح ListView.separated للمطورين تخصيص الفواصل بين العناصر بشكل كامل، بما في ذلك لون الفاصل وارتفاع الفاصل ونوع الفاصل. يمكن استخدام ListView.separated لإنشاء قوائم بسيطة أو قوائم معقدة تحتوي على بيانات مثل النصوص والصور والأيقونات وما إلى ذلك.
