Phần đầu và phần cuối

Thuộc phần Danh sách và màn hình trong hành trình Flutter của Coddy. Bài học 3 trên 33.

Một ListTile có một vị trí ở mỗi đầu. leading: nằm trước tiêu đề, thường là ảnh đại diện hoặc biểu tượng. trailing: nằm ở cuối hàng, thường là biểu tượng hoặc đoạn văn bản ngắn như thời gian.

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

Ô này tự căn chỉnh mọi thứ cho bạn: tiện ích ở đầu nằm bên trái, tiêu đề và tiêu đề phụ chiếm phần giữa, còn tiện ích ở cuối được đẩy sát mép phải. Bạn không cần viết Row hay SizedBox.

Thử thách

Dễ

Hàng của Ada có ảnh đại diện với chữ viết tắt tên cô ấy và biểu tượng điện thoại. Thêm các thành phần tương tự vào hai hàng còn lại:

một leading: CircleAvatar với chữ viết tắt AT và GH
một trailing: Icon(Icons.call)

Tự làm thử

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'),
            ),
          ],
        ),
      ),
    );
  }
}