Flutter进阶：深入探究 ListView 和 ScrollPhysics

image

Flutter 中的 ListView 可以对比 Android 中的 ListView 或者 RecycleView（当然也有不同之处） ，是可滚动项的线性列表。 我们可以用它来制作可滚动项目列表或重复项目列表。

探究各类型的 ListView

构建 ListView 有以下几种方式：

1. ListView
2. ListView.builder
3. ListView.separated
4. ListView.custom

ListView

这是 ListView 类的默认构造函数。 ListView 内有任意个数的子元素都可使其滚动。

代码的格式为：

ListView(
  children: [
    ItemOne(),
    ItemTwo(),
    ItemThree(),
  ],
),

通常这里应该放少量的子元素，因为 ListView 也会将当前不可见的元素构建起来，因此大量的子元素可能使 App 性能降低。

ListView.builder()

builder() 构造函数可以用来构造重复的子项列表，这里我们就可以类比 Android 中的 ListView 。 这个构造函数有两个主要参数：列表中项目数的 itemCount 和构造每个列表子项的 itemBuilder。

/images/listview2.gif

代码的格式为：

ListView.builder(
  itemCount: itemCount,
  itemBuilder: (context, position) {
    return listItem();
  },
),

列表项是懒加载的，这表明 Flutter 只构造了特定数量的列表项，当用户滚动时，早期的列表项被销毁。

技巧：由于元素是懒加载的，只加载了所需数量的元素，我们并不需要将 itemCount 作为必需参数，列表可以是无限长的。

ListView.builder(
  itemBuilder: (context, position) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(position.toString(), style: TextStyle(fontSize: 22.0),),
      ),
    );
  },
),

/images/listview3.gif

ListView.separated()

在 separate() 的构造函数中，我们同样生成一个列表，但这里我们可以指定每个项之间的分隔符。

/images/listview4.gif

实质上，这里，我们构造了两个交织列表：一个作为主列表，一个作为分隔符列表。

要注意的是，这里不能应用前面构造函数中所说的无限长度，因为此构造函数会强制执行 itemCount 。

代码的格式为：

ListView.separated(
      itemBuilder: (context, position) {
        return ListItem();
      },
      separatorBuilder: (context, position) {
        return SeparatorItem();
      },
      itemCount: itemCount,
),

这种类型的列表允许您动态定义分隔符，为不同类型的子项分配不同类型的分隔符，在需要时添加或删除分隔符等。

该实现还可以在列表中方便地插入其他类型的子元素（例如广告），而不需要对列表项中的主列表进行任何修改。

/images/listview5.png

注意：通常分隔符列表长度比项目列表小 1，因为在最后一个元素之后不存在分隔符。

ListView.custom()

正如其名，custom() 构造函数允许我们自定义构建 ListViews。 需要的主要参数是 SliverChildDelegate ，用于构建子项。 SliverChildDelegates 的类型是：

1. verChildListDelegate
2. SliverChildBuilderDelegate

SliverChildListDelegate 接受一个子项的直接列表，而 SliverChildBuiderDelegate 接受 IndexedWidgetBuilder（我们使用的构造函数）。

您可以使用或子类化这些来构建自己的委托。

ListView 默认构造函数的行为类似于带有 SliverChildListDelegate 的 ListView.custom 。

我们已经介绍完了 ListViews 的各种类型，让我们来看看 ScrollPhysics 。

探究 ScrollPhysics

为了控制列表滚动的发生方式，我们在 ListView 的构造函数中通常需要设置 physics 参数。 各种类型的 physics 参数有：

NeverScrollablePhysics

NeverScrollablePhysics 表现为不可滚动的列表。 使用此选项可以完全禁用 ListView 的滚动。

BouncingScrollPhysics

BouncingScrollPhysics 在列表结束时退回列表。 iOS 中有类似的效果。

/images/listview6.gif

ClampingScrollPhysics

这是 Android 上使用的默认滚动方式。 列表在结尾处停止并给出一定的效果。

/images/listview7.gif

FixedExtentScrollPhysics

该方法与其他方法略有不同，因为它仅适用于 FixedExtendScrollControllers 和使用它们的列表。 举个例子，我们用 ListWheelScrollView 来制作类似轮子的列表。

FixedExtentScrollPhysics 仅滚动到子项而不存在任何偏移。

/images/listview8.gif

样例代码非常简单：

FixedExtentScrollController fixedExtentScrollController =
    new FixedExtentScrollController();
ListWheelScrollView(
  controller: fixedExtentScrollController,
  physics: FixedExtentScrollPhysics(),
  children: monthsOfTheYear.map((month) {
    return Card(
        child: Row(
      children: [
        Expanded(
            child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            month,
            style: TextStyle(fontSize: 18.0),
          ),
        )),
      ],
    ));
  }).toList(),
  itemExtent: 60.0,
),

你应当知道的其他事情

如何在列表中保留被破坏的元素？

Flutter 提供了一个 KeepAlive() 小组件，它可以使子元素保持活跃状态，否则会被破坏。 在列表中，默认情况下，元素包装在 AutomaticKeepAlive 中。

/images/listview9.png

为什么我的 ListView 在列表和外部小部件之间有空格？

ListView 在它与外部窗口组件之间有默认填充，将填充设置为 EdgeInsets.all(0.0) 就可以删除它。

最后

利用时间整理分析自己所学的知识是件非常有意义的事情，希望这也能帮到其他正在学习的同学。同时我也正在用Flutter写几个项目，写好之后就会开源给大家。

Github：https://github.com/MeandNi

微信：yangjk128

博客：https://meandni.com/2019/01/26/flutter-exploring-list/

欢迎一起交流移动开发的技术！

参考链接

原英文博客

官方文档