13-8旅拍页面交互与我的页面实现

实现下拉刷新,下拉加载更多,打开页面loading的效果。
首先来移除顶部的padding
13-8旅拍页面交互与我的页面实现_第1张图片

使用MediaQuery.removePadding
13-8旅拍页面交互与我的页面实现_第2张图片
这样就去除了。
13-8旅拍页面交互与我的页面实现_第3张图片

全局loading

13-8旅拍页面交互与我的页面实现_第4张图片
加一个loading变量
13-8旅拍页面交互与我的页面实现_第5张图片
数据加载完成之后,loading变为false
13-8旅拍页面交互与我的页面实现_第6张图片
失败了也设置为false
13-8旅拍页面交互与我的页面实现_第7张图片

13-8旅拍页面交互与我的页面实现_第8张图片
默认加载有一个loading的效果
13-8旅拍页面交互与我的页面实现_第9张图片

下拉刷新

RefreshIndicator
13-8旅拍页面交互与我的页面实现_第10张图片
我们来实现onRefresh方法
13-8旅拍页面交互与我的页面实现_第11张图片

13-8旅拍页面交互与我的页面实现_第12张图片

13-8旅拍页面交互与我的页面实现_第13张图片

上拉加载更多

实现ScrollController监听页面滚动的位置

13-8旅拍页面交互与我的页面实现_第14张图片
如果位置等于最大可见区域,相当于滚动到底部了。
13-8旅拍页面交互与我的页面实现_第15张图片
13-8旅拍页面交互与我的页面实现_第16张图片

13-8旅拍页面交互与我的页面实现_第17张图片
扩展_loadData方法,接收一个可选的参数默认为false。
13-8旅拍页面交互与我的页面实现_第18张图片
上拉的时候,传一个true
13-8旅拍页面交互与我的页面实现_第19张图片
如果是加载更多的的话 ,那么就加载更多
13-8旅拍页面交互与我的页面实现_第20张图片
我们这里用到的瀑布流布局StaggerdGridView
13-8旅拍页面交互与我的页面实现_第21张图片
StaggerdGridView瀑布流他的父类是BoxScrollView
13-8旅拍页面交互与我的页面实现_第22张图片
BoxScrollView下面还有ListView和GridView
13-8旅拍页面交互与我的页面实现_第23张图片

BoxScrollView它有ScrollController这样一个属性。
13-8旅拍页面交互与我的页面实现_第24张图片

也就是说瀑布流继承了BoxScrollVIew那么它也有ScrollController属性。所以这里我们就可以设置它的controller
13-8旅拍页面交互与我的页面实现_第25张图片

运行查看效果

上拉加载了更多。

13-8旅拍页面交互与我的页面实现_第26张图片

最后一个页面实现

13-8旅拍页面交互与我的页面实现_第27张图片
这里面显示写成的一个H5的页面。返回一个WebView里面显示一个url地址
13-8旅拍页面交互与我的页面实现_第28张图片
隐藏AppBar,禁止返回。设置statusBar的颜色
13-8旅拍页面交互与我的页面实现_第29张图片

13-8旅拍页面交互与我的页面实现_第30张图片
可以点击登陆。
13-8旅拍页面交互与我的页面实现_第31张图片
 

结束

 

你可能感兴趣的:(13-8旅拍页面交互与我的页面实现)