天天看点

Flutter移动电商实战 --(35)列表页_上拉加载更多制作

右侧列表上拉加载配合类别的切换

上拉加载需要一个page参数,当点击大类或者小类的时候,这个page就要变成1

provide内定义参数

首先我们需要定义一个page的变量

下图是我们之前在首页的时候做的上拉加载代码,之前属性nomoretext我们没有设置值,这里我也需要把这个属性加入到provide里面去。

Flutter移动电商实战 --(35)列表页_上拉加载更多制作

在大类和小类的初始化的方法内,都需要把page设置为1,然后把提示信息设置为空

Flutter移动电商实战 --(35)列表页_上拉加载更多制作

然后我们需要做page增加的方法,上拉刷新的时候,这个page值是不断的增加的

再增加改变我们的nomoretext的值的方法

Flutter移动电商实战 --(35)列表页_上拉加载更多制作

引入fresh插件

category_page.dart页面引入上拉刷新的插件

我们在右侧的列表类里面,在列表的地方外层嵌套easy_refresh

Flutter移动电商实战 --(35)列表页_上拉加载更多制作

我们复制首页之前写好的代码过来。

Flutter移动电商实战 --(35)列表页_上拉加载更多制作

中间红框内是和原来的代码,上面refreshfooter部分是复制首页的代码过来的。下面的loadmore事件是自己写的

Flutter移动电商实战 --(35)列表页_上拉加载更多制作

再复制首页的footerkey

Flutter移动电商实战 --(35)列表页_上拉加载更多制作

这样key这里就不报错了。

Flutter移动电商实战 --(35)列表页_上拉加载更多制作

nomoretext用状态 管理里面的值

Flutter移动电商实战 --(35)列表页_上拉加载更多制作

效果展示

Flutter移动电商实战 --(35)列表页_上拉加载更多制作

loadmore回调函数补充完整

上拉加载更多和我们加载大类和小类是一样的 我们复制右侧的列表的数据获取的方法

下图是复制的右侧加载列表数据的方法

Flutter移动电商实战 --(35)列表页_上拉加载更多制作
Flutter移动电商实战 --(35)列表页_上拉加载更多制作
Flutter移动电商实战 --(35)列表页_上拉加载更多制作

下面这里,因为我们是不断的累计list的数据的 所以不能再使用等号了。

Flutter移动电商实战 --(35)列表页_上拉加载更多制作

修改为使用addall的方法

Flutter移动电商实战 --(35)列表页_上拉加载更多制作

调用我们获取数据的方法

修正一个地方,这个方法添加的地方是在最后一个花括号结束的上方 复制这个getmorelist的方法

Flutter移动电商实战 --(35)列表页_上拉加载更多制作

有了上拉刷新的效果。但是点击小类的时候列表数据,不变化了

Flutter移动电商实战 --(35)列表页_上拉加载更多制作
Flutter移动电商实战 --(35)列表页_上拉加载更多制作
Flutter移动电商实战 --(35)列表页_上拉加载更多制作

修正一个错误的地方

Flutter移动电商实战 --(35)列表页_上拉加载更多制作

上拉刷新的效果

Flutter移动电商实战 --(35)列表页_上拉加载更多制作

page需要++

我们在调用上拉刷险的时候,没有调用page++

Flutter移动电商实战 --(35)列表页_上拉加载更多制作

存在问题

当我们一个类别上拉刷新了几次后,滚动条滚动到最下面了。当我们再去点击别的大类的时候,滚动条还是在这个位置上。滚动条没有滚动到最上面

Flutter移动电商实战 --(35)列表页_上拉加载更多制作

只要切换大类的是时候,就返回我们的顶部,好用scrollcontroller的jumpto方法 跳转到0.0的位置

Flutter移动电商实战 --(35)列表页_上拉加载更多制作

最终代码:

provide/child_category.dart

provide/category_goods_list.dart

category_page.dart

.