跨平臺應(yīng)用Flutter 列表 ListView 局部刷新數(shù)據(jù)
題記
—— 執(zhí)劍天涯,從你的點滴積累開始,所及之處,必精益求精。

Flutter是谷歌推出的最新的移動開發(fā)框架。
本文章實現(xiàn)的是 ListView 中 Item 局部數(shù)據(jù)刷新的效果,如下圖所示。

在這只是一個 Demo ,是一個實現(xiàn)思路,在應(yīng)用開發(fā)的更多場景中如 資訊列表的點贊、收藏等等,諸多業(yè)務(wù)場景都可使用。
1 Demo 實現(xiàn)
首先是這里使用列表使用到的數(shù)據(jù)模型定義如下:

然后就是 ListView 實現(xiàn)的主頁面,定義如下:




每個子 Item 的UI布局及功能封裝成了一個 獨立的 StatefulWidget,代碼如下:



2 原理分析
很多個為什么,咱們一一來分析,大家如果有疑問或者不同的看法,可以回復(fù)評論,一起優(yōu)化
2.1 實現(xiàn)的真的是局部刷新嗎 ?
答案為 是的,在這里模擬了100條數(shù)據(jù),但是這里使用的是懶加載模式構(gòu)建的,所以實際繪制出來的 Item 并不是 100 條,如下圖所示:
滑動時,滑出屏幕外的,超出ListView緩存區(qū)域的就會被銷毀,在本 Demo 本測試模擬器中,ListView中始終是繪制的 16 個子 Item。
ListView 每一個子 Item 都是一個獨立的 StatefulWidget ,都對應(yīng)的是一個 獨立的 State ,所以調(diào)用 setState方法來刷新只是刷新了當(dāng)前的 StatefulWidget 內(nèi)容區(qū)域,當(dāng)然從源碼角度也有另外的解讀,這里不去說源碼。
當(dāng)然在實際業(yè)務(wù)場景中,你的 ListView 中的 Item的UI布局功能可能足夠的復(fù)雜,不用擔(dān)心 ,你也可以采用這種思路 ,把每個 Item 中的 部分 Widget 再次封裝到不同的StatefulWidget 中,這樣也能實現(xiàn)ListView 中一個Item中不同的Widget 刷新不同的區(qū)域。
當(dāng)然 也可以在 ListView 的Item 中使用 Stream 、Provider 、BloC等等,小編這里也有說明點擊查看
2.2 狀態(tài)如何保存的????
通過數(shù)據(jù)模型來保存的狀態(tài),因為在這里使用的是根據(jù) TestBean 中 isCollect 的值來構(gòu)建不同的樣式的,List中保存的 TestBean 的標(biāo)識不同,構(gòu)建的子Item的樣式不同。
2.3 List 中的數(shù)據(jù)是如何更新的????
還是這一句更新的:

在這一步修改數(shù)據(jù),看下圖你就明白了

ListView 的子Item 中(TestListItemWidget)使用的數(shù)據(jù)模型在內(nèi)存區(qū)域中還是在 TestListPartPage 這里創(chuàng)建的 _testList 集合中保存的對象實體,整個過程中只是通過指針?biāo)饕齺斫壎〝?shù)據(jù),修改數(shù)據(jù)實際上修改的還是同一塊內(nèi)存區(qū)域中的數(shù)據(jù)。
完畢