如何在 Flutter 中添加 ListTile：带示例的教程

大多数时候，您可能会发现自己使用某种预定义格式填充 ListView。您可以使用 Flutter 中称为ListTile小部件的现成小部件来提供帮助，而不是自己使用行、列和容器创建此布局。

在本教程中，我将通过一些实际示例向您展示如何在 Flutter 应用程序中添加 ListTile 小部件。

以下是我们今天要介绍的内容：

• 什么是 ListTile？

• ListTile 变体

• 管理 ListTile 主题

• 添加分隔符

• 添加滑动关闭行为

• 更改 ListTile 高度

• 定制

什么是 ListTile？

Flutter 中的 ListTile 小部件是一个显示相关信息的 UI 元素。

它遵循 Material Design 的List规范。一个典型的 ListTile 分为三个部分；开始、中心和结束。开始部分包含领先的小部件；中心部分包括标题和副标题；End 部分包含尾随小部件。

主要用于填充ListView、Column、Row等可滚动视图。例如，您可以使用 ListTile 显示待办事项、电子邮件、导航选项等的列表。您还可以通过点击 ListTile 来接收点击事件。

如果您是视觉学习者，请查看此快速视频教程：

添加 ListTile

这是在 ListView 小部件中显示 ListTile 的最少代码：

ListView(
  children: const [
    ListTile(
      leading: Icon(Icons.car_rental),
      title: Text('Car'),
      trailing: Icon(Icons.more_vert),
    ),
    ListTile(
      leading: Icon(Icons.flight),
      title: Text('Flight'),
      trailing: Icon(Icons.more_vert),
    ),
    ListTile(
      leading: Icon(Icons.train),
      title: Text('Train'),
      trailing: Icon(Icons.more_vert),
    )
  ],
)

以下是将代码转换为设计的方式：

当您想使用 ListTile 填充可能来自后端的长列表时，您可以将单个 ListTile 小部件包装在 ListView.Builder 中，并在 ListTile 中显示数据，如以下代码所示：

final List<String> items = List<String>.generate(10000, (i) => '$i');
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      leading: CircleAvatar(
        backgroundColor: const Color(0xff764abc),
        child: Text(items[index]),
      ),
      title: Text('Item ${items[index]}'),
      subtitle: Text('Item description'),
      trailing: Icon(Icons.more_vert),
    );
  },
)

输出：

ListTile 变体

还有其他类型的 ListTile 允许您对其执行特定操作。

这些是：

1. CheckboxListTile

2. RadioListTile

3. SwitchListTile

CheckboxListTile

CheckboxListTile小部件是 ListTile 和