【译】Flutter进阶：深刻探究 ListView 和 ScrollPhysics

Flutter 中的 ListView 能够对比 Android 中的 ListView 或者 RecycleView（固然也有不一样之处） ，是可滚动项的线性列表。 咱们能够用它来制做可滚动项目列表或重复项目列表。

探究各种型的 ListView

构建 ListView 有如下几种方式：

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

ListView

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

代码的格式为：

ListView(
  children: <Widget>[
    ItemOne(),
    ItemTwo(),
    ItemThree(),
  ],
),
复制代码

一般这里应该放少许的子元素，由于 ListView 也会将当前不可见的元素构建起来，所以大量的子元素可能使 App 性能下降。

ListView.builder()

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

代码的格式为：

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),),
      ),
    );
  },
),
复制代码

ListView.separated()

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

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

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

代码的格式为：

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

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

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

**注意：**一般分隔符列表长度比项目列表小 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 中有相似的效果。

ClampingScrollPhysics

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

FixedExtentScrollPhysics

该方法与其余方法略有不一样，由于它仅适用于 FixedExtendScrollControllers 和使用它们的列表。 举个例子，咱们用 ListWheelScrollView 来制做相似轮子的列表。

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

样例代码很是简单：

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

你应当知道的其余事情

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

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

为何个人 ListView 在列表和外部小部件之间有空格？

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

最后

利用时间整理分析本身所学的知识是件很是有意义的事情，但愿这也能帮到其余正在学习的同窗。同时我也正在用Flutter写几个项目，写好以后就会开源给你们。

Github：github.com/MeandNi

微信：yangjk128

博客：meandni.com/2019/01/26/…

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

参考连接

原英文博客

官方文档