Flutter 下拉刷新之RefreshIndicator

效果

属性

RefreshIndicator 是 Material Design 风格的下拉刷新控件，所以同android中的SwipeRefreshLayout用法一样，嵌套在外层即可。
先了解一下属性：

  const RefreshIndicator({
    Key key,
    @required this.child,
    this.displacement = 40.0,//指示器显示时距顶部位置
    @required this.onRefresh,//下拉刷新回调
    this.color,//指示器颜色，默认ThemeData.accentColor
    this.backgroundColor,//指示器背景颜色，默认ThemeData.canvasColor
    this.notificationPredicate = defaultScrollNotificationPredicate,
    this.semanticsLabel,
    this.semanticsValue,
  })

基本上只需要关心onRefresh回调即可。

使用

  @override
  Widget build(BuildContext context) {
    return Scaffold(
    
      body: RefreshIndicator(
        //指示器颜色
        color: Theme.of(context).primaryColor,
        //指示器显示时距顶部位置
        displacement: 40,
        child: SingleChildScrollView(
          child: ExpansionPanelList(),
        ),
        //下拉刷新回调
        onRefresh: () {},
      ),
      
    );
  }

SingleChildScrollView 是内容区，外层嵌套RefreshIndicator即可。

模拟一个两秒的刷新：

        onRefresh: () async {
          await Future.delayed(Duration(seconds: 2), () {
            YToast.show(context: context, msg: "下拉刷新");
            // do something
            //getData();
          });
        },

加载更多

可以看到下拉刷新还是很好实现的，但往往我们列表需要下拉刷新的时候，也需要上拉加载更多，那上拉加载更多怎么实现呢，其实也很简单的。

核心思想：判断列表已经滑动到了底部即触发加载更多事件。

判断很简单，但是还有几个需要注意的点：

• 列表超过一整屏才触发上拉加载更多。
• 加载更多时避免与下拉刷新冲突，即下拉刷新还没结束的时候也触发了上拉加载更多。
• 显示隐藏加载中的footer。

简单演示：

• 首先判断是否滑动到底部，我们需要用到ScrollController，

ScrollController _scrollController = ScrollController();

• 初始化之后设置监听

    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        YToast.show(context: context, msg: "滑动到了底部");
        // do something
        //getMoreData();
      }
    });

• _scrollController.position.pixels 当前位置
• _scrollController.position.maxScrollExtent 最大滑动范围
• 当前位置==最大滑动范围，即表示已经滑动到了底部，然后做一些操作

• 最后，把_scrollController配置给列表：

        child: SingleChildScrollView(
        
          controller: _scrollController,
          
          child: ExpansionPanelList(),
        ),

ok，到这里就介绍完了。

关于加载更多的介绍并不是完整的，友情提示一下，处理各种操作反馈逻辑的时候，避免混乱，可以定义几种状态：

• 列表是否在加载
• 是否在下拉刷新
• 是否在加载更多

然后在需要的地方通过setState()方法改变状态值即可。

啰嗦一下：
要有自己的思考力。有的人封装过这种下拉刷新上拉加载的框架，但是过了很久忘了，点一下就马上能明白过来了；有的人没接触过，但是跟着步骤走，加上自己的思考能消化成自己的知识；但是还有一种人，需要CV大法才行的，建议尽早丢掉这种坏习惯，不思考以后的路很难走的。共勉。

Github

https://github.com/yechaoa/wanandroid_flutter