flutter NestedScrollView 下拉刷新的解决方案一

题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精。

重要消息


【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过

【x2】各种系列的视频教程 免费开源 关注 你不会迷路

【x3】系列文章 百万 Demo 随时 复制粘贴 使用


本文章将讲述:
在 flutter 项目中 使用 flutter_custom_refresh_plugin 来解决 NestScrollView 与下拉刷新组件 RefreshIndicator 的冲突


flutter 实际应用开发中,我们会遇到如下场景

效果图
一般会使用 NestScrollView 结合 SliverAppBar 与 TabBar 、TabBarView 还有下拉刷新组件 RefreshIndicator 来组合实可折叠头部的UI布局文件。 但是在使用官方的下拉刷新 RefreshIndicator发现没法使用,如果使用了折叠效果会消失。

原因是:

默认的RefreshIndicator要求它的子child必须是第一层的滑动组件它才其效果

页面Widget层级视图


解决方案之一是使用 custom_refresh_plugin点击查看github源码 插件

	实现机制是:通过 NotificationListener 来实现兼听滑动距离实现逻辑判断刷新

1 添加依赖

配制文件中 pubspec.yaml

custom_refresh_plugin:
  #git 方式依赖
  git:
    #仓库地址
    url: https://github.com/zhaolongs/flutter_custom_refresh_plugin.git
    # 分支
    ref: master

2 为 NestedScrollView 添加下拉刷新



@override
Widget build(BuildContext context) {
 return buildRootLayout();
}

Widget buildRootLayout() {
 return Scaffold(
   ///可滑动的布局
   body: CustomRefreshPage(
     ///子Widget
     child:NestedScrollView(
       .... 此处省略
     ),
     ///刷新控制器
     customRefreshController:customRefreshController,
   ),
 );
}

3 为 CustomRefreshController 下拉刷新控制器

3.1 创建 CustomRefreshController
声明成员变量
    CustomRefreshController customRefreshController = new CustomRefreshController();
3.2 CustomRefreshController 设置兼听

 CustomRefreshController customRefreshController = new CustomRefreshController();
  @override
  void initState() {
    super.initState();
    ///设置下拉刷新兼听
    ///本方法 是当下拉滑动到一定的距离时会触发一次
    customRefreshController.setOnRefreshListener(() {
      print("兼听到开始刷新回调");
      ///这里使用的是模拟网络加载效果
      Future.delayed(new Duration(milliseconds: 3000), () {
        ///结束刷新
        customRefreshController.closeRefresh();
        showCenterToast("已刷新");
      });
    });

    ///设置下拉滑动距离兼听
    ///[scrollPixe] 滑动距离兼听
    ///[totalScrollPixe] 总共可滑动的距离
    ///[toDown] true 向下滑动 false 向上滑动
    customRefreshController.setOnScrollListener(
      (double scrollPixe, double totalScrollPixe, bool toDown) {
        
      },
    );
    ///下拉刷新圆圈消失的回调方法
    customRefreshController.setOnRefreshFinishListener((){
      
    });
    
    
  }

本小节完结,如有疑问可回复评论

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页