前置与后置

本课属于 Coddy Flutter 学习旅程的“列表和屏幕”单元。第 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'),
            ),
          ],
        ),
      ),
    );
  }
}