Flutter ListTile Selected

Flutter 是一种用于构建高性能、高保真度、应用程序的移动应用程序框架。它的核心设计思想是将布局、构建和渲染分离开来，这使得 Flutter 开发人员能够全面管理应用程序的外观和功能。

在 Flutter 中，您可以使用 ListTile Widget 来创建列表视图。列表视图可用于显示一组相关的数据，如联系人列表、任务列表等。

在本指南中，我们将讨论如何在 Flutter 中使用 ListTile Widget，以及如何使用 Selected 属性对其进行自定义。

创建列表视图

使用 ListTile Widget 创建列表视图非常简单。为了显示一组数据，您需要：

• 创建一个 List 对象。
• 使用 ListTile 构造函数从 List 对象中生成 ListTile Widget。

下面是一个基本的示例：

class MyListTile extends StatelessWidget {
  final List<String> items = ['Apple', 'Banana', 'Mango', 'Orange'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text(items[index]),
          );
        },
      ),
    );
  }
}

在上面的代码中，我们：

• 创建一个包含水果名称的 List 对象。
• 使用 ListView.builder() 构造函数创建一个 ListView Widget。
• 在 itemBuilder 中使用 ListTile 并将每个水果名称放入 ListTile 的标题（title）中。

运行该应用程序，您将看到一个简单的列表视图，其中包含水果列表。

使用 Selected 属性

在默认情况下，Flutter ListTile 不包括选择行为。但是，您可以使用 Selected 属性来为 ListTile 添加选择行为。Selected 属性控制 ListTile 的背景颜色和其子 Widget 的颜色，以表示当前选定的列表项。

在下面的示例中，我们添加一个新的选项——"Pear"，并为 ListTile 添加一个 Selected 属性。我们还添加一个状态（_selectedIndex）以跟踪选定的列表项。

class MyListTile extends StatefulWidget {
  @override
  _MyListTileState createState() => _MyListTileState();
}

class _MyListTileState extends State<MyListTile> {
  final List<String> items = ['Apple', 'Banana', 'Mango', 'Orange', 'Pear'];
  int _selectedIndex = -1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text(items[index]),
            selected: index == _selectedIndex,
            onTap: () {
              setState(() {
                _selectedIndex = index;
              });
            },
          );
        },
      ),
    );
  }
}

在上面的代码中，我们：

• 将 _selectedIndex 设置为 -1。
• 为新项 "Pear" 添加到 items 列表中。
• 在 ListTile 中使用了 Selected 和 onTap 属性。

运行该应用程序，您将看到一个带有可选项的列表视图。当点击列表项时，列表项的背景颜色将更改，以示当前选定的列表项。注意，在此示例中，"Pear" 项的初始选择状态为未选定。

结论

本指南介绍了如何使用 ListTile Widget 在 Flutter 中创建列表视图，并使用 Selected 属性自定义列表项的选择行为。此外，我们还介绍了如何跟踪用户的选择，以便在用户选择新列表项时更新列表视图。

Flutter 提供了许多 Widget 和功能，用于构建高效、美观的应用程序。更多关于 Flutter 的信息，请访问 Flutter 的官方网站。

所有代码都可以在 GitHub 上找到。