Flutter ListView 列表进阶

列表是最常用的一个组件，通常相对于比较大的数据量都会使用到列表来显示。

滚动监听

当使用 ScrollView、ListView、PageView 等带有滚动条的组件的时候，如何监听它的滚动信息呢？Flutter 内建了 Notification 机制，一个 Widget 可以通过 Notification 将一个事件冒泡到 Widget Tree 的上层节点。监听一个 Notification 的方法是用 NotificationListener 包裹需要监听事件的子视图。

new LayoutBuilder(builder: (context, constraints) {
    return new NotificationListener(
        onNotification: (ScrollNotification note) {
            print(note.metrics.pixels.toInt());  // 滚动位置。
        },
        child: new ListView.builder(
            itemCount: 40,
            itemBuilder: (BuildContext context, int index) {
                return new Container(
                    padding: const EdgeInsets.all(8.0),
                    child: new Text('今天吃什么？'),
                );
            },
        ),
    );
});

当给 ListView 外包裹一个 NotificationListener 的时候，就可以在 NotificationListener 的 onNotification 事件里监听滚动条的信息。

在 onNotification 的回调函数里会有一个 ScrollNotification 的对象，此对象只有两个属性：metrics 和 context。

metrics 记录着滚动条的信息，它有以下只读属性：

atEdge → bool - 是否能够正好匹配 min/maxScrollExtent。
axis → Axis - 视图滚动的轴。
axisDirection → AxisDirection - 滚动的方向。
extentAfter → double - 位于可滚动视口的“下方”的数量。
extentBefore → double - 位于可滚动视口的“上方”的数量。
extentInside → double - 可见内容的数量。
maxScrollExtent → double - 滚动最大的范围。
minScrollExtent → double - 滚动最小的范围。
outOfRange → bool - 是否在范围内。
pixels → double - 当前滚动位置。
viewportDimension → double - 沿着 axisDirection 的视口范围。

控制器

在 ScrollView、ListView、PageView 里都提供了 controller 属性，此属性用于控制滚动条的行为。比如，指定滚动到某个位置，实现回到顶部等功能。

实现滚动到某个位置。

// 先创建一个 controller
var controller = new ScrollController();

// 在 ListView 上添加 controller
new ListView.builder(
    itemCount: 40,
    controller: this.controller,
    itemBuilder: (BuildContext context, int index) {
        return new Container(
            padding: const EdgeInsets.all(8.0),
            child: new Text('今天吃什么？ $index'),
        );
    },
),

// 点击时滚动到某个位置。
onPressed: () {
    this.controller.animateTo(
        100.0,
        duration: new Duration(milliseconds: 300),  // 300ms
        curve: Curves.bounceIn,                     // 动画方式
    );
},

对应的有一个没有动画效果的 API：jumpTo(double index)。

下拉刷新

Flutter 是提供了一个下拉刷新的组件的，你可以使用原生的下拉刷新组件，或者使用第三方的组件。

使用第三方组件

使用的是一个叫 pull_to_refresh的组件，它同时支持下拉刷新和上拉加载功能。

安装依赖：

dependencies:
    pull_to_refresh: ^1.1.5

使用它：

import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'dart:async';

new SmartRefresher(
    enablePullDown: true,
    // enablePullUp: true,
    onRefresh: (bool up) async {
        await new Future.delayed(const Duration(milliseconds: 2000)); // 等待异步操作
        this.controller2.sendBack(true, RefreshStatus.completed);     // 设置状态为完成
        setState(() {});                                              // 更新界面
    },
    onOffsetChange: (bool up, double offset) {},
    headerBuilder: (context, mode) {
        return new ClassicIndicator(
            mode: mode,
            height: 45.0,
            releaseText: '松开手刷新',
            refreshingText: '刷新中',
            completeText: '刷新完成',
            failedText: '刷新失败',
            idleText: '下拉刷新',
        );
    },
    controller: this.controller2,   // 控制器
    child: new ListView.builder(
        itemCount: 1000,
        controller: this.controller,
        itemBuilder: (BuildContext context, int index) {
            return new Container(
                padding: const EdgeInsets.all(8.0),
                child: new Text('今天吃什么？ $index'),
            );
        },
    ),
),

上拉加载

Flutter 也提供上来加载功能。

越界回弹效果

在 ScrollView 的里有一个属性：physics 是用于设置回弹效果的。

physics 的默认值是 ScrollPhysics，是没有回弹效果的。那么看看其他值：

AlwaysScrollableScrollPhysics - 在 Android 上，默认情况下会压缩过度滚动并导致过度滚动。在 iOS 上，过度滚动将加载弹簧，该弹簧将在发布时将滚动视图返回到其正常范围。
BouncingScrollPhysics - 用于设置列表在滑出界时，产生一个回弹效果。
ClampingScrollPhysics - 滚动物理环境允许滚动偏移超出内容范围，但随后将内容反弹回这些边界的边缘。

使用 BouncingScrollPhysics 即可实现回弹效果。

new ListView(
    physics: new BouncingScrollPhysics(),
)
new CustomScrollView(
    physics: new BouncingScrollPhysics(),
)

滚动视觉差

new CustomScrollView(
    physics: new BouncingScrollPhysics(),
    // 需要使用 slivers 才可以
    slivers: <Widget>[
        // 头部内容
        new SliverAppBar(
            // 高度
            expandedHeight: 256.0,
            pinned: true,
            floating: !true,
            snap: !true,
            flexibleSpace: new FlexibleSpaceBar(
                // 标题
                title: Text('标题'),
                centerTitle: true,
                // 背景图
                background: new Image.network(
                    'http://img.anfone.net/Outside/anfone/201666/2016661523021277.jpg',
                    fit: BoxFit.cover,
                ),
            ),
        ),
        // 列表内容
        new SliverList(
            delegate: new SliverChildBuilderDelegate((ctx, index) {
                return new Text('item: $index');
            }, childCount: this.count),
        ),
    ],
)