Flutter ListView 列表进阶

作者: iwakevin | 来源:发表于2018-12-12 16:42 被阅读597次

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

    滚动监听

    当使用 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),
            ),
        ],
    )
    

    相关文章

      网友评论

        本文标题:Flutter ListView 列表进阶

        本文链接:https://www.haomeiwen.com/subject/isdphqtx.html