البداية والنهاية
جزء من قسم القوائم والشاشات في رحلة Flutter على Coddy. الدرس 3 من 33.
يحتوي ListTile على خانة عند كل طرف. تأتي leading: قبل العنوان، وعادةً ما تكون صورة رمزية أو أيقونة. تأتي trailing: عند الطرف الأبعد من الصف، وعادةً ما تكون أيقونة أو نصًا قصيرًا مثل الوقت.
ListTile(
leading: CircleAvatar(child: Text('AL')),
title: Text('Ada Lovelace'),
trailing: Icon(Icons.call),
)يرتّب العنصر كل شيء لك: تستقر الأداة الأمامية على اليسار، ويملأ العنوان والعنوان الفرعي الوسط، وتُدفَع الأداة الخلفية إلى الحافة اليمنى. لا تكتب أي Row أو SizedBox.
التحدي
سهليحتوي صف Ada على صورة رمزية بأحرف اسمها الأولى وأيقونة هاتف. اجعل الصفين الآخرين مثله:
- عنصر
leading:من النوعCircleAvatarيحتوي على الأحرف الأولىATوGH - عنصر
trailing:من النوعIcon(Icons.call)
جرّب بنفسك
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text('Contacts')),
body: ListView(
children: const [
ListTile(
leading: CircleAvatar(child: Text('AL')),
title: Text('Ada Lovelace'),
subtitle: Text('+1 555 0101'),
trailing: Icon(Icons.call),
),
ListTile(
title: Text('Alan Turing'),
subtitle: Text('+1 555 0102'),
),
ListTile(
title: Text('Grace Hopper'),
subtitle: Text('+1 555 0103'),
),
],
),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس القوائم والشاشات
1قوائم قابلة للتمرير
قائمة قابلة للتمريرعناصر القائمةالبداية والنهايةاضغط على عنصر قائمةفواصل بين الصفوف6علامات التبويب والأدراج والتمرير بالسحب
علامات التبويب مع شريط تنقلأيقونات ممتلئة لعلامة التبويب المفتوحةدرج جانبياسحب للحذفالتراجع عن السحبتدرّب بنفسك: مترجم Flutter عبر الإنترنت