列表项

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