Flutter 上拉加載更多終極解決方案實現

發布時間:2020/6/2 20:14:49來源:我愛用戶 點擊 0

頁面使用的代碼還沒來得及封裝, 現有代碼已經經過測試人員嚴格測試.請放心使用. 如果有bug歡迎提出. 具體效果可以參考 [視界北京] App

項目代碼地址
對于移動開發,上拉加載更多是列表,中必不可少的一個功能, 由于上拉加載更多的邏輯相對來說比較復雜, 且變化多端, 因此 Android, IOS 都沒有相應的上拉加載更多的控件提供. Flutter 作為新興的跨平臺開發方式也沒有提供相應的Widget.

下面是我參考Android端加載更多, 開發的Flutter加載更多幫助類,可以適應大多數上拉加載更多的需求. 先來看一下效果圖.

loadMore.gif

下面就來分析一下如何實現.

  1. 首先分析一下頁面狀態.

    數據加載狀態

    1. 當前什么也沒做(網絡請求前,網絡請求成功)
    2. 數據加載中
    3. 數據加載失敗(業務邏輯錯誤)
    4. 數據加載網絡異常

    數據狀態

    1. 沒有數據
    2. 有數據
      這樣兩種狀態組合可以得到頁面的八種狀態,因此我們的加載更多要在這八種狀態中進行切換.
  2. 其次我們來分析一下如何加載更多

    上拉加載更多的示例網上一搜一大把: 比如:

    1. 滑動到底部加載更多
    2. 滑動到還有多少個不可見項加載更多
    3. 某個特定項被加載時加載更多.

    顯然這樣的示例都無法滿足實際開發時的需求.

    假設我們有這樣的需求:

    1. 只在服務端有更多數據才允許加載更多
    2. 向上滑動時才允許加載更多
    3. 上一次調用過程沒有發生錯誤和異常才允許加載更多
    4. 發生錯誤或異常后點擊最后一項才允許加載更多.

作者:水中沚_b078
鏈接:https://www.jianshu.com/p/d9388c775a14
來源:簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
掃二維碼打開公告

0 個回答

,全世界都等著看你的驚世評論!
Copyright 2009-2020 我愛廣告任務網 版權所有  粵ICP備11078991號-1  ICP證:粵B2-20130544 粵公網安備 44030802000523號

×

我愛官方微信二維碼

打開微信,點擊右上角的“魔法棒”,選擇“掃一掃”功能,對準下方二維碼即可。

免費注冊 收藏本站 官方新人群
返回頂部
gpk钱龙捕鱼挂 四维图新股票 股市资讯看哪个网站 浙江11选5预测下载 快乐12开奖结果 股票配资都是诈骗 江苏体彩11选5 时时彩统计软件手机版 11选5云南 河南快3开奖l结果 安徽十一选五开奖52期