Flutter狀態(tài)管理--GetX的簡單使用

一、前言

創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站制作、成都網(wǎng)站建設(shè)與策劃設(shè)計,溧陽網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:溧陽等地區(qū)。溧陽做網(wǎng)站價格咨詢:028-86922220

Flutter開發(fā)，就需要對各種狀態(tài)的管理，就是在請求數(shù)據(jù)的時候需要實(shí)時變化，各種交互變化等，在沒有使用GetX之前使用Provider,用Provider的時候覺得真香，挺方便的，需要刷新的時候直接 notifyListeners(); 用了GetX之后覺得Provider太繁瑣了。這邊介紹下GetX的使用以及常用的方法。

二、 GetX

GetX 是 Flutter 上的一個輕量且強(qiáng)大的解決方案：高性能的狀態(tài)管理、智能的依賴注入和便捷的路由管理。

1、相關(guān)優(yōu)勢：

三、使用

1、第一步 引入get

2、第二步

修改入口、配置路由

3、路由

Routes類

Pages類

4、狀態(tài)管理

我一般一個page對應(yīng)一個controller， controller來處理邏輯，控制page.

簡單使用

5、依賴注入

依賴注入也是我喜歡的，可以減少很多工作。

第一步

第二步

6、跨頁面交互

7、黑暗模式

可以參考前期寫的博客。 黑暗模式的適配

Flutter （三） 狀態(tài)管理

Flutter （二）布局

Flutter （三） 狀態(tài)管理

Flutter （四） Map轉(zhuǎn)模型

Flutter （五） 網(wǎng)絡(luò)請求

Flutter （六） 保留界面狀態(tài)

Flutter （七） 混合開發(fā) [配置]

Flutter （八） 混合開發(fā) [Flutter完整項目嵌入到原生]

Flutter的setState（狀態(tài)刷新）

Flutter有兩個常用的狀態(tài)類：

標(biāo)記為dirty，執(zhí)行的markNeedsBuild，定義在Element類中：

當(dāng)前Element節(jié)點(diǎn)被標(biāo)記為dirty，同時調(diào)用owner的scheduleBuildFor方法：

將element元素添加到全局的“臟”鏈表里。

BuildOwner用來管理哪些需要更新的Widget。這個owner最開始被初始化的地方在WidgetsBinding的initInstances方法中，隨后初始化了onBuildScheduled方法，對應(yīng)執(zhí)行的是_handleBuildScheduled，定義在WidgetsBinding類中：

ensureVisualUpdate 方法定義在SchedulerBinding類中：

在提交下一幀繪制的時候會調(diào)用到scheduleFrame方法，提交給引擎繪制，看看scheduleFrame方法，也定義在SchedulerBinding類中：

提交給引擎繪制之后，會收到onDrawFrame的回調(diào)，最終執(zhí)行到_handleDrawFrame方法中，對應(yīng)的是handleDrawFrame方法，定義在SchedulerBinding類中：

在RendererBinding的initInstances方法中添加了一個回調(diào)到這個List中，對應(yīng)的是RenderBinding的drawFrame方法，對應(yīng)的節(jié)點(diǎn)進(jìn)行繪制渲染操作。

WidgetsBinding中的drawFrame方法：

看看這里的buildScope方法，定義在BuildOwner方法中。在上面 scheduleBuildFor 方法介紹中有提到："scheduleBuildFor 是把一個 element 添加到 _dirtyElements 鏈表，以便當(dāng)[WidgetsBinding.drawFrame]中調(diào)用 buildScope 的時候能夠重構(gòu) element。onBuildScheduled()是一個 BuildOwner 的回調(diào)"。在 drawFrame 中調(diào)用 buildOwner.buildScope(renderViewElement)更新 elements。

_dirtyElements列表在遍歷的過程中執(zhí)行rebuild方法，此時將所有標(biāo)記為dirty的Element節(jié)點(diǎn)依次執(zhí)行rebuild，preformRebuild，build，updateChild，update方法，執(zhí)行界面更新。完成build，update操作完成之后，后續(xù)會將需要繪制的RenderObject添加到需要layout的列表中，等待繪制渲染。所有繪制完成之后將_dirtyElments列表清空，_inDirtyList標(biāo)記位置為false。

提交給引擎繪制渲染

看看super.drawFrame()，這里就執(zhí)行到了RendererBinding類中，定義如下：

這里就是將最終需要繪制渲染的畫面提交給引擎的地方了，繪制完成之后就在界面顯示更新后的視圖了。

Flutter狀態(tài)管理（五）：Redux

Flutter狀態(tài)管理系列：

Flutter狀態(tài)管理（一）：ScopedModel

Flutter狀態(tài)管理（二）：Provider

Flutter狀態(tài)管理（三）：BLoC（Business Logic Component）

Flutter狀態(tài)管理（四）：ReactiveX之RxDart

Flutter狀態(tài)管理（五）：Redux

有做過H5前端開發(fā)的朋友應(yīng)該很早就接觸過這個，Redux在React/VUE中，與在Flutter/Dart中概念一樣，沒有任何區(qū)別；唯一的區(qū)別只是使用上的不同。

它主要由三部分組成：

下圖是一個完整的數(shù)據(jù)觸發(fā)及更新流程：

我們看到上面整個數(shù)據(jù)流，都是單向的，由View發(fā)起，最后到View的更新；

為啥這樣設(shè)計？

小節(jié)二介紹了Redux最基本的原理，但是，如何用Redux來做一些異步操作，比如：加載數(shù)據(jù)、請求API等？這里就引出來了Redux的中間件（Middleware），中間件能夠讓我們使得action在到達(dá)reducer之前，做些其它“動作”！有了中間件，我們不但可以請求API，還可以改變action，使得分發(fā)到其它reducer中去；

上圖是有Middleware的流程圖。

Redux在Flutter中的使用與在JavaScript中的使用方式稍微有點(diǎn)不同，為啥？

因為JavaScript是弱類型語言，而Dart是強(qiáng)類型語言，這就使得在JS中每個reducer可以獨(dú)立管理，而在Flutter中需要由一個大對象來管理！

無論在JS中還是在Flutter中，通常都將action、reducer、store各自建一目錄，放在redux目錄下，目錄結(jié)構(gòu)如下：

ReduxPage在build中，也可以直接用StoreBuilder（參考ReduxPage2中寫法），因為StoreBuilder也是InheritedWidget。

正因為Redux在Flutter中與在JS中不同，因此，在Flutter中，建議：