Flutter滚动型容器组件 - ListView篇

时间  2019-11-06
标签 flutter 滚动 容器 组件 listview 繁體版
原文   原文链接

图片描述

1. 前言

Flutter做为时下最流行的技术之一，凭借其出色的性能以及抹平多端的差别优点，早已引发大批技术爱好者的关注，甚至一些闲鱼，美团，腾讯等大公司均已投入生产使用。虽然目前其生态尚未彻底成熟，但身靠背后的Google加持，其发展速度已经足够惊人，能够预见未来对Flutter开发人员的需求也会随之增加。前端

不管是为了如今的技术尝鲜仍是未来的潮流趋势，都9102年了，做为一个前端开发者，彷佛没有理由不去尝试它。正是带着这样的心理，笔者也开始学习Flutter，同时建了一个用于练习的仓库，后续全部代码都会托管在上面，欢迎star，一块儿学习。这是我写的Flutter系列文章：git

在上一篇文章中，咱们学习了Flutter中使用频率最高的一些基础组件。可是在一些场景中，当组件的宽度或高度超出屏幕边缘时，Flutter每每会给出overflow警告，提醒有组件溢出屏幕。为了解决这个问题，今天咱们就来学习最经常使用的一个滚动型容器组件 — ListView组件。github

2. ListView使用方法

从功能比较上来看，Flutter中的ListView组件和RN中的ScrollView/FlatList很是类似，可是在使用方法上仍是有点区别。接下来，就跟着我一块儿来看看ListView组件都有哪些经常使用的使用方法。segmentfault

2.1 ListView()

第一种使用方法就是直接调用其默认构造函数来建立列表，效果等同于RN中的ScrollView组件。可是这种方式建立的列表存在一个问题：对于那些长列表或者须要较昂贵渲染开销的子组件，即便尚未出如今屏幕中但仍然会被ListView所建立，这将是一项较大的开销，使用不当可能引发性能问题甚至卡顿。数组

不过话说回来，虽然该方法可能会有性能问题，但仍是取决于其不一样的应用场景而定。下面咱们就来看下其构造函数（已省略不经常使用属性）：微信

ListView({
  Axis scrollDirection = Axis.vertical,
  ScrollController controller,
  ScrollPhysics physics,
  bool shrinkWrap = false,
  EdgeInsetsGeometry padding,
  this.itemExtent,
  double cacheExtent,
  List<Widget> children = const <Widget>[],
})
  • scrollDirection: 列表的滚动方向，可选值有Axis的horizontal和vertical，能够看到默认是垂直方向上滚动；
  • controller : 控制器，与列表滚动相关，好比监听列表的滚动事件；
  • physics: 列表滚动至边缘后继续拖动的物理效果，Android与iOS效果不一样。Android会呈现出一个波纹状（对应ClampingScrollPhysics），而iOS上有一个回弹的弹性效果（对应BouncingScrollPhysics）。若是你想不一样的平台上呈现各自的效果可使用AlwaysScrollableScrollPhysics，它会根据不一样平台自动选用各自的物理效果。若是你想禁用在边缘的拖动效果，那可使用NeverScrollableScrollPhysics；
  • shrinkWrap: 该属性将决定列表的长度是否仅包裹其内容的长度。当ListView嵌在一个无限长的容器组件中时，shrinkWrap必须为true，不然Flutter会给出警告；
  • padding: 列表内边距；
  • itemExtent: 子元素长度。当列表中的每一项长度是固定的状况下能够指定该值，有助于提升列表的性能（由于它能够帮助ListView在未实际渲染子元素以前就计算出每一项元素的位置）；
  • cacheExtent: 预渲染区域长度，ListView会在其可视区域的两边留一个cacheExtent长度的区域做为预渲染区域（对于ListView.build或ListView.separated构造函数建立的列表，不在可视区域和预渲染区域内的子元素不会被建立或会被销毁）；
  • children: 容纳子元素的组件数组。

上面的属性介绍一大堆，都不如一个实际例子来得实在。咱们能够用一个ListView组件来包裹上篇文章中实现的银行卡，宠物卡片，朋友圈这三个例子：网络

代码（文件地址）app

class NormalList extends StatelessWidget {

  const NormalList({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        CreditCard(data: creditCardData),
        PetCard(data: petCardData),
        FriendCircle(data: friendCircleData),
      ],
    );
  }
}

预览less

图片描述

能够看到，默认构造函数的用法很是之简单，直接把子元素组件放在children数组中就能够了。可是潜在的问题前面也已经解释过，对于长列表这种应用场景仍是应该用ListView.build构造函数性能会更好。ide

2.2 ListView.build()

ListView默认构造函数虽使用简单，但不适用于长列表。为此，咱们来看下ListView.build构造函数：

ListView.builder({
  ...
  int itemCount,
  @required IndexedWidgetBuilder itemBuilder,
})

这里省略了不经常使用以及和ListView默认构造函数重复的一些参数，相比之下咱们能够发现ListView.builder多了两个新的参数：

  • itemCount: 列表中元素的数量；
  • itemBuilder: 子元素的渲染方法，容许自定义子元素组件（等同于rn中FlatList组件的renderItem属性）。

不一样于ListView默认构造函数经过children参数指定子元素的这种方式，ListView.build经过暴露统一的itemBuilder方法将渲染子元素的控制权交还给调用方。这里咱们用一个微信公众号的例子来讲明ListView.build的使用方法（公众号卡片的样式布局能够看这里，也算是对基础组件的一个巩固和复习）：

代码（文件地址）

class SubscribeAccountList extends StatelessWidget {
  const SubscribeAccountList({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color(0xFFEFEFEF),
      child: ListView.builder(
        itemCount: subscribeAccountList.length,
        itemBuilder: (context, index) {
          return SubscribeAccountCard(data: subscribeAccountList[index]);
        },
      ),
    );
  }
}

预览

builder_usage

根据上面的代码能够看到，ListView.build建立列表最重要的两个参数就是itemCount和itemBuilder。对于公众号列表这个例子，因为每一个公众号消息卡片的布局都是有规则的，并且这个列表的数量可能很是之多，因此用ListView.build来建立再适合不过了。

2.3 ListView.separated()

绝大多数列表类的需求咱们均可以用ListView.build构造函数来解决问题，不过有的列表子项之间须要分割线，此时咱们能够用Flutter提供的另外一个构造函数ListView.separated来建立列表。来看下其构造函数有什么不一样：

ListView.separated({
  ...
  @required IndexedWidgetBuilder separatorBuilder
})

相比于ListView.build 构造函数，能够看到ListView.separated仅仅是多了一个separatorBuilder必填参数。顾名思义，这就是暴露给调用方自定义分割线组件的回调方法。以支付宝的好友列表为例（好友卡片的样式布局能够看这里），咱们来看下ListView.separated的使用方法：

代码（文件地址）

class FriendList extends StatelessWidget {
  const FriendList({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemCount: friendListData.length,
      itemBuilder: (context, index) {
        return FriendCard(data: friendListData[index]);
      },
      separatorBuilder: (context, index) {
        return Divider(
          height: .5,
          indent: 75,
          color: Color(0xFFDDDDDD),
        );
      },
    );
  }
}

预览

separated_usage

看代码能够知道不一样点就在于实现了separatorBuilder这个函数，经过它咱们能够自定义每一个子元素之间的分割线了。

2.4 小结

到目前为止，咱们一共学习了ListView，ListView.build和ListView.separated三种建立列表的方式，它们各自都有其适用的场景，因此遇到需求时仍是得具体问题具体分析。

不过，其实ListView还有一个构造函数：ListView.custom。并且ListView.build和ListView.separated最终都是经过ListView.custom实现的。可是本文并不打算介绍这种方法，由于通常状况下前面提到的三种构造方法就已经足够解决问题了（之后遇到实际问题再研究这个）。

3. ListView进阶方法

上文咱们介绍了ListView的基础用法，可是在实际的产品中，咱们还会遇到列表下拉刷新和上拉加载等需求。接下来，就让咱们学习下Flutter中应该如何实现此类交互操做。

3.1 下拉刷新

要在Flutter中实现列表的下拉刷新效果，其实很是简单，由于Flutter给咱们封装好了一个RefreshIndicator组件，使用起来也很是方便。看下示例代码：

class PullDownRefreshList extends StatefulWidget {
  const PullDownRefreshList({Key key}) : super(key: key);

  @override
  _PullDownRefreshListState createState() => _PullDownRefreshListState();
}

class _PullDownRefreshListState extends State<PullDownRefreshList> {

  Future onRefresh() {
    return Future.delayed(Duration(seconds: 1), () {
      Toast.show('当前已经是最新数据', context);
    });
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: this.onRefresh,
      child: ListView.separated(
        itemCount: friendListData.length,
        itemBuilder: (context, index) {
          return FriendCard(data: friendListData[index]);
        },
        separatorBuilder: (context, index) {
          return Divider(
            height: .5,
            indent: 75,
            color: Color(0xFFDDDDDD),
          );
        },
      ),
    );
  }
}

因为列表的数据源是可变的，所以此次的组件咱们选用继承自StatefulWidget。

能够看到RefreshIndicator的用法十分简单，只要将咱们原来的ListView做为其child，而且实现其onRefresh方法就行了。而onRefresh方法实际上是刷新完毕通知RefreshIndicator的一个回调函数。上述代码中，咱们模拟了一个1s的等待当作网络请求，而后弹出一个Toast提示"已是最新数据"（此处的Toast是安装了toast: ^0.1.3这个包，Flutter原生并无提供）。

这里模仿了今日头条的列表UI做为示例（新闻卡片的样式布局能够看这里），咱们来看下效果：

pull_down_refresh_usage

能够看到一切都如预期成功执行了，效果仍是不错的，并且RefreshIndicator使用起来也是很是简便。可是，因为Flutter封装好的RefreshIndicator组件可定制性有点弱，不太可以知足大多数app中自定义样式的要求。不过好在看了下RefreshIndicator的源码并非不少，等往后学了动画再回头来研究下如何定制一个自定义的下拉刷新组件。

3.2 上拉加载

除了下拉刷新以外，上拉加载是常常会遇到的另外一种列表操做。不过，此次Flutter却是没有像下拉刷新那样提供现成的组件能够直接调用，上拉加载的交互须要咱们本身完成。为此，咱们先来简单分析下：

  1. 组件内部须要一个list变量存储当前列表的数据源；
  2. 组件内部须要一个bool型的isLoading标志位来表示当前是否处于Loading状态；
  3. 须要可以判断出当前列表是否已经滚动到底部，而这就要借助到咱们前面提到过的controller属性了（ScrollController能够获取到当前列表的滚动位置以及列表最大滚动区域，相比较便可获得结果）；
  4. 当开始加载数据的时候，须要将isLoading置为true；当数据加载完毕的时候，须要将新的数据合并到list变量中，而且从新将isLoading置为false。

根据上面的思路，咱们能够获得下面的代码：

class PullUpLoadMoreList extends StatefulWidget {
  const PullUpLoadMoreList({Key key}) : super(key: key);

  @override
  _PullUpLoadMoreListState createState() => _PullUpLoadMoreListState();
}

class _PullUpLoadMoreListState extends State<PullUpLoadMoreList> {
  bool isLoading = false;
  ScrollController scrollController = ScrollController();
  List<NewsViewModel> list = List.from(newsList);

  @override
  void initState() {
    super.initState();
    // 给列表滚动添加监听
    this.scrollController.addListener(() {
      // 滑动到底部的关键判断
      if (
        !this.isLoading &&
        this.scrollController.position.pixels >= this.scrollController.position.maxScrollExtent
      ) {
        // 开始加载数据
        setState(() {
          this.isLoading = true;
          this.loadMoreData();
        });
      }
    });
  }

  @override
  void dispose() {
    // 组件销毁时，释放资源（必定不能忘，不然可能会引发内存泄露）
    super.dispose();
    this.scrollController.dispose();
  }

  Future loadMoreData() {
    return Future.delayed(Duration(seconds: 1), () {
      setState(() {
        this.isLoading = false;
        this.list.addAll(newsList);
      });
    });
  }

  Widget renderBottom() {
    // TODO
  }

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      controller: this.scrollController,
      itemCount: this.list.length + 1,
      separatorBuilder: (context, index) {
        return Divider(height: .5, color: Color(0xFFDDDDDD));
      },
      itemBuilder: (context, index) {
        if (index < this.list.length) {
          return NewsCard(data: this.list[index]);
        } else {
          return this.renderBottom();
        }
      },
    );
  }
}

其中有一点须要注意，列表的itemCount值变成了list.length + 1，这是由于咱们多渲染了一个底部组件。当不在加载的时候，咱们能够展现一个上拉加载更多的提示性组件；当正在加载数据时，咱们又能够展现一个努力加载中...的占位组件。renderBottom的实现以下：

Widget renderBottom() {
  if(this.isLoading) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 15),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            '努力加载中...',
            style: TextStyle(
              fontSize: 15,
              color: Color(0xFF333333),
            ),
          ),
          Padding(padding: EdgeInsets.only(left: 10)),
          SizedBox(
            width: 20,
            height: 20,
            child: CircularProgressIndicator(strokeWidth: 3),
          ),
        ],
      ),
    );
  } else {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 15),
      alignment: Alignment.center,
      child: Text(
        '上拉加载更多',
        style: TextStyle(
          fontSize: 15,
          color: Color(0xFF333333),
        ),
      ),
    );
  }
}

最后，咱们再来看下最终的实现效果：

pull_up_load_more_usage

4. 总结

首先，本文介绍了经常使用的ListView，ListView.build和ListView.separated三种构造方法来建立列表，并结合实际的例子加以说明其不一样的使用场景。紧接着，又介绍了列表组件下拉刷新和上拉加载这两个较经常使用到的交互操做在Flutter中应该如何实现。

经过文中的5个实际例子，相信你必定已经对Flutter中如何使用ListView有了初步了解，剩下的就是多练习（盘它）咯~

本文全部代码托管在这儿，也能够关注个人Blog。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程