使用 flutter 的ListView实现滚动列表

现现在打开一个 App，好比头条、微博，都会有长列表，随着咱们不断地滑动，视窗内的内容也会不断地更新。今天就用 Flutter 实现一下这种效果。

---

这里的表现其实就至关于有一个固定长度的容器，而后超出的内容是不可见的，只有当你向上或向下滑动屏幕时，视窗外看不见的内容才会出如今视窗中。若是在 web 开发时，是须要容器加上样式

overflow: auto;
复制代码

要想用 Flutter 实现，其实也是很简单的，由于 Flutter 为咱们提供了 ListView 组件。

ListView 主要有如下几种使用方式

• ListView
• ListView.builder
• ListView.separated
• ListView.custom

ListView

ListView 是最简单直接的方式，简单，那么适用的场景也是简单的。仅适用于内容较少的情形，由于它是一次性渲染全部的 items ，当 items 的数目较多时，很容易出现卡顿现象的，致使滑动不流畅。 你能够试试加大下面 items 的大小，而后对比一下体验效果。

class ListViewDemo extends StatelessWidget {
  final _items = List<Widget>.generate(10,
      (i) => Container(padding: EdgeInsets.all(16.0), child: Text("Item $i")));

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _items,
    );
  }
}

复制代码

ListView.builder()

构造函数 builder 要求传入两个参数，itemCount 和 itemBuilder 。前者规定列表数目的多少，后者决定了每一个列表如何渲染。跟 ListView 不一样的点在于，这是懒加载的，假若有 1000 个列表，初始渲染时并不会全部都渲染，而只会特定数量的 item ，这对于性能和用户体验来讲，是很好的提高。 你能够对比用 ListView 和用 ListView.builder 渲染 1000 个列表时，体验是否有差异。

class ListViewDemo extends StatelessWidget {
  final _items = List<String>.generate(1000, (i) => "Item $i");

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 1000,
      itemBuilder: (context, idx) {
        return Container(
          padding: EdgeInsets.all(16.0),
          child: Text(_items[idx]),
        );
      },
    );
  }
}
复制代码

ListView.separated()

separated 相比较于 builder，又多了一个参数 separatorBuilder ，用于控制列表各个元素的间隔如何渲染。好比，咱们须要列表的每一个 item 之间有一个分割线，就能够跟下面那样，加一个 Divider 组件。

class ListViewDemo extends StatelessWidget {
  final _items = List<String>.generate(1000, (i) => "Item $i");

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemCount: 1000,
      itemBuilder: (context, idx) {
        return Container(
          padding: EdgeInsets.all(16.0),
          child: Text(_items[idx]),
        );
      },
      separatorBuilder: (context, idx) {
        return Divider();
      },
    );
  }
}
复制代码

ListView.custom()

custom，就跟名字同样，让咱们自定义。必须的参数就是 childrenDelegate , 而后传入一个 实现了 SliverChildDelegate 的组件，如 SliverChildListDelegate 和 SliverChildBuilderDelegate 。

SliverChildListDelegate 接收跟 ListView 同样的 children，而 SliverChildBuilderDelegate 接收跟 ListView.builder 的 itemBuilder 同样类型的函数。

正常来讲，前面三个已经能够知足咱们的平常使用需求了，无需自定义。

---

总结，上面主要讨论了 ListView 的几个构造函数及用法，讨论如何实现常见的滚动列表。

完成的代码，可见 list_view.dart 。

---

最后

笔者最近在学习flutter，会持续地记录本身的学习过程，并放在 github 上。

有问题欢迎提出，你们一块儿讨论，一块儿进步。

参考资料

Flutter ListView and ScrollPhysics: A Detailed Look

ListView class