Flutter ListView 实战指南：打造自定义列表视图

2023-10-04 09:58:38

快速上手 Flutter ListView

在 Flutter 中创建 ListView 非常简单，只需使用 ListView.builder() 构造函数即可。该函数接受一个构建器函数，该函数返回要显示在 ListView 中的每个项目的部件。

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index].title),
      subtitle: Text(items[index].description),
    );
  },
);

上面的代码创建一个 ListView，其中包含一个 ListTile 项。ListTile 是一个常见的 Flutter 部件，它可以显示标题、子标题和尾随图标。

自定义 ListView 外观

您可以使用各种属性来自定义 ListView 的外观。例如，您可以使用 itemExtent 属性来指定每个项目的固定高度。您还可以使用 separatorBuilder 属性来指定每个项目之间的分隔符。

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index].title),
      subtitle: Text(items[index].description),
    );
  },
  itemExtent: 80,
  separatorBuilder: (context, index) {
    return Divider();
  },
);

上面的代码创建一个 ListView，其中包含一个 ListTile 项。每个项目的高度为 80 像素，并且项目之间有一个分隔符。

处理 ListView 滑动

您可以使用 ListView.builder() 构造函数的 scrollDirection 参数来指定 ListView 的滑动方向。默认情况下，ListView 是垂直滚动的，但您也可以将其设置为水平滚动。

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index].title),
      subtitle: Text(items[index].description),
    );
  },
  scrollDirection: Axis.horizontal,
);

上面的代码创建一个 ListView，其中包含一个 ListTile 项。该 ListView 是水平滚动的。