Flutter ListView 用法详解

ListView的4种构造方式

默认构造函数（传入 List children）

ListView(
          children: <Widget>[
            ListTile(title: Text("普通ListView")),
            ListTile(
                title: Text("ListView.build"),
                onTap: () {
                  Navigator.pushNamed(context, '/listview_build');
                }),
          ],
        )
复制代码

适用场景：已知有限个Item的状况下

builder

ListView.builder(
            itemBuilder: (context, index) => Text("Item $index"),
            itemCount: 100)
复制代码

适用场景：长列表时采用builder模式，能提升性能。不是把全部子控件都构造出来，而是在控件viewport加上头尾的cacheExtent这个范围内的子Item才会被构造。在构造时传递一个builder，按需加载是一个惯用模式，能提升加载性能。

构造多种样式的Item

abstract class ListItem {}

class HeadingItem implements ListItem {
  final String heading;

  HeadingItem(this.heading);
}

class MessageItem implements ListItem {
  final String sender;
  final String body;

  MessageItem(this.sender, this.body);
}

ListView.builder(
            itemBuilder: (context, index) {
              final item = items[index];

              if (item is HeadingItem) {
                return ListTile(
                  title: Text(
                    item.heading,
                    style: Theme.of(context).textTheme.headline,
                  ),
                );
              } else if (item is MessageItem) {
                return ListTile(
                  title: Text(item.sender),
                  subtitle: Text(item.body),
                );
              }
            },
            itemCount: items.length))
复制代码

separated

ListView.separated(
            itemBuilder: (context, index) {
              return Text("Item $index");
            },
            separatorBuilder: (context, index) {
              return Container(
                color: Colors.grey,
                height: 3,
              );
            },
            itemCount: 100)
复制代码

适用场景：列表中须要分割线时，能够自定义复杂的分割线

custom

须要自定义SliverChildDelegate，各方法含义以下：

ListView.custom(childrenDelegate: CustomSliverChildDelegate())

class CustomSliverChildDelegate extends SliverChildDelegate {
  /// 根据index构造child
  @override
  Widget build(BuildContext context, int index) {
    // KeepAlive将把全部子控件加入到cache，已输入的TextField文字不会因滚动消失
    // 仅用于演示
    return KeepAlive(
        keepAlive: true,
        child: TextField(decoration: InputDecoration(hintText: '请输入')));
  }

  /// 决定提供新的childDelegate时是否须要从新build。在调用此方法前会作类型检查，不一样类型时才会调用此方法，因此通常返回true。
  @override
  bool shouldRebuild(SliverChildDelegate oldDelegate) {
    return true;
  }

  /// 提升children的count，当没法精确知道时返回null。
  /// 当 build 返回 null时，它也将须要返回一个非null值
  @override
  int get estimatedChildCount => 100;

  /// 预计最大可滑动高度，若是设置的太小会致使部分child不可见，设置报错
  @override
  double estimateMaxScrollOffset(int firstIndex, int lastIndex,
      double leadingScrollOffset, double trailingScrollOffset) {
    return 2500;
  }

  /// 完成layout后的回调，能够经过该方法获已完成布局的视图树包括哪些子控件
  @override
  void didFinishLayout(int firstIndex, int lastIndex) {
    print('didFinishLayout firstIndex=$firstIndex firstIndex=$lastIndex');
  }
}
复制代码

适用场景：上面几种模式基本能够知足业务需求，若是你还想作一些其它设置（如列表的最大滚动范围）或获取滑动时每次布局的子Item范围，能够尝试custom模式

ListView属性含义

ListView的属性

• itemExtent: 指定Item在滑动方向上的高度，用来提升滑动性能

继承自父控件 BoxScrollView 的属性

• padding: 用来设置BoxScrollView中子控件与父控件的间距

继承自 ScrollView 的属性

• ScrollDirection: 滚动方向
• reverse：决定滚动方向是否与阅读方向一致
• scrollController：控制滚动的位置
• primary：当内容不足以滚动时，是否支持滚动；对于iOS系统还有一个效果：当用户点击状态栏时是否滑动到顶部。
• ScrollPhysics：控制用户滚动视图的交互
  • AlwaysScrollableScrollPhysics:列表老是可滚动的。在iOS上会有回弹效果，在android上不会回弹。那么问题来了，若是primary设置为false（内容不足时不滚动），且 physics设置为AlwaysScrollableScrollPhysics，列表是否能够滑动？答案是能够，感兴趣的能够试一下
  • PageScrollPhysics：通常是给PageView控件用的滑动效果。若是listview设置的话在滑动到末尾时会有个比较大的弹起和回弹
  • ClampingScrollPhysics：滚动时没有回弹效果，同android系统的listview效果
  • NeverScrollableScrollPhysics：就算内容超过列表范围也不会滑动
  • BouncingScrollPhysics：不论什么平台都会有回弹效果
  • FixedExtentScrollPhysics：不适用于ListView，缘由：须要指定scroller为FixedExtentScrollController,这个scroller只能用于ListWheelScrollViews
• shrinkWrap: scroll view在滑动方向上的高度是否由内容高度决定，false：则高度为滑动方向上的最大容许高度；若是在滑动方向上没有设置约束，则这个字段必须设置为true，不然会报错。
• cacheExtent：可见区域的先后会有必定高度的空间去缓存子控件，当滑动时就能够迅速呈现
• semanticChildCount：有含义的子控件的数量，如ListView会用children的长度，ListView.separated会用children长度的一半

用于构造SliverChildListDelegate的属性

• addAutomaticKeepAlives：是否将子控件包裹在AutomaticKeepAlive控件内
• addRepaintBoundaries：true：是否将子控件包裹在 RepaintBoundary 控件内。用于避免列表滚动时的重绘，若是子控件重绘开销很小时，好比子控件就是个色块或简短的文字，把这个字段设置为false性能会更好
• addSemanticIndexes：是否把子控件包装在IndexedSemantics里，用来提供无障碍语义

最后

ListView最为app最多见的控件之一，掌握它的用法很是重要。本文主要给Flutter萌新们介绍ListView的几种构造方式和参数含义，视图控件的学习应多动手写写demo，真实体会各个参数的效果。

最后附上demo以供参考。

@akindone， 本文版权属于再惠研发团队，欢迎转载，转载请保留出处。