首页 > 其他 > 详细

9-16【实战应用】加载进度条和下拉刷新的实现。

时间:2020-01-18 22:34:17      阅读:104      评论:0      收藏:0      [点我收藏+]

为首页实现一个加载的进度条
新建一个dart文件
技术分享图片
child就是子页面,
isLoading:是否加载中
cover:是否覆盖页面
设置参数并生成构造方法。
技术分享图片
isLoading是必须的,@requeired修饰。child也是保修的。conver默认值是false
技术分享图片
不是conver和isLoading的情况下就显示child。否在显示一个loadingView
技术分享图片
loading在我们的页面之上,这里就用到Stack布局。底部放child也就是页面显示的内容,顶部放loadingView
技术分享图片

首页调用

首先导入包
技术分享图片
设置一个loading的变量。默认为true,已进入页面就是加载中。
技术分享图片
页面数据加载完成后将loading设置为false
技术分享图片
报错了 ,失败了的话 也设置为false
技术分享图片

将首页整个的用loading的widget包在最外层
技术分享图片

测试

加载进度条小时的很快,因为数据加载的很快。
技术分享图片

添加下拉刷新

RefreshIndicator
技术分享图片
修改loadData方法为_handleRefresh方法,然后返回Future<Null>
技术分享图片


技术分享图片
这里方法名也要修改
技术分享图片

测试下拉刷新

技术分享图片

将banner改成动态的数据

首先把之类删除掉
技术分享图片
创建变量bannerList
技术分享图片
技术分享图片

每一个图片加点击事件

点击能跳转到对应的详情页。用gestureDetector
技术分享图片

技术分享图片
数据初始化
技术分享图片

技术分享图片

首页布局封装

把ListView抽出去
技术分享图片
 
用这种写法 把ListView抽出去
技术分享图片

appbar也抽出来
技术分享图片

技术分享图片

banner抽离


技术分享图片

技术分享图片

把测试数据删除
技术分享图片

回顾

首页实现了加载进度条、又实现了下拉刷新、首页布局结构的调整


 

结束

 

9-16【实战应用】加载进度条和下拉刷新的实现。

原文:https://www.cnblogs.com/wangjunwei/p/12210484.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!