Flutter移动电商实战 --(20)首页上拉加载更多功能的制作
flutter -- 实战 加载 移动 制作 20 电商
2023-09-11 14:15:29 时间
这节课学习一下上拉加载效果,其实现在上拉加载的插件有很多,但是还没有一个插件可以说完全一枝独秀,我也找了一个插件,这个插件的优点就是服务比较好,作者能及时回答大家的问题。我觉的选插件也是选人,人对了,插件就对了。
flutter_easyrefresh简介
flutter_easyrefresh官方简介:
正如名字一样,EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操作,它支持几乎所有的Flutter控件,但前提是需要包裹成ScrollView。它的功能与Android的SmartRefreshLayout很相似,同样也吸取了很多三方库的优点。EasyRefresh中集成了多种风格的Header和Footer,但是它并没有局限性,你可以很轻松的自定义。使用Flutter强大的动画,甚至随便一个简单的控件也可以完成。EasyRefresh的目标是为Flutter打造一个强大,稳定,成熟的下拉刷新框架。
flutter_easyrefresh优点:
- 能够自定义酷炫的Header和Footer,也就是上拉和下拉的效果。
- 更新及时,不断在完善,录课截至时已经是v1.2.7版本了。
- 有一个辅导群,虽然文档不太完善,但是有辅导群和详细的案例。
- 回掉方法简单,这个具体可以看下面的例子。
引入依赖
直接在pubspec.yaml
中的dependencies
中进行引入,主要要用最新版本,文章中的版本不一定是最新版本。
dependencies: flutter_easyrefresh: ^1.2.7
引入后,在要使用的页面用import
引入package
,代码如下:
import 'package:flutter_easyrefresh/easy_refresh.dart';
制作上拉加载效果
使用这个插件,要求我们必须是一个ListView,所以我们要改造以前的代码,改造成ListView。
return EasyRefresh( child: ListView( children: <Widget>[ SwiperDiy(swiperDataList:swiperDataList ), //页面顶部轮播组件 TopNavigator(navigatorList:navigatorList), //导航组件 AdBanner(advertesPicture:advertesPicture), LeaderPhone(leaderImage:leaderImage,leaderPhone: leaderPhone), //广告组件 Recommend(recommendList:recommendList), FloorTitle(picture_address:floor1Title), FloorContent(floorGoodsList:floor1), FloorTitle(picture_address:floor2Title), FloorContent(floorGoodsList:floor2), FloorTitle(picture_address:floor3Title), FloorContent(floorGoodsList:floor3), _hotGoods(), ], ) , loadMore: ()async{ print('开始加载更多'); var formPage={'page': page}; await request('homePageBelowConten',formData:formPage).then((val){ var data=json.decode(val.toString()); List<Map> newGoodsList = (data['data'] as List ).cast(); setState(() { hotGoodsList.addAll(newGoodsList); page++; }); }); }, ); }else{ return Center( child: Text('加载中'), ); }
具体的解释我就在视频中进行了,因为这个还是比较复杂的。
自定义上拉加载效果
因为它自带的样式是蓝色的,与我们的界面不太相符,所以我们改造一下,它的底部上拉刷新效果。如果你有兴趣做出更炫酷的效果,可以自行查看一下Github,学习一下。
refreshFooter: ClassicsFooter( key:_footerKey, bgColor:Colors.white, textColor: Colors.pink, moreInfoColor: Colors.pink, showMore: true, noMoreText: '', moreInfo: '加载中', loadReadyText:'上拉加载....' ),
做到这步我们需要进行调试一下,然后看一下我们的效果。
本节总结:这节课主要学习了easy_refresh
组件的介绍和使用,并结合项目案例做出了上拉加载的效果。
相关文章
- Flutter 一个优美的用户体验的登录页面 抖动提示 文本提示
- Flutter移动电商实战 --(52)购物车_数据模型建立和Provide修改
- Flutter移动电商实战 --(50)持久化_shared_preferences
- Flutter移动电商实战 --(49)详细页_Stack制作底部工具栏
- Flutter移动电商实战 --(48)详细页_详情和评论的切换
- Flutter移动电商实战 --(44)详细页_首屏自定义Widget编写
- Flutter移动电商实战 --(21)分类页_类别信息接口调试
- Flutter移动电商实战 --(34)列表页_小BUG的修复
- Flutter移动电商实战 --(19)首页_火爆专区商品接口制作
- Flutter移动电商实战 --(18)首页_火爆专区商品接口制作
- Flutter移动电商实战 --(17)首页_楼层区域的编写
- Flutter移动电商实战 --(10)使用FlutterSwiper制作轮播效果
- Flutter移动电商实战 --(5)dio基础_引入和简单的Get请求
- 教程:Flutter 和 Rust混合编程,使用flutter_rust_bridge自动生成ffi代码
- Flutter学习笔记(四)--Flutter几个小知识点
- Flutter for Web:为什么 Flutter 最适合 Web 应用开发?
- Flutter开发 - flutter异常上报方案,sentry的用法