Flutter 项目实战 下拉刷新、上拉加载 九

/ 不同列表样式 /

普通列表下拉刷新与上拉加载

GridView 列表下拉刷新和上拉加载

​​​​

/ 自定义下拉刷新、上拉加载样式 /

作为一名Flutter开发者 , 在选择依赖库的时候 需要注意的几个点 :

. 依赖库的评分 pull_to_refresh

. 依赖库最后更新的时间

. 依赖库问题的反馈情况

. 依赖库的来源

pull_to_refresh

自定义下拉刷新头部样式

ClassicHeader classicHeader() {
  return ClassicHeader(
    releaseText: '松开手刷新',
    refreshingText: '刷新中',
    completeText: '刷新完成',
    failedText: '刷新失败',
    idleText: '下拉刷新',
    completeIcon: const Icon(Icons.done, color: Colors.red),
    idleIcon: const Icon(Icons.arrow_downward, color: Colors.red),
    releaseIcon: const Icon(Icons.refresh, color: Colors.red),
    failedIcon: const Icon(Icons.error, color: Colors.red),
    refreshingIcon: cirProInt(),
  );
}

旋转动画

Container cirProInt() {
  return Container(
    child: CircularProgressIndicator(
      valueColor: AlwaysStoppedAnimation(Colors.red),
      strokeWidth: 4.0,
      backgroundColor: Colors.blue,
    ),
    width: 20.0,
    height: 20.0,
  );
}

自定义上拉加载更多底部样式

. 简单定义

ClassicFooter classicFooter() {
  return ClassicFooter(
    height: 100.0,
    loadingText: '加载中...',
    noDataText: '暂无数据',
    failedText: '加载失败',
    idleText: '上拉加载',
  );
}

. 自定义上拉加载

根据不同的加载状态显示不同的提示 ; 设置底部自定义视图点击可以加载更多数据 .

CustomFooter? customerFooter(State state, RefreshController controller,
    {ILoadDataCallBack? callBack}) {
  return CustomFooter(
    height: 40.0,
    builder: (BuildContext context, LoadStatus? mode) {
      ///上拉加载提示
      String loadTips = '';
      ///是否加载中
      bool isLoading = false;
      ///是否可点击加载更多
      bool isCanClick = false;
      if (mode == LoadStatus.idle) {
        loadTips = '上拉加载更多数据';
        isLoading = false;
        isCanClick = false;
      } else if (mode == LoadStatus.loading) {
        isLoading = true;
        isCanClick = false;
        loadTips = '数据加载中...';
      } else if (mode == LoadStatus.failed) {
        loadTips = '加载失败,上拉加载更多数据';
        isCanClick = false;
        isLoading = false;
      } else if (mode == LoadStatus.canLoading) {
        loadTips = '点击加载更多数据';
        isLoading = false;
        isCanClick = true;
      } else {
        isLoading = false;
        loadTips = '暂无数据,点击可重新加载数据';
        isCanClick = true;
      }
      return GestureDetector(
          onTap: () {
            if (isCanClick) {
              controller.footerMode!.value = LoadStatus.canLoading;
              isLoading = true;
              print('上拉加载更多 $isCanClick');
            }
          },
          child: Container(
            height: 40.0,
            color: Colors.transparent,
            child: Center(
              child: isLoading
                  ? Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        cirProInt(),
                        Text(
                          '\t\t$loadTips',
                          style: TextStyle(
                              color: Color(0xFFBDBDBD), fontSize: 14.0),
                        ),
                      ],
                    )
                  : Text(
                      '$loadTips',
                      style:
                          TextStyle(color: Color(0xFFBDBDBD), fontSize: 14.0),
                    ),
            ),
          ));
    },
    loadStyle: LoadStyle.ShowAlways,
  );
}
///加载更多数据
typedef void ILoadDataCallBack();

. 使用自定义加载更多 customerFooter

/ 列表滚动是否可优化 /

通过开发者工具 AS 查看 Frame rendering times (大概意思就是每秒视图渲染多少帧)

. 理想状态下每秒渲染的帧数是接近1秒钟60帧 ,下面的状态是比1秒钟60帧低了很多 . 列表滚动的过程中需要渲染的列表的每个视图 视图里面包含了一张图片 . 可以尝试不加载图片 , 观察一下每一秒绘制多少帧 .

列表每一项

. 取消图片加载 ,观察列表滚动时 每秒钟渲染的帧数 , 有明显的上升趋势 . 所以为了进一步优化, 我们需要在滚动列表时 , 列表停止滚动加载视图 .

列表每一项

. 监听列表滚动状态 ( NotificationListener )

列表滚动状态

bool notificationFunction(Notification notification) {
    ///通知类型
    switch (notification.runtimeType) {
      case ScrollStartNotification:
        print("开始滚动");
        ///刷新页面 不加载图片
        isLoadingPic = false;
        break;
      case ScrollUpdateNotification:
        print("正在滚动");
        break;
      case ScrollEndNotification:
        print("滚动停止");
        ///刷新页面 加载图片
        setState(() {
          isLoadingPic = true;
        });
        break;
      case OverscrollNotification:
        print("滚动到边界");
        break;
    }
    return true;
  }

. 列表滚动过程中不渲染图片到列表, 滚动完成渲染 并查看每秒绘制多少帧 到情况 .

通过滚动状态控制图片的加载

免费接口 京东云

下拉刷新、上拉加载更多案例