flutter 熱更新實(shí)現(xiàn)方案—UI資源化（二）

Demo代碼

flutter 熱更新實(shí)現(xiàn)方案—UI資源化(一)開(kāi)啟http-server后，回到項(xiàng)目。

在flutter_pkg中創(chuàng)建AppConf.dart文件，放置配置信息等，文件名及結(jié)構(gòu)根據(jù)需求自定義，簡(jiǎn)單配置如下圖：

添加App配置之后，在flutter_res模塊中創(chuàng)建資源文件app.json,及home_page.json(內(nèi)容暫為空)，目錄結(jié)構(gòu)如下圖所示，

資源文件添加完成之后，需要在APP初始化的時(shí)候從資源服務(wù)器中下載資源文件，創(chuàng)建AppData.dart文件，在文件中添加初始化加載資源方法，并在MyApp.dart中進(jìn)行初始化，代碼可在demo查看，如下圖：

由于 initAppConf是異步方法，所以在未初始化完成的時(shí)候就會(huì)繼續(xù)渲染界面，所以在這里我們添加AppStartStateMgr，監(jiān)聽(tīng)回調(diào)刷新UI，如下圖：

這里需要注意，項(xiàng)目需要依賴(lài)dio，path_provider，path_providerpackage 提供一種平臺(tái)無(wú)關(guān)的方式以一致的方式訪問(wèn)設(shè)備的文件位置系統(tǒng)。

添加依賴(lài)，如下圖：

下載完成之后可以使用Android Studio的Device File Explorer中查看文件，如下圖：

資源下載完成之后，接下來(lái)就是需要把資源json文件轉(zhuǎn)化為組件并渲染，以Container為例。

為了系統(tǒng)容器可配置，我們重新創(chuàng)建的新的容器XContainer，返回配置后容器Container，本案例只添加部分屬性，如下圖：

然后創(chuàng)建ControlMgr類(lèi)，添加所有新的容器并在MyApp啟動(dòng)時(shí)初始化，如下圖：

在添加系統(tǒng)組件的同時(shí)我們還需要添加自定義組件，我們創(chuàng)建的UIjson資源文件就是一個(gè)獨(dú)立的組件，在AppData初始化方法中根據(jù)下載的資源創(chuàng)建對(duì)應(yīng)的組件，如下圖：

根據(jù)實(shí)例化組件中定義的格式，添加json文件內(nèi)容，如下圖：

然后在需要的地方添加使用，如下圖：

到這里簡(jiǎn)單的熱更新就可以實(shí)現(xiàn)了，運(yùn)行后顏色FFF25D47，這個(gè)時(shí)候只要更改顏色為FF1C8AEC，只需要結(jié)束app后重新打開(kāi)app就會(huì)更新，不需要運(yùn)行項(xiàng)目

如下圖:

這里只是搬了一種思路，代碼并不完善并沒(méi)有做過(guò)多處理，其中可能涉及加密、解密、代理服務(wù)器、界面事件處理等等問(wèn)題。

總結(jié)

以上是生活随笔為你收集整理的flutter 热更新实现方案—UI资源化（二）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。