flutter 项目实战八 下拉刷新 上拉加载

最新推荐文章于 2024-07-27 15:14:29 发布
最新推荐文章于 2024-07-27 15:14:29 发布
阅读量1.1k 收藏 2
点赞数 1
分类专栏： flutter flutter android studio 文章标签： flutter flutter 上拉下拉
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41191134/article/details/88891857
版权

本项目借用 逛丢 网站的部分数据，仅作为 flutter 开发学习之用。 逛丢官方网址：https://guangdiu.com/

flutter windows开发环境设置

flutter 项目实战一 新建 flutter 项目

flutter 项目实战二 网络请求

flutter 项目实战三 json数据解析以及Gson格式化flutter 项目实战二 网络请求

flutter 项目实战四 列表数据展示

flutter 项目实战五 item 点击跳转，webview加载

flutter 项目实战六 drawer侧边栏

flutter 项目实战七 bottomNavigationBar

flutter 项目实战八 下拉刷新 上拉加载

flutter 项目实战九 小时风云榜

在实战四中我们展示了数据列表，但是由于数据量的以及新数据的问题，一般我们都会给列表加上下拉刷新以及上拉加载的功能，来实现加载更多数据以及刷新新的数据。

flutter 提供了  ScrollController 来监听 listview 的滑动状态，我们未listview.build添加属性

controller: _scrollController,

在 IndexWidget 的构造方法中初始化 _scrollController，增加监听

_scrollController.addListener((){
    var pix=_scrollController.position.pixels;
    var max=_scrollController.position.maxScrollExtent;
    if(pix==max){
      //已下拉到底部，调用加载更多方法
      _loadMoreData();
    }
});

_scrollController.position.pixels指的是当前列表滑动到底部的长度，_scrollController.position.maxScrollExtent为列表的最大长度，当两者相等时，即可认为列表滑动到了底部。为了在滑动到底部时展示一个加载的伪动画效果，我们在列表最下面添加一个圆形的进度条，让其模拟正在加载动画。修改 listview.build的内容：

ListView.builder(
  itemCount: _listData==null?0:_listData.length+1,//此处 +1 是为了在最后添加一个progress
  itemBuilder: (content,index){
    return _listItem(index);
  },
  controller: _scrollController,)

_listItem 方法代码为:

Widget _listItem(int index){
  if(index==_listData.length){//最后一个item为加载条
    return Center(
      child: Container(
        height: 20,
        width: 20,
        margin: EdgeInsets.all(5),
        child: CircularProgressIndicator(//加载条
          backgroundColor: Colors.green,
        ),
      ),
    );
  }else{
    RstData data=_listData[index];
    return GestureDetector(
      child: IndexItem(rstData: data,),
      onTap:(){ _itemClick(data);},
    );
  }
}

上拉的方法已经完成了，下面开始添加下拉刷新的部分。

flutter 提供 RefreshIndicator 来帮助我们实现这个功能。RefreshIndicator 必须要实现 onRefresh 属性方法，注意此处的onRefresh 方法是有返回值的，我们用 Future<Null> 作为返回值即可。

RefreshIndicator(
    child: ListView.builder(
      itemCount: _listData==null?0:_listData.length+1,//此处 +1 是为了在最后添加一个progress
      itemBuilder: (content,index){
        return _listItem(index);
      },
      controller: _scrollController,
    ), 
    onRefresh: _onRefresh
),

当使用上拉下拉时，就会涉及到页码的问题，即当前加载到了第几页，所以我们需要定义一个 int 类型的pager 来记录，并对获取到的数据进行一定的操作。

void _getGuangdiuIndexData(FormData formData) async{
  String url="getlist.php";
  Response resp=await HttpUtil().post(url,data: formData).then((resp){
    RespResult respResult=RespResult.fromJson(resp.data);
    var data=_listData;
    if(pager==1){// 只加载获取到的数据
      data=respResult.data;
    }else{
      data.addAll(respResult.data);//将获取的数据追加到原有数据的后面
    }
    setState(() {
      _listData=data;
    });
  });
}

由于侧边栏的存在以及侧边栏的点击涉及到列表数据的分类，所以需要增加 type以及typeValue对数据类型加以记录。

下面给出整个修改后的代码：

import 'package:flutter/material.dart';
import 'table/resp_result.dart';
import 'util/http_util.dart';
import 'package:dio/dio.dart';
import 'widget/index_item.dart';
import 'ItemInfoDetail.dart';
import 'configure/type.dart';

class HomeIndex extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return IndexWidget();
  }
}

class IndexWidget extends State<HomeIndex>{

  List<RstData> _listData;//设置列表数据
  GlobalKey<ScaffoldState> _globalKeyState=GlobalKey();
  String title="首页";
  ScrollController _scrollController=ScrollController();
  String type="";
  String typeValue="";
  int pager=1;

  IndexWidget(){
    _scrollController.addListener((){
        var pix=_scrollController.position.pixels;
        var max=_scrollController.position.maxScrollExtent;
        if(pix==max){
          //已下拉到底部，调用加载更多方法
          _loadMoreData();
        }
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: Text(title,style: TextStyle(color: Colors.white),),
          leading: IconButton(
              icon: Icon(Icons.menu,color: Colors.white,),
              onPressed: (){
                _changeDrawer();//切换drawer的关闭打开
              }),
          backgroundColor: Colors.green[500],
        ),
        body: _listInfos(),
    );
  }

  //list列表
  Widget _listInfos(){
    return Scaffold(
      key: _globalKeyState,
      body: RefreshIndicator(
          child: ListView.builder(
            itemCount: _listData==null?0:_listData.length+1,//此处 +1 是为了在最后添加一个progress
            itemBuilder: (content,index){
              return _listItem(index);
            },
            controller: _scrollController,
          ),
          onRefresh: _onRefresh
      ),
      drawer: _setDrawerList(),
    );
  }

  //item
  Widget _listItem(int index){
    if(index==_listData.length){
      return Center(
        child: Container(
          height: 20,
          width: 20,
          margin: EdgeInsets.all(5),
          child: CircularProgressIndicator(
            backgroundColor: Colors.green,
          ),
        ),
      );
    }else{
      RstData data=_listData[index];
      return GestureDetector(
        child: IndexItem(rstData: data,),
        onTap:(){ _itemClick(data);},
      );
    }
  }

  //切换侧边栏的打开与关闭
  void _changeDrawer(){
    if(_globalKeyState.currentState.isDrawerOpen){
      _globalKeyState.currentState.openEndDrawer();
    }else{
      _globalKeyState.currentState.openDrawer();
    }
  }

  //侧边栏列表
  Widget _setDrawerList(){
    var type=index_type;
    return Container(
      width: 200,
      color: Colors.white,
      child: ListView.builder(
        itemCount: type.length,
        itemBuilder: (context,index){
          Map<String,String> map=type[index];
          return _drawerItem(map);
        },
      ),
    );
  }
  //侧边栏 item
  Widget _drawerItem(Map<String,String> map){
    if(map["title"]=="=="){
      return Container(
        height: 1,
        decoration: BoxDecoration(
          color: Colors.black54,
        ),
      );
    }else{
      return GestureDetector(
        child: Container(
          height: 35,
          color: Colors.white,
          padding: EdgeInsets.only(left: 5),
          alignment: Alignment.centerLeft,
          child: Text(map["title"]),
        ),
        onTap: (){
          _drawerItemClick(map);
        },
      );
    }
  }
  //侧边栏点击事件
  void _drawerItemClick(Map<String,String> map){
    FormData formData=FormData();
    if(_listData!=null && _listData.length>0){
      formData.add("markid", "${_listData[0].id}");
    }else {
      formData.add("markid", "5685521");
    }
    if(map["type"]=="all"){
      setState(() {
        title = "首页";
      });
      type="";
    }else {
      setState(() {
        title = "首页-${map["title"]}";
      });
      type=map["type"];
      if (type == "hot") {
        typeValue="1";
        formData.add("onlyhots", typeValue);
      } else if (type == "mall") {
        typeValue=map["mall"];
        formData.add("mall", typeValue);
      } else if (type == "cate") {
        typeValue=map["cate"];
        formData.add("cate", typeValue);
      }
    }
    pager=1;//页码归一
    _getGuangdiuIndexData(formData);
    _changeDrawer();
  }

  void _itemClick(RstData data){
    Navigator.push(context, MaterialPageRoute(builder: (cx)=>ItemInfoDetail(id: data.id,title: data.title,)));
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _onRefresh();
  }

  //加载更多
  void _loadMoreData(){
    FormData formData=FormData();
    if(_listData!=null && _listData.length>0){
      formData.add("sinceid", _listData[_listData.length-1].id);
    }else{
      formData.add("sinceid", "5685521");
    }
    if(type!=""){
      formData.add(type, typeValue);
    }
    pager++;
    _getGuangdiuIndexData(formData);
  }

  //下拉刷新
  Future<Null> _onRefresh() async {
    pager=1;
    FormData formData=FormData();
    if(_listData!=null && _listData.length>0){
      formData.add("markid", _listData[0].id);
    }else {
      formData.add("markid", "5685521");
    }
    _getGuangdiuIndexData(formData);
    return null;
  }

  void _getGuangdiuIndexData(FormData formData) async{
    String url="getlist.php";
    Response resp=await HttpUtil().post(url,data: formData).then((resp){
      RespResult respResult=RespResult.fromJson(resp.data);
      var data=_listData;
      if(data==null){
        data=respResult.data;
      }else {
        if (pager == 1) {
          data.clear();
        }
        data.addAll(respResult.data);
      }
      setState(() {
        _listData=data;
      });
      if(pager==1){
        _scrollController.position.moveTo(0);//滑动到最顶端
      }
    });
  }

}

app运行效果图：

  

哈哈 gif 没做好，有点糊。

码云 git 下载

kotlin版本的源码下载：git下载地址

禾枇-余
关注
专栏目录
2021年Flutter中实现下拉刷新与上拉加载更多
码蝗的博客
03-23 760
1. 下拉刷新 Flutter中提供了组件 RefreshIndicator用于下拉刷新。 其基本的实现方法是在该组件添加onRefresh事件，当用户下拉刷新时会触发该事件，在该事件中可以用调用一个延时任务Future.delayed( )，在延时任务的回调中重新请求数据即可。 2. 上拉加载更多 Flutter中主要通过使用 ListView.builder( )添加控制器来实现上拉加载更多。 其基本的实现方法是在该组件里添加控制器，在组件初始化时实例化ScrollController类型..
Flutter 下拉刷新、上拉加载
yang_6799的博客
12-01 4854
pull_to_refresh的简介与使用
Flutter 实现下拉刷新和上拉加载
weixin_44911775的博客
05-26 5324
参考 Flutter下拉刷新和上拉加载更多 下拉刷新 上拉加载更多 下拉刷新直接用flutter自带的控件RefreshIndicator组件即可，上拉加载可以通过ListView 中的ScrollController 属性，根据 ListView 的位置来判断是否滑动到了底部来做加载更多的处理 下面用们用到的json数据接口为：https://jsonplaceholder.typicode.com/posts/1/comments 下拉刷新 就是在我们上一节讲到的解析的列表外面嵌套一个RefreshIn
01_Flutter之下拉刷新和上拉加载
gzx的博客
09-05 1474
);?false;} else {});});
Flutter 项目实战 下拉刷新、上拉加载 九
我很好
01-06 5184
下拉刷新和上拉加载更多可以更好的分页加载数据.....
Flutter 项目实战 下拉刷新、上拉加载 九(1)
2401_84132272的博客
04-17 919
简单定义loadingText: ‘加载中…’,noDataText: ‘暂无数据’,failedText: ‘加载失败’,idleText: ‘上拉加载’,. 自定义上拉加载根据不同的加载状态显示不同的提示;设置底部自定义视图点击可以加载更多数据 .mode) {///上拉加载提示///是否加载中///是否可点击加载更多loadTips = ‘上拉加载更多数据’;loadTips = ‘数据加载中…’;loadTips = ‘加载失败,上拉加载更多数据’;
Flutter 实现下拉刷新，上拉加载更多，宽高适配方案
高光的博客
03-07 388
实现下拉刷新RefreshIndicator 必须返回Future 可以使用Future.delayed来保持刷新图标的时间 Future<void> _onRefresh() async{ /* 2秒后执行 */ await Future.delayed(Duration(milliseconds: 2000),(){ _getData(_nowPage...
分享轮子-flutter下拉刷新上拉加载
weixin_33858336的博客
05-08 158
flutter下拉上拉组件轮子 什么是flutter? 首先说下flutter,估计这个应该挺多人没听过flutter这个框架,它是一个google推出的跨平台的移动应用UI框架,和React Native是同样的目的,支持三大平台:Android,Ios,还有一个是google新出的系统,忘了叫什么...本人React Native也是用过一点了,只不过没深入研究。总的来说,flutter这个框...
flutter PageView 下拉刷新 与 上拉加载更多
代码小疯子
07-05 3284
import 'dart:math'; import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_x/base/b...
Flutter自定义下拉刷新时的loading样式的方法详解
最新发布
chinaherolts2008的博客
07-27 71
Flutter中的下拉刷新，我们通常RefreshIndicator，可以通过backgroundColor，color或strokeWidth设置下拉刷新的颜色粗细等样式，但如果要自定义自己的widget，RefreshIndicator并没有暴露出对应的属性，那如何修改呢？目前代码中写死了默认高度55（参照我完整代码的396行），如果传入的自定义loading高度大于55，松开时会有一点弹跳效果，暂时没有找到更好的解决方案，如果大家有更好的方案欢迎讨论一下。以下是完整代码，有注释的部分才是修改部分。
Flutter 的加载动画这么玩更有趣
Flutter 跨平台技术研究
04-22 1263
搞一些有趣的动画玩玩，这样在 loading 的时候，如果加载是时间长，至少不会让等待的过程那么无聊。
Flutter下拉刷新，上拉加载更多数据
weixin_34379433的博客
07-08 406
下拉刷新 很简单，直接使用 RefreshIndicator 组件， onRefresh 为重新获取数据的方法 Widget build(BuildContext context) { return Scaffold( body: Container( padding: EdgeInsets.all(2.0), child: Refres...
flutter实战——实现下拉刷新和加载更多功能
baorant24的博客
04-10 1434
问题背景 移动端日常开发过程中，下拉刷新和加载更多是很常见的功能点，现在一起看下flutter是如何实现下拉刷新和加载更多的。 问题分析 1、通过Dio框架获取网络请求 var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20...
Flutter 下拉刷新上拉加载（电影app客户端案例）
xq610928的博客
08-30 707
前言： 各位同学大家好，很久没有更新文章了，最近看了下flutter的下拉刷新和上拉加载，今天有时间就把之前帮朋友做的毕业设计的做到一半的电影app 加上 ，下拉刷新和上拉加载的功能 分享给大家，那么废话不多说我们正式开始 准备工作： 需要安装flutter的开发环境：大家可以去看看之前的教程： 1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc8718 2 mac系统flutter开发环境安装教程：https://www.jianshu.c
Flutter 自定义 轮播图的实现
O_time的博客
02-21 1980
  在 上篇文章–Flutter 实现支持上拉加载和下拉刷新的 ListView 中，我们最终实现的效果是在 listView 上面留下了一段空白，本意是用来加载轮播图的，于是今天就开发了一下，希望能给各位灵感。 一 、效果如下 说一下大体思路    其实图片展示是用的 PageView ，然后，下面的指示器 是用的 TabPageSelector ，当然整体是用 Stack 包裹起来的。 1、...
Flutter 中的下拉刷新和上拉加载
小天空的博客
07-26 1268
在Flutter的官方SDK中给我们提供了下拉刷新的组件RefreshIndicator，但是没有提供上拉分页加载更多的组件。不过不用担心，在Flutter的ListView组件中，有一个ScrollController属性，它就是专门用来控制ListView滑动事件，在这里我们可以根据ListView的位置来判断是否滑动到了底部来做加载更多的处理。 当然，我们是可以找一些第三方的库来实现上拉加载下拉刷新的效果的，比如flutter_easyrefresh这个第三方组件，但是我并不推荐flutter_ea
Flutter中下拉刷新功能的实现
我叫柱子哥
11-19 2351
效果。我们知道Flutter实现了两种风格的脚手架，一种是iOS风格的，一种是material风格的。刷新组件也一样,Flutter中Materi风格的widget名称叫做RefreshIndicator,iOS风格的widget名称叫做CupertinoSliverRefreshControl。
flutter上拉刷新、下拉加载
qq_40742949的博客
09-30 1041
RefreshIndicator 该组件主要的作用是在下拉时实现刷新，具体看下组件参数的一些作用。 RefreshIndicator({ Key key, @required this.child, // 子组件，需要更新的组件列表 this.displacement = 40.0, // 刷新指示器离顶部的位置 @required this.onRefresh, // 下拉触发函数，该函数必须是 Future<void> this.color, // 设置指示器的颜色
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值