FLUTTER 自己动手对LISTVIEW添加下拉刷新

最新推荐文章于 2024-04-10 22:46:59 发布
最新推荐文章于 2024-04-10 22:46:59 发布
阅读量670 收藏 1
点赞数
分类专栏： flutter 文章标签： flutter 下拉刷新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/importIng/article/details/95380148
版权

material实际上自带有下拉刷新控件，不过既然是学习就自己实现一个，这里是实现一个IOS中比较常见的tableviewHeader式的下拉刷新控件 。效果类似于MJNormalHeader。
MJHEADER

先踩个坑

在做下拉刷新的时候，我首先是利用滚动控件拉出滚动范围时，利用offset做处理。 也实现了，在IOS端listview有弹簧效果，因此会被拉出负的offset,但是在安卓端运行时弹簧效果却会被系统的下拉特效覆盖掉 。
因此在IOS端运行很好的下拉事件却在安卓端无法完成功能。
安卓下拉
在这里插入图片描述

接下来实现下拉刷新

既然无法使用弹簧效果来实现，那么换一个思路，在listview的头部添加一个padding占位。这样就只需要改动padding的高度就可以实现将listview拉出滚动范围的效果了。

  1. 先用自定义statefulWidget包装一下listview,并在顶部合适的位置放一个指示下拉刷新的text,设置两个属性分别用来给内部的listview传递元素数量和build,封装一个方法，用以调起刷新事件，并将结束刷新的事件传递出去
typedef headerRefersh =
最低0.47元/天 解锁文章
importIng
关注
专栏目录
Flutter 之ListView实现下拉刷新和上拉加载更多
万小凡的专栏
09-01 1939
一、效果 二、实现 1、首先的创建ListView，之前有叙述 2、如果你是只需要下拉刷新，则直接用 RefreshIndicator包裹ListView，然后去实现onRefresh方法即可 3、如果你还需要加载更多，则需要实现ScrollController然后去监听他的滑动事件，然后判断是否到达底部 三、源代码 class StarPage extends StatefulWidget { const StarPage({Ke...
Flutter学习，简单demo应用，网络请求，list列表下拉刷新，上拉加载。
04-13
Flutter学习，简单demo应用，网络请求，list列表下拉刷新，上拉加载。 网络封装，下拉刷新，上拉加载，图片加载
Flutter25.listview下拉刷新
augfun的博客
06-28 353
ex import 'dart:math'; import 'package:flutter/material.dart'; void main() => runApp(MaterialApp( home: HomePage(), )); class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageS
带有下拉刷新功能的Listview控件
白雾霾
07-02 118
效果图如下 1.原理 其实就是继承了Listview控件，为其默认加一个header，这个header就是带箭头的那些东西。然后overrideonTouchEvent函数，根据滑动过程中y坐标的变化来动态修改header的状态（包括箭头的方向和文字提示），其他用法和普通的Listview一样。 public class PullToRefreshListView extends L...
Flutter ListView 下拉刷新上拉加载更多
冬无雪的博客
06-30 411
在Flutter中系统已经为我们提供了google material design的刷新功能 , 样式与原生Android一样. 我们可以使用RefreshIndicator组件来实现Flutter中的下拉刷新 使用方法： import 'package:flutter/material.dart'; class PullToRefreshListViewPage extends StatefulWidget { @override State<StatefulWidget> crea
listView下拉刷新加载数据
热门推荐
傲慢的上校的专栏
03-07 3万+
在2月27号的时候，完成listView滑动刷新代码，昨天的时候，完成listView下拉刷新(sina微博Android客户端效果)效果的解析，其实在三个例子当中，感觉最好的应该是listView下拉刷新(sina微博Android客户端效果)里面的代码，今天进行第三个例子的解析，其中代码中添加了很多注释，所以文中代码和以前上传的代码注释方面会有很多不同，在文章的下面，会提供最新的代码下载。 
flutter_pulltorefresh：提供给flutter滚动组件的小部件下拉刷新和上拉负载
02-21
提供给flutter滚动组件的小部件可下拉刷新并拉起load.support android和ios。 如果您是中国人，请单击此处（） ： 特征 拉负载并拉刷新 它几乎适合所有Scroll组件，例如GridView，ListView ... 提供默认指标和属性...
Flutter-Listview实现上拉加载和下拉刷新
IT技术专栏
07-31 431
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:video_player/video_player.dart'; void main() { runApp(new MaterialApp( title: 'Container demo'...
上拉和下拉刷新列表（自定义listview）
04-05
NULL 博文链接：https://xiaoming123123.iteye.com/blog/1520212
listView官方上拉加载，下拉刷新
05-14
开发项目过程中基本都会用到listView的下拉刷新和上滑加载更多，之前大家最常用的应该是pull to refresh或它的变种版吧，google官方在最新的android.support.v4包中增加了一个新类SwipeRefreshLayout，地址 这个类的作用就是提供官方的下拉刷新，并且效果相当不错，而上拉加载更多则用我们自定义的listview，也是相当简单。
Flutter入门进阶之旅（十五）ListView下拉刷新&上拉加载更多
谢栋的专栏
04-12 1862
上期回顾 在上一篇博文中我们在介绍ListView跟GridView的时候，限于篇幅问题我们只讲解了此二者的简单的使用方法说明，关于一些在实际开发中更常用的细节问我们并没有来得及跟大家展开讲解，比如我们在使用长列表的时的下拉刷新或者上拉加载更多的逻辑处理，今天的这篇文章我们就来着重分析一下在flutter中我们是如果实现长列表的下拉刷新跟上拉加载更多操作的。 ...
Flutter listview下拉刷新 上拉加载更多 功能实现
卓原的进化之旅
09-16 2万+
下拉刷新 在Flutter中系统已经为我们提供了google material design的刷新功能 , 样式与原生Android一样. 我们可以使用RefreshIndicator组件来实现Flutter中的下拉刷新，下面们还是先来看下如何使用吧 RefreshIndicator 构造方法: const RefreshIndicator({ Key key, ...
【Flutter】ListView 列表高级功能 ( RefreshIndicator 下拉刷新组件 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-27 2807
一、下拉刷新组件、 二、下拉刷新代码示例、 三、相关资源、
Flutter开发之——下拉刷新
最新发布
2401_84123265的博客
04-10 401
对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，从来都是我们去适应环境，而不是环境来适应我们！当你有了学习线路，学习哪些内容，也知道以后的路怎么走了，理论看多了总要实践的最后，互联网不存在所谓的寒冬，只是你没有努力罢了！《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！境，而不是环境来适应我们！**当你有了学习线路，学习哪些内容，也知道以后的路怎么走了，理论看多了总要实践的。
ListView实现下拉刷新
李泽正的专栏
05-05 561
APP中是listview布局的界面一般都会有下拉刷新这个功能，很多三方的框架已经实现了，这儿是一个下拉刷新的基本实现。 主要模块： 1.listview中存在addHeaderView(View v)方法，该方法就是在listview头部添加一个自定义的view。（下拉刷新界面就是写在该内容当中） 2.下拉刷新分为下拉中，刷新中，没有下拉三个过程，处理好各个过程的关系。 3.下拉和刷新过程
Flutter 实现支持上拉加载和下拉刷新的 ListView
O_time的博客
02-01 1124
  Hellow 大家好，最近在 flutter 中用到了列表展示数据，并且实现了上拉加载和下拉刷新，当时就想如何把他们抽象出来，形成一个 widget ，于是就有了下面这篇文章。 先看下效果图 具体实现 下拉刷新使用的是：RefreshIndicator，上拉加载是用的 ScrollController 的监听。代码如下： import 'package:flutter/material.da...
Flutter - ListView/GirdView 上下拉刷新组件
iotjin的专栏
11-24 1133
Flutter - ListView/GirdView 上下拉刷新组件
Flutter ListView 实现上拉加载与下拉刷新详解
在Flutter中，实现ListView的上拉加载更多和下拉刷新功能是一项常见的需求，特别是在数据加载场景下，用户体验的优化至关重要。本文将详细介绍如何在Flutter ListView中添加这两种交互效果。 首先，我们来看下如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值