ما هي ListTile؟
ListTile هي ودجت جاهزة من Flutter تُستخدم لإنشاء صف واحد (Row) من العناصر، غالبًا داخل ListView أو Drawer أو Card.
تُستخدم كثيرًا لعرض قائمة عناصر (مثل الإعدادات، الرسائل، القوائم الجانبية) مع:
- عنوان (title)
- نص فرعي (subtitle)
- أيقونات قبل وبعد النص
- أحداث الضغط (onTap, onLongPress)
البنية العامة
ListTile(
leading: Icon(Icons.account_circle), // أيقونة أو صورة على اليسار
title: Text("الاسم"), // النص الرئيسي
subtitle: Text("تفاصيل إضافية"), // النص الفرعي
trailing: Icon(Icons.arrow_forward), // أيقونة على اليمين
onTap: () {
print("تم الضغط");
},
);الخصائص الرئيسية في ListTile
| الخاصية | النوع | الوصف |
|---|---|---|
| leading | Widget | عنصر يُعرض في بداية الصف (يسار أو يمين حسب اتجاه اللغة) مثل أيقونة أو صورة |
| title | Widget | النص الرئيسي أو الودجت الأساسي في الصف |
| subtitle | Widget | نص إضافي أسفل الـ title |
| trailing | Widget | عنصر يُعرض في نهاية الصف (مثل أيقونة سهم أو زر) |
| isThreeLine | bool | إذا كانت true يسمح بظهور 3 أسطر (title + subtitle بسطرين) |
| dense | bool | يجعل الـ ListTile أصغر حجمًا (تقليل المسافات) |
| contentPadding | EdgeInsetsGeometry | للتحكم في المسافات حول محتوى الصف |
| enabled | bool | إذا كانت false يعطل الصف (لا يقبل الضغط ويظهر بلون باهت) |
| selected | bool | يغيّر مظهر الصف للإشارة أنه محدد |
| onTap | Function | حدث عند الضغط |
| onLongPress | Function | حدث عند الضغط المطول |
| selectedTileColor | Color | لون خلفية العنصر عند كونه محددًا |
| tileColor | Color | لون خلفية الصف |
| focusColor | Color | اللون عند الحصول على الـ focus |
| hoverColor | Color | اللون عند تمرير المؤشر (على الويب والسطح) |
أمثلة عملية
1️⃣ أبسط مثال
ListTile(
leading: Icon(Icons.phone),
title: Text("اتصل بنا"),
subtitle: Text("اضغط للاتصال"),
trailing: Icon(Icons.arrow_forward_ios),
onTap: () {
print("اتصل بنا");
},
);2️⃣ ListTile داخل ListView
ListView(
children: [
ListTile(
leading: Icon(Icons.home),
title: Text("الصفحة الرئيسية"),
onTap: () {},
),
ListTile(
leading: Icon(Icons.settings),
title: Text("الإعدادات"),
subtitle: Text("تحكم في التطبيق"),
onTap: () {},
),
],
);3️⃣ استخدام صورة كـ leading
ListTile(
leading: CircleAvatar(
backgroundImage: AssetImage("assets/images/user.png"),
),
title: Text("محمد علي"),
subtitle: Text("نشط الآن"),
trailing: Icon(Icons.chat),
);4️⃣ تخصيص الـ Padding واللون
ListTile(
contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
tileColor: Colors.blue.shade50,
leading: Icon(Icons.email, color: Colors.blue),
title: Text("بريد إلكتروني"),
subtitle: Text("[email protected]"),
);نصائح عند استخدام ListTile
- لا تستخدمه لعناصر معقدة جدًا — إذا احتجت تصميم صف مخصص جدًا، استخدم
RowأوContainerبدلًا منListTile. - استغل
leadingوtrailingلعرض الأيقونات والأزرار التفاعلية. - استخدم
dense: trueإذا كانت لديك قائمة طويلة وتريد تقليل المسافات بين العناصر. - اجعل الأحداث واضحة مثل تغيير اللون عند الضغط (
selected: true) لتوضيح التفاعل. - ضعه داخل Card أو ListView لنتيجة أفضل في المظهر.