天天看點

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

.