大多数时候，您可能会发现自己使用某种预定义格式填充 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 和Checkbox小部件的组合。

您可以使用此小部件将任何项目标记为已完成——例如；待办事项。默认情况下，复选框显示在 ListTile 的右侧（对于从左到右的语言）。

以下是添加 CheckboxListTile 小部件的方法：

class Language {
  String name;
  bool isChecked;
  Language(this.name, {this.isChecked = false});
}
// 1.
final List<Language> languages = [Language('English'), Language('French'), Language('German')];
ListView.builder(
  itemCount: languages.length,
  itemBuilder: (context, index) {
    return CheckboxListTile(
      // 2.
      title: Text('${languages[index].name}'),
      // 3.
      value: languages[index].isChecked,
      // 4.
      onChanged: (bool? value) {
        setState(() {
          languages[index].isChecked = value!;
        });
      },
      // 5.
      secondary: const Icon(Icons.language),
    );
  },
)

代码块中的数字解释：

1. 包含语言列表的变量

2. 这显示了复选框标签

3. 这决定了是否选中或取消选中该项目

4. 当您点击 ListTile 时会调用它

5. 这是一个领先的图标

输出：

要交换辅助（前导）小部件和复选框，您可以使用该controlAffinity属性并将其设置为ListTileControlAffinity.leading.

您还可以通过添加checkboxShape参数并将其设置为 来更改复选框的形状RoundedRectangleBorder(borderRadius: BorderRadius.circular(20))。

RadioListTile

RadioListTile小部件是ListTile和RadioButton小部件的组合——该小部件用于从项目列表中选择单个选项。

以下是添加 RadioListTile 小部件的方法：

// 1.
enum Gender { male, female }
// 2.
Gender? _gender = Gender.male;
ListView(
  children: [
    // 3.
    RadioListTile<Gender>(
      secondary: Icon(Icons.male),
      controlAffinity: ListTileControlAffinity.trailing,
      title: const Text('Male'),
      // 4.
      value: Gender.male,
      // 5.
      groupValue: _gender,
      // 6.
      onChanged: (Gender? value) {
        setState(() {
          _gender = value;
        });
      },
    ),
    RadioListTile<Gender>(
      secondary: Icon(Icons.female),
      controlAffinity: ListTileControlAffinity.trailing,
      title: const Text('Female'),
      value: Gender.female,
      groupValue: _gender,
      onChanged: (Gender? value) {
        setState(() {
          _gender = value;
        });
      },
    ),
  ],
)

代码块中的数字解释：

1. 包含RadioListTile的所有选择值的枚举

2. 这使用枚举保存默认选择

3. 添加枚举类型的 RadioListTile

4. 将选择值分配给当前列表图块。ListTile 代表这个值

5. 这用于显示当前选择的值

6. 当您切换单选按钮时，它会通过选择调用

输出：

SwitchListTile

SwitchListTile小部件是 ListTile 和Switch小部件的组合。

您可以使用此小部件构建允许用户打开或关闭应用程序设置的 UI 交互。

以下是添加 SwitchListTile 小部件的方法：

class Appliance {
  String name;
  bool isOn;
  Appliance(this.name, {this.isOn = false});
}
// 1.
final List<Appliance> appliances = [
  Appliance('TV'),
  Appliance('Fan'),
  Appliance('Refrigerator'),
];
ListView.builder(
  itemCount: appliances.length,
  itemBuilder: (context, index) {
    return SwitchListTile(
      // 2.
      title: Text('${appliances[index].name}'),
      // 3.
      value: appliances[index].isOn,
      // 4.
      onChanged: (bool value) {
        setState(() {
          appliances[index].isOn = value;
        });
      },
    );
  },
)

代码块中的数字解释：

1. 包含设备列表的变量

2. 这显示了 ListTile 的名称或标题

3. 这决定了是打开还是关闭开关

4. 这在您切换开关时调用

输出：

管理 ListTile 主题

主题是开发前端应用程序的重要方面。主题传达了您的品牌，如果管理不当，您可能会浪费大量时间让所有 UI 元素都遵循相同的规则。

假设您想要更改 ListTile 的外观以匹配您的设计。你真的有以下两个选择：

1. 在小部件级别更改主题

2. 在应用程序级别更改主题

在小部件级别更改主题

您可以通过直接修改其属性（例如颜色、形状和大小）来更改 ListTile 的外观。

以下是更改 ListTile 的背景颜色、文本颜色和图标颜色的方法：

return ListTile(
  // 1.
  tileColor: Colors.redAccent,
  // 2.
  textColor: Colors.white,
  // 3.
  iconColor: Colors.white,
);

代码块中的数字解释：

1. 这会改变 ListTile 的背景颜色

2. 这会更改 ListTile 上显示的所有文本的颜色

3. 这会更改出现在 ListTile 上的所有图标的颜色

在应用程序级别更改主题

您可能希望在所有应用页面中更改 ListTile 小部件的视觉美感。您可以通过定义listTileTheme然后添加ListTileThemeData小部件来做到这一点。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

---

在ListTileThemeData小部件内部，您可以为项目中的所有 ListTile 小部件指定要更改的所有属性。

这是代码示例：

return MaterialApp(
  title: 'Flutter Demo',
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    primarySwatch: Colors.blue,
    listTileTheme: ListTileThemeData(
      tileColor: Colors.redAccent,
      textColor: Colors.white,
      iconColor: Colors.white,
    ),
  ),
  home: MyHomePage(),
);

第一种和第二种方法都产生与以下相同的结果：

添加分隔符

添加分隔线可以帮助您清楚地区分项目，尤其是当项目在中心部分以三行显示时。

要在 ListTile 项目之间添加分隔线，请添加ListView小部件。在里面ListView，添加ListTile.divideTiles带有 tiles 属性和 ListTiles 列表。

代码示例：

ListView(
  children: ListTile.divideTiles(context: context, tiles: [
    ListTile(
      leading: Icon(Icons.car_rental),
      title: Text('Car'),
    ),
    ListTile(
      leading: Icon(Icons.flight),
      title: Text('Flight'),
    ),
    ListTile(
      leading: Icon(Icons.train),
      title: Text('Train'),
    ),
  ]).toList(),
)

输出：

如果您使用ListView.Builder，则可以将其替换为ListView.separated并添加separatorBuilder返回分隔符的参数。

代码示例：

ListView.separated( // <-- SEE HERE
  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),
    );
  },
  separatorBuilder: (context, index) { // <-- SEE HERE
    return Divider();
  },
)

输出：

添加滑动关闭行为

滑动关闭功能允许您使用滑动手势从列表中删除特定的 ListTile。例如，您可以使用此功能从列表中删除一封电子邮件。

以下是步骤：

1. 将您的ListTile小部件包装在Dismissible小部件中

2. 在 Dismissible 小部件中，添加onDismissed参数并注册回调。在这里，您可以编写从列表中删除项目的逻辑。

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Dismissible( // Step 1
      key: Key(items[index]),
      onDismissed: (direction) { // Step 2
        setState(() {
          items.removeAt(index);
        });
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('${items[index]} dismissed')));
      },
      child: ListTile(
        //visualDensity: VisualDensity(vertical: 4),
        leading: CircleAvatar(
          backgroundColor: const Color(0xff764abc),
          child: Text(items[index]),
        ),
        title: Text('Item ${items[index]}'),
        subtitle: Text('Item description'),
        trailing: Icon(Icons.more_vert),
      ),
    );
  },
)
)

（注意：以上代码仅从 UI 中删除 ListTile，您必须自己编写业务逻辑才能从数据库中删除该项目）

输出：

更改 ListTile 高度

有时您可能想在一定程度上调整 ListTile 的高度。ListTile 小部件不直接支持 height 属性，因为它的尺寸根据材料设计规范受到限制。畅听FM电台App，免登录免费畅听所有电台节目，无限制使用多地区FM频道！因此，为了增加或减少 ListTile 的高度，您可以使用该visualDensity属性。

将 设置visualDensity为正数将增加 ListTile 高度，而负数将降低高度。

（注意：您可以设置的最大值和最小值是4和-4）

这是代码示例：

ListTile(
  visualDensity: VisualDensity(vertical: 4), //<-- SEE HERE
  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 添加各种自定义项。例如，您可以更改它的颜色（在不同的状态，如悬停、按下等）、形状、在标题和其他元素之间添加空间，以及更改它的高度等。

---

来自 LogRocket 的更多精彩文章：

• 不要错过来自 LogRocket 的精选时事通讯The Replay

• 了解LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题

• 使用 React 的 useEffect优化应用程序的性能

• 在多个 Node 版本之间切换

• 了解如何使用 AnimXYZ 为您的 React 应用程序制作动画

• 探索 Tauri，一个用于构建二进制文件的新框架

• 比较NestJS 与 Express.js

---

您可以通过导航到其定义来查看它支持的所有属性。要查看所有属性，只需右键单击，然后转到> Delcation或Usages。

结论

添加 ListTile 小部件可帮助您提高应用程序开发速度。它遵循材料规范，涵盖了有意义地展示项目所需的一切。

在本教程中，我们首先了解了如何添加 ListTile、它的类型以及如何管理主题，并涵盖了一些场景，例如添加分隔线和滑动关闭功能以及更改 ListTile 高度，所有这些都是我希望您在建立下一个列表时会有所帮助。