Menu
CoddyTech
flag Ar iconالعربيةdown icon

البداية والنهاية

جزء من قسم القوائم والشاشات في رحلة Flutter على Coddy. الدرس 3 من 33.

يحتوي ListTile على خانة عند كل طرف. تأتي leading: قبل العنوان، وعادةً ما تكون صورة رمزية أو أيقونة. تأتي trailing: عند الطرف الأبعد من الصف، وعادةً ما تكون أيقونة أو نصًا قصيرًا مثل الوقت.

ListTile(
  leading: CircleAvatar(child: Text('AL')),
  title: Text('Ada Lovelace'),
  trailing: Icon(Icons.call),
)

يرتّب العنصر كل شيء لك: تستقر الأداة الأمامية على اليسار، ويملأ العنوان والعنوان الفرعي الوسط، وتُدفَع الأداة الخلفية إلى الحافة اليمنى. لا تكتب أي Row أو SizedBox.

challenge icon

التحدي

سهل

يحتوي صف 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'),
            ),
          ],
        ),
      ),
    );
  }
}
quiz iconاختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس القوائم والشاشات

تدرّب بنفسك: مترجم Flutter عبر الإنترنت