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

于 2024-05-04 17:11:49 发布
阅读量1k 收藏 20
点赞数 18
分类专栏： 程序员 文章标签： flutter java 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84149836/article/details/138445551
版权
本文介绍了如何在 Flutter 项目中实现自定义的下拉刷新和上拉加载更多功能，包括不同加载状态下的图标和提示文字设置，以及自定义底部样式。同时探讨了列表滚动优化，通过监听滚动状态来提高列表性能。
摘要由CSDN通过智能技术生成

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: ‘上拉加载’,

);

}

. 自定义上拉加载

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

最低0.47元/天 解锁文章
2401_84149836
关注
  • 18
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Flutter】Flutter 使用 pull_to_refresh 实现下拉刷新和上拉加载
Code Metaverse
09-11 1826
`pull_to_refresh` 是一个为 Flutter 滚动组件提供的下拉刷新和上拉加载的小部件。它支持 Android 和 iOS 平台。这个包提供了几乎所有的滚动小部件，如 GridView、ListView 等。它还提供了默认的指示器和属性的全局设置，支持 Android 和 iOS 默认的 ScrollPhysics，可以控制 overScroll 距离，自定义弹簧动画、阻尼、速度等。
Flutter 给列表增加下拉刷新和上滑加载更多功能
Flutter 跨平台技术研究
11-19 1607
在实际的 App 中，下拉刷新和上滑加载更多是非常常见的交互形式。在 Flutter 中，有 flutter_easyrefresh开源插件用于实现下拉刷新和上滑加载更多。本篇介绍了有状态组件和 flutter_easyrefresh 的基本应用，同时使用模拟的方式完成了异步数据加载。 有状态组件 当 Flutter 的页面需要动态更新数据的时候，就会涉及到 UI 组件需要根据数据变化更新，此时也就意味着组件有了“状态”。这就类似 React 的类组件和函数组件（只是后续 React 使用了勾子函数实现.
01_Flutter之下拉刷新和上拉加载
gzx的博客
09-05 1408
);?false;} else {});});
2021年Flutter中实现下拉刷新与上拉加载更多
码蝗的博客
03-23 745
1. 下拉刷新 Flutter中提供了组件 RefreshIndicator用于下拉刷新。 其基本的实现方法是在该组件添加onRefresh事件，当用户下拉刷新时会触发该事件，在该事件中可以用调用一个延时任务Future.delayed( )，在延时任务的回调中重新请求数据即可。 2. 上拉加载更多 Flutter中主要通过使用 ListView.builder( )添加控制器来实现上拉加载更多。 其基本的实现方法是在该组件里添加控制器，在组件初始化时实例化ScrollController类型..
Flutter如何实现下拉刷新和上拉加载更多
热门推荐
黄孝果的博客
01-02 1万+
效果 下拉刷新 如果实现下拉刷新，必须借助RefreshIndicator，在listview外面包裹一层RefreshIndicator，然后在RefreshIndicator里面实现onRefresh方法。 body: movieList.length == 0 ? new Center(child: new CircularProgressIndicator()...
Flutter 入门与实战（六）：给列表增加下拉刷新和上滑加载更多功能
最新发布
2401_84149743的博客
04-17 684
对于很多初中级Android工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。整理的这些架构技术希望对Android开发的朋友们有所参考以及少走弯路，本文的重点是你有没有收获与成长，其余的都不重要，希望读者们能谨记这一点。下面是部分资料截图，诚意满满：特别适合有开发经验的Android程序员们学习。不论遇到什么困难，都不应该成为我们放弃的理由！如果你看到了这里，觉得文章写得不错就给个赞呗？《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》
Flutter如何实现下拉刷新和上拉加载更多，阿里巴巴android开发手册
m0_65511992的博客
12-26 215
return null; } 异步加载数据，注意：在Flutter中刷新数据使用的是setState，不然无效，数据不会刷新；数据的获取需要使用[]取值，不能使用对象“ . ”的取值方法！ //加载列表数据 loadMoreData() async { this.currentPage++; var start = (currentPage - 1) * pageSize; var url = “https://api.douban.com/v2/movie/movieType?start=movieTyp
flutter开发实战-下拉刷新与上拉加载更多实现
一名开发者
10-16 1387
EasyRefresh可以在Flutter应用程序上轻松实现下拉刷新和上拉加载。它几乎支持所有Flutter Scrollable小部件。它的功能与安卓的SmartRefreshLayout非常相似，也吸收了许多第三方库的优势。EasyRefresh集成了各种风格的页眉和页脚，但它没有任何限制，您可以轻松自定义。使用Flutter强大的动画，即使只是一个简单的控制也可以完成。EasyRefresh的目标是为Flutter创建一个强大、稳定、成熟的pull-to-refresh框架。
Flutter 实现下拉刷新，上拉加载更多，宽高适配方案
高光的博客
03-07 310
实现下拉刷新RefreshIndicator 必须返回Future 可以使用Future.delayed来保持刷新图标的时间 Future<void> _onRefresh() async{ /* 2秒后执行 */ await Future.delayed(Duration(milliseconds: 2000),(){ _getData(_nowPage...
Flutter学习-自定义列表组件（上拉加载、下拉刷新）
Samle的博客
03-28 3227
参数说明 参数 默认值 说明 DataForm 数据列表[{},{}……] FrontHeight 50.0 前置高度，避开搜索栏 pullup 上拉回调函数 dropdown 下拉回调函数 onPressed 引用列表单元组件中使用的点击回调函数 onTap 引用列表单元组件中使用的点击回调函数 使用参考 配合GetX的StateMixin一起使用，等数据加载完成后再渲染列表页面，可以参考：参考链接一 class WaresView extends.
Flutter 实现下拉刷新和上拉加载
weixin_44911775的博客
05-26 5300
参考 Flutter下拉刷新和上拉加载更多 下拉刷新 上拉加载更多 下拉刷新直接用flutter自带的控件RefreshIndicator组件即可，上拉加载可以通过ListView 中的ScrollController 属性，根据 ListView 的位置来判断是否滑动到了底部来做加载更多的处理 下面用们用到的json数据接口为：https://jsonplaceholder.typicode.com/posts/1/comments 下拉刷新 就是在我们上一节讲到的解析的列表外面嵌套一个RefreshIn
flutter 如何自定义一个loadmore / 加载更多
weixin_33757609的博客
09-24 356
写在前面 这类的库在pub上有很多 我为什么要自定义呢 首先是项目需要，并且这种库普适性高，抽取出来今后复用也方便点 另外记录一下编码思路,方便后续查看 pub地址 pub国内镜像 github 使用说明 导入说明看这里 或 中文镜像 看看构造方法 一共5个属性 child是ListView onLoadMore是加载更多时的回调,由外部实现 isFinish 加载完成 delegate是一个抽...
Flutter下拉刷新和上拉加载更多
m0_46527751的博客
01-24 2325
Flutter下拉刷新和上拉加载更多下拉刷新上拉加载更多 下拉刷新直接用flutter自带的控件RefreshIndicator组件即可，上拉加载可以通过ListView 中的ScrollController 属性，根据 ListView 的位置来判断是否滑动到了底部来做加载更多的处理 下面用们用到的json数据接口为：https://jsonplaceholder.typicode.com/posts/1/comments 下拉刷新 就是在我们上一节讲到的解析的列表外面嵌套一个RefreshIndicat
flutter实现列表下拉刷新上拉加载
a646639956的博客
03-30 573
在flutter中有一个RefreshIndicator，它是一个下拉刷新的widget，通过它实现列表的下拉刷新 定义RefreshIndicator。并且包裹ListView body: RefreshIndicator( onRefresh: _handleRefresh, child: ListView( children: _buildList(), ), ) 当下拉时，触发_ha
Flutter 上拉加载 下拉刷新的简单实现
ZR915的博客
08-19 996
最近学了一下flutter，下班后仿着现在做的app用flutter做了主页的几个新闻数据，用到刷新加载的时候，想着自己手动实现一下。 实现方法为：官方refresh+ScrollController+GestureDetector。 用了官方的pull to refresh ,不过这个东西限制条件很多，连基本的功能都无法完全实现，限制归限制，该用的时候还是得用它的，不然自己完全实现起来有点费...
Flutter中实现下拉刷新与上拉加载更多
wilL-my的博客
02-01 276
Flutter中实现下拉刷新与上拉加载更多 - 云+社区 - 腾讯云其基本的实现方法是在该组件添加onRefresh事件，当用户下拉刷新时会触发该事件，在该事件中可以用调用一个延时任务Future.delayed( )，在延时任...https://cloud.tencent.com/developer/article/1772193 ...
Flutter ListView 实现上拉加载与下拉刷新详解
在Flutter中，实现ListView的上拉加载更多和下拉刷新功能是一项常见的需求，特别是在数据加载场景下，用户体验的优化至关重要。本文将详细介绍如何在Flutter ListView中添加这两种交互效果。 首先，我们来看下如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值