Flutter 学习之旅(二十七) 下拉刷新

在flutter中想要实现下拉刷新效果如果只是实现android 原生的效果的话,
只需要在Scrollable 外层嵌套RefreshIndicator 即可
例子

  getListBody() {
    if (list_str.length < 100) {
      loadDate();
    }
    return RefreshIndicator(
      onRefresh: () async {
        setState(() {
          list_str.clear();
          loadDate();
        });
      },
      child: ListView.separated(
          itemCount: list_str.length,
          separatorBuilder: (context, index) => Divider(),
          itemBuilder: (context, index) {
            if (list_str[index] == endTag) {
              return Container(
                padding: const EdgeInsets.all(16.0),
                alignment: Alignment.center,
                child: SizedBox(
                    width: 24.0,
                    height: 24.0,
                    child: CircularProgressIndicator(strokeWidth: 2.0)),
              );
            } else {
              return Container(
                width: double.infinity,
                alignment: Alignment.center,
                padding: const EdgeInsets.all(10),
                child: inflateText(list_str[index], Colors.blueAccent, 16),
              );
            }
          }),
    );
  }

貌似这里没什么好说的,下面主要来说一下自定义下拉刷新方式

CupertinoSliverRefreshControl

使用CupertinoSliverRefreshControl 就必须要了解CustomScrollView, CustomScrollView可以连接多个Scrollable ,让他们具有滑动一致性,并可以实现复杂的折叠效果,

先来看一下CupertinoSliverRefreshControl构造方法

  const CupertinoSliverRefreshControl({
    Key key,
    this.refreshTriggerPullDistance = _defaultRefreshTriggerPullDistance,///触发刷新的距离
    this.refreshIndicatorExtent = _defaultRefreshIndicatorExtent,///刷新指示器范围
    /// 根据 刷新状态和距离返回一个Widget ,这个就是自定义的布局
    this.builder = buildRefreshIndicator,
    /// 触发刷新后的回调
    this.onRefresh,
  })
 
/// 上面那个builder 方法
typedef RefreshControlIndicatorBuilder = Widget Function(
  BuildContext context,
  RefreshIndicatorMode refreshState,///刷新状态
  double pulledExtent,///已下拉的距离
  double refreshTriggerPullDistance,///下拉多杀触发刷新
  double refreshIndicatorExtent,///下拉刷新过程中等待刷新的距离
);

例子

Material(
      child: CustomScrollView(
        ///越界回弹效果
        physics: BouncingScrollPhysics(),
        slivers: [
          CupertinoSliverRefreshControl(
            refreshIndicatorExtent: 60,/// 刷新过程中悬浮高度
            refreshTriggerPullDistance: 100,///触发刷新的距离
            /// 自定义布局
            builder: (context,buildRefreshindictor,pulledExtent,refreshTriggerPullDistance,refreshIndicatorExtent){
              printString('pulledExtent : ${pulledExtent}   ,refreshTriggerPullDistance  : ${refreshTriggerPullDistance}    refreshIndicatorExtent:${refreshIndicatorExtent}');
              return Container(
                color: Colors.redAccent,
                height: 150,
                alignment: Alignment.center,
                child: AnimatedOpacity(
                    duration: Duration(milliseconds: 300),
                    //opacity: top == 80.0 ? 1.0 : 0.0,
                    opacity: 1.0,
                    child: Text(RefreshIndicatorMode.done==buildRefreshindictor?   '已拉动:${pulledExtent.round()}  松开刷新':  '已拉动:${pulledExtent.round()}  下拉刷新',
                      style: TextStyle(fontSize: 12.0),
                    )),
              );
            },
            ///触发刷新回调
            onRefresh: () async {
              await  Future.delayed(Duration(seconds: 3));
              printString('CupertinoSliverRefreshControl   onRefresh');
            },
          ),
        ],
      ),
    );

GIF 2020-8-27 15-29-26.gif

但是我发现如果不使用默认的下拉效果,子控件高度如果无法达到一个屏幕的高度,这个下拉刷新就不会触发,这个需要解决一下,我会在接下来的学习过程中进一步优化的,

我学习flutter的整个过程都记录在里面了
https://www.jianshu.com/c/36554cb4c804

最后附上demo 地址

https://github.com/tsm19911014/tsm_flutter