عناصر القائمة

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

تتشابه معظم الصفوف في القائمة: سطر رئيسي، وأحيانًا سطر أصغر تحته، وربما أيقونة عند كل طرف. ListTile هو هذا الصف، جاهز للاستخدام، بأحجام وحشوات مناسبة.

ListTile(
  title: Text('Ada Lovelace'),
  subtitle: Text('+1 555 0101'),
)

title هو السطر الرئيسي. يظهر subtitle تحته، بخط أصغر ولون أهدأ. ويقبل كلاهما عنصر واجهة، عادةً Text.

يمتد ListTile بعرض قائمته، ويتسع ليلائم سطرين عند وجود عنوان فرعي. أضف عدة عناصر منه إلى ListView وستحصل على قائمة جهات اتصال.

التحدي

سهل

صف Ada هو بالفعل عنصر ListTile. حوّل النصين الآخرين إلى عناصر مثل عنصرها:

Alan Turing مع العنوان الفرعي +1 555 0102
Grace Hopper مع العنوان الفرعي +1 555 0103

جرّب بنفسك

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(
              title: Text('Ada Lovelace'),
              subtitle: Text('+1 555 0101'),
            ),
            Text('Alan Turing'),
            Text('Grace Hopper'),
          ],
        ),
      ),
    );
  }
}