Flutter 上拉加载 下拉刷新的简单实现

最新推荐文章于 2024-08-09 18:09:03 发布
最新推荐文章于 2024-08-09 18:09:03 发布
阅读量1k 收藏 1
点赞数
分类专栏： flutter flutter上拉加载下拉刷新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZR915/article/details/99773160
版权

最近学了一下flutter，下班后仿着现在做的app用flutter做了主页的几个新闻数据，用到刷新加载的时候，想着自己手动实现一下。

实现方法为：官方refresh+ScrollController+GestureDetector。

用了官方的pull to refresh ,不过这个东西限制条件很多，连基本的功能都无法完全实现，限制归限制，该用的时候还是得用它的，不然自己完全实现起来有点费劲。

官方的下拉刷新，需要用RefreshIndicator来实现，代码如下：

@override
Widget build(BuildContext context) {
  super.build(context); // See AutomaticKeepAliveClientMixin.

  return  new RefreshIndicator(child: new ListView(
            controller: _scrollController,
            children: <Widget>[
              new MyBanner(images: _images),
              Container(
                height: 55,
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: new Text(""),
                      flex: 1,
                    ),
                    Expanded(
                      child: new GestureDetector(onTap: () {
                        Fluttertoast.showToast(
                            msg: "您没有权限",
                            toastLength: Toast.LENGTH_SHORT,
                            gravity: ToastGravity.CENTER,
                            timeInSecForIos: 1,
                            textColor: Colors.black
                        );
                      }, child: new Row(

                        children: <Widget>[
                          new Icon(Icons.autorenew),
                          new Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              new Text("title1"),
                              new Text("subtitle1"),
                            ],
                          )

                        ],
                      ),),
                      flex: 20,
                    ),
                    Expanded(
                      child: new Text(""),
                      flex: 1,
                    ),
                    Expanded(
                      child: new GestureDetector(onTap: () {
                        Fluttertoast.showToast(
                            msg: "敬请期待",
                            toastLength: Toast.LENGTH_SHORT,
                            gravity: ToastGravity.CENTER,
                            timeInSecForIos: 1,
                            textColor: Colors.black
                        );
                      }, child: new Row(
                        children: <Widget>[
                          new Icon(Icons.autorenew),
                          new Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              new Text("title2"),
                              new Text("subtitle2"),
                            ],
                          )
                        ],

                      ),),
                      flex: 20,
                    )

                  ],
                ),
              ),
              new Container(child: new Text("新闻", style: _biggerFont),
                margin: const EdgeInsets.only(left: 20),)
              ,
              new NewsList(menu_code: news_menu_code)
            ],
          ),
              onRefresh: getListData)
      );
 }

emmm, csdn都还没有支持flutter的代码插入，令人非常难过。

主要代码为
new RefreshIndicator(child:new ListView(),onRefresh:getListdata)

但是官方的刷新有一个问题，那就是在整个listview?页面 不足一页的时候，它的刷新是用不了的，即使下拉也触发不了刷新。

这时候就需要我们的GestureDetector登场了，使用GestureDetector来做手势处理，代码如下：

  double startPointy, startPointx;//手势起点的y 和 x
  bool isAnimShowing = false;//用来解决手势处理中多次触发的问题
  OverlayEntry moverlayEntry;
  bool isLoading = false;//用来预防万一多次刷新加载

@override
Widget build(BuildContext context) {
  super.build(context); // See AutomaticKeepAliveClientMixin.

  return new GestureDetector(
      onVerticalDragUpdate: (dragDetails) {
        if (startPointy-dragDetails.globalPosition.dy > 5 &&//获取底部数据 loadmore
            !isAnimShowing &&
            dragDetails.globalPosition.dx - startPointx < 5) {
          //todo 动画开始
          isAnimShowing = true;
          
          if(!isLoading){
            moverlayEntry = creatOverlay(true);
            isLoading=true;
            Overlay.of(context).insert(moverlayEntry);
          }
          getMoreData();
        }
        if(dragDetails.globalPosition.dy-startPointy > 5 &&
            !isAnimShowing &&
            dragDetails.globalPosition.dx - startPointx < 5){
          isAnimShowing = true;
          
          if(!isLoading){
            moverlayEntry = creatOverlay(false);
            isLoading=true;
            Overlay.of(context).insert(moverlayEntry);
          }
          getListData();//refresh
        }
        print("" + dragDetails.globalPosition.dy.toString());
      },
      onVerticalDragStart: (startDetails) {
        isDragging = true;
        startPointy = startDetails.globalPosition.dy;
        startPointx = startDetails.globalPosition.dx;
      },
      onVerticalDragEnd: (endDetails) {
        isDragging = false;
        isAnimShowing = false;
        print("---------onVerticalDragEnd--------");
      },
      child: new Container(
          padding: EdgeInsets.all(0),
          child: new RefreshIndicator(child: new ListView(
            controller: _scrollController,
            children: <Widget>[
              new MyBanner(images: _images),
              Container(
                height: 55,
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: new Text(""),
                      flex: 1,
                    ),
                    Expanded(
                      child: new GestureDetector(onTap: () {
                        Fluttertoast.showToast(
                            msg: "您没有权限",
                            toastLength: Toast.LENGTH_SHORT,
                            gravity: ToastGravity.CENTER,
                            timeInSecForIos: 1,
                            textColor: Colors.black
                        );
                      }, child: new Row(

                        children: <Widget>[
                          new Icon(Icons.autorenew),
                          new Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              new Text("title1"),
                              new Text("subtitle1"),
                            ],
                          )

                        ],
                      ),),
                      flex: 20,
                    ),
                    Expanded(
                      child: new Text(""),
                      flex: 1,
                    ),
                    Expanded(
                      child: new GestureDetector(onTap: () {
                        Fluttertoast.showToast(
                            msg: "敬请期待",
                            toastLength: Toast.LENGTH_SHORT,
                            gravity: ToastGravity.CENTER,
                            timeInSecForIos: 1,
                            textColor: Colors.black
                        );
                      }, child: new Row(
                        children: <Widget>[
                          new Icon(Icons.autorenew),
                          new Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              new Text("title2"),
                              new Text("subtitle2"),
                            ],
                          )
                        ],

                      ),),
                      flex: 20,
                    )

                  ],
                ),
              ),
              new Container(child: new Text("新闻", style: _biggerFont),
                margin: const EdgeInsets.only(left: 20),)
              ,
              new NewsList(menu_code: news_menu_code)
            ],
          ),
              onRefresh: getListData)
      )
  )
  ;
}

这段代码的主要功能呢，就是为了处理上拉和下拉的手势（>5和<5仅仅是为了实现功能，如果需要精准判断手势提高体验的话还请自行设定），这段代码应该还是比较好懂的。

不过经过测试，GestureDetector仅仅能处理列表不能滑动的时候的事件，就是列表长度很短，短于屏幕，如果要处理超出屏幕的列表的坐标的话，就需要ScrollController来上场了。

至此，对于能滑动的下拉刷新--官方refresh，不能滑动的上拉下拉--GestureDetector，能滑动的上拉加载ScrollController，这三个组合完美实现上拉下拉功能。

ScrollController这个的实现也比较简单。

  ScrollController _scrollController = new ScrollController();
 
@override
  void initState() {
    super.initState();
//    getListData();
    _scrollController.addListener(() {
      print('滑动到了最底部' + _scrollController.position.maxScrollExtent.toString());
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        print('滑动到了最底部');
       
       if(!isLoading){
        moverlayEntry=creatOverlay(true);
         isLoading=true;
         Overlay.of(context).insert(moverlayEntry);
         getMoreData();
       }
       

      }
    });
  }


OverlayEntry creatOverlay(bool isBottom) {
    double heightPercent=0.2;
    if(isBottom){
      heightPercent=0.7;
    }
    OverlayEntry  overlayEntry =  new OverlayEntry(builder: (context) {
      return new Positioned(
          top: MediaQuery
              .of(context)
              .size
              .height * heightPercent,
          child: new Material(
              color: Colors.transparent,
              child: new Container(
                width: MediaQuery
                    .of(context)
                    .size
                    .width,
                alignment: Alignment.center,
                child: new Center(
                  child: new Card(
                    child: new Padding(
                      padding: EdgeInsets.all(5.0),
                      child: new Column(
                        children: <Widget>[
                          SizedBox(
                            height: 40,
                            width: 40,
                            child: CircularProgressIndicator(
                              backgroundColor: Colors.red,
                            ),
                          ),
                          new Text("loading")
                        ],
                      ),
                    ),
                  ),
                ),
              )
          ));
    });
    return overlayEntry;

  }

通过

_scrollController.position.pixels ==
    _scrollController.position.maxScrollExtent

来判断是否滑动到底部了，这里也贴出了来一个简易的"圈圈"吧，当然这个跟官方的出入很大，我也是今晚上才实现出来功能，对界面没有处理。如果有大佬实现一个自定义的CircularProgressIndicator，请一定通知我！！！

至此，上拉加载下拉刷新的功能基本已经实现了，不过还有一个小问题，就是可滑动的列表如果在最底端的时候，ScrollController也获取不到滑动的数据，如果谁有好的方案的话可以交流一下。

审核那么慢，顺遍把这个bug解决了，就是每次滑到最低端的时候，让它往上滑一点点，

_scrollController.addListener(() {

      print('滑动到了最底部' + _scrollController.position.maxScrollExtent.toString()+_scrollController.keepScrollOffset.toString());
      if (_scrollController.position.maxScrollExtent==_scrollController.position.pixels
          ) {
        print('滑动到了最底部');

       if(!isLoading){
         double _position =  _scrollController.position.maxScrollExtent-10;
         _scrollController.animateTo(_position, duration: Duration(seconds: 1),             
         curve:Curves.ease );
         
         isLoading=true;
         moverlayEntry=creatOverlay(true);
         Overlay.of(context).insert(moverlayEntry);
           getMoreData();
       }

     
//        getListData();
      }
    });

在确定loadmore之后，调用_scrollController.animateTo方法，让listview往上再滑动一小段距离，这样用户永远无法滑到最底端。完美解决这个问题，滑动距离可以根据需要自己调整。

zxnon
关注
专栏目录
常规化flutter上拉加载和下拉刷新
wangweiruning的博客
05-08 474
先看效果： import 'dart:async'; import 'package:flutter/material.dart'; import 'package:dio/dio.dart'; import 'NewsWebPage.dart'; import 'MaterialTapWidget.dart'; Dio dio = new Dio(); class Hom...
Flutter中实现下拉刷新与上拉加载更多
越陌度阡
01-08 7921
1. 下拉刷新 Flutter中提供了组件 RefreshIndicator用于下拉刷新。 其基本的实现方法是在该组件添加onRefresh事件，当用户下拉刷新时会触发该事件，在该事件中可以用调用一个延时任务Future.delayed( )，在延时任务的回调中重新请求数据即可。 2. 上拉加载更多 Flutter中主要通过使用 ListView.builder( )添加控制器来实现上拉加载更多。 其基本的实现方法是在该组件里添加控制器，在组件初始化时实例化ScrollController..
Flutter 下拉刷新、上拉加载
yang_6799的博客
12-01 4746
pull_to_refresh的简介与使用
Flutter中的 extended_nested_scroll_view 库：介绍与使用指南
最新发布
爱喝水程序员的博客
08-09 646
在开发Flutter应用时，处理复杂的滚动效果是一项常见的任务。Flutter提供了来实现可折叠的应用栏与滚动列表的结合，但在某些情况下，可能不够强大。为了解决这些问题，我们可以使用库，该库对进行了扩展，提供了更多的功能和更灵活的滚动控制。
flutter---上拉加载 下拉刷新
a875801的博客
03-20 588
转自https://blog.csdn.net/u011272795/article/details/82719640 import 'package:flutter/material.dart'; void main() => runApp(MaterialApp( home: MyHomePage(), )); class MyHomePage extends Statefu...
Flutter开发之——下拉刷新
2401_84121674的博客
04-05 1504
);},} ,return Center(child: Text(“数据${_list[index]}”),heightFactor: 1.5,);}, ),
flutter上拉刷新、下拉加载
qq_40742949的博客
09-30 1021
RefreshIndicator 该组件主要的作用是在下拉时实现刷新，具体看下组件参数的一些作用。 RefreshIndicator({ Key key, @required this.child, // 子组件，需要更新的组件列表 this.displacement = 40.0, // 刷新指示器离顶部的位置 @required this.onRefresh, // 下拉触发函数，该函数必须是 Future<void> this.color, // 设置指示器的颜色
Flutter 实现下拉刷新上拉加载的示例代码
08-25
Flutter 实现下拉刷新上拉加载的示例代码 Flutter 是一款 популяр的移动应用开发框架，它提供了丰富的 widgets 和工具，可以帮助开发者快速构建高性能的移动应用。今天，我们将介绍如何使用 Flutter 实现...
Flutter快学快用24讲--14 刷新加载：下拉刷新上拉加载，在 Flutter 中的实现
g_z_q_的博客
03-20 911
本课时介绍了刷新组件 RefreshIndicator 的一些基础属性，其次实践开发了下拉刷新和上拉加载更多功能，最后在页面基础上增加了一些优化体验的功能。学完本课时要掌握下拉刷新和上拉加载的知识，并且能够实践应用，其次需要了解通用组件的设计方法。下一课时我们将在 App 基础上完成个人页面，并且在个人页面增加红点提醒功能，丰富 App 整体功能。点击此链接查看本课时源码。
Flutter 之ListView实现下拉刷新和上拉加载更多
万小凡的专栏
09-01 1936
一、效果 二、实现 1、首先的创建ListView，之前有叙述 2、如果你是只需要下拉刷新，则直接用 RefreshIndicator包裹ListView，然后去实现onRefresh方法即可 3、如果你还需要加载更多，则需要实现ScrollController然后去监听他的滑动事件，然后判断是否到达底部 三、源代码 class StarPage extends StatefulWidget { const StarPage({Ke...
Flutter学习，简单demo应用，网络请求，list列表下拉刷新，上拉加载。
04-13
Flutter学习，简单demo应用，网络请求，list列表下拉刷新，上拉加载。 网络封装，下拉刷新，上拉加载，图片加载
Flutter RefreshIndicator 下拉刷新
03-29
RefreshIndicator FlutterSDK提供的下拉刷新组件，但是没有上拉加载，需要上拉加载可查看 下拉刷新上拉加载Demo。 大家知道，所有的Scrollable都是可滚动的，但是如果没有足够内容，Scrollable是不可滚动的。Scrollable不可滚动时RefreshIndicator下拉功能不可用。这时官方告诉我们要将Scrollable的physics属性设置为AlwaysScrollableScrollPhysics。
flutter_refresh:Flutter插件，用于通过下拉菜单刷新每个滚动视图
05-02
flutter_refresh Flutter插件，用于通过下拉菜单刷新每个滚动视图。 展示案例 路线图 请参阅： 变更日志 请参阅： 快速开始 安装 1添加 flutter_refresh : ^0.0.1 到您的pubspec.yaml并运行 flutter packages get 在项目的根目录中。 2添加 import 'package:flutter_refresh/flutter_refresh.dart'; 并编写如下代码： Future<Null> onFooterRefresh() { return new Future.delayed(new Duration(seconds: 2), () { setState(() { _itemCount += 10; }); }); } Fut
【Flutter】列表高级功能 ( RefreshIndicator 下拉刷新组件 ).zip
08-27
【Flutter】列表高级功能 ( RefreshIndicator 下拉刷新组件 ) https://hanshuliang.blog.csdn.net/article/details/119945017 博客源码快照
分享轮子-flutter下拉刷新上拉加载
weixin_33858336的博客
05-08 148
flutter下拉上拉组件轮子 什么是flutter? 首先说下flutter,估计这个应该挺多人没听过flutter这个框架,它是一个google推出的跨平台的移动应用UI框架,和React Native是同样的目的,支持三大平台:Android,Ios,还有一个是google新出的系统,忘了叫什么...本人React Native也是用过一点了,只不过没深入研究。总的来说,flutter这个框...
Flutter交互实战－即刻App探索页下拉＆拖拽效果
HitenDev的博客
03-19 858
Flutter最近比较热门，但是Flutter成体系的文章并不多，前期避免不了踩坑；我这篇文章主要介绍如何使用Flutter实现一个比较复杂的手势交互，顺便分享一下我在使用Flutter过程中遇到的一些小坑，减少大家入坑； 先睹为快 本项目支持ios和android平台，效果如下 对了，顺便分享一下生成gif的小窍门，建议用手机自带录屏功能导出mp4文件...
2021年Flutter中实现下拉刷新与上拉加载更多
码蝗的博客
03-23 754
1. 下拉刷新 Flutter中提供了组件 RefreshIndicator用于下拉刷新。 其基本的实现方法是在该组件添加onRefresh事件，当用户下拉刷新时会触发该事件，在该事件中可以用调用一个延时任务Future.delayed( )，在延时任务的回调中重新请求数据即可。 2. 上拉加载更多 Flutter中主要通过使用 ListView.builder( )添加控制器来实现上拉加载更多。 其基本的实现方法是在该组件里添加控制器，在组件初始化时实例化ScrollController类型..
Flutter中下拉刷新功能的实现
我叫柱子哥
11-19 2309
效果。我们知道Flutter实现了两种风格的脚手架，一种是iOS风格的，一种是material风格的。刷新组件也一样,Flutter中Materi风格的widget名称叫做RefreshIndicator,iOS风格的widget名称叫做CupertinoSliverRefreshControl。
Flutter ListView 实现上拉加载与下拉刷新详解
在Flutter中，实现ListView的上拉加载更多和下拉刷新功能是一项常见的需求，特别是在数据加载场景下，用户体验的优化至关重要。本文将详细介绍如何在Flutter ListView中添加这两种交互效果。 首先，我们来看下如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值