flutter 熱更新實現方案—UI資源化（二）

Demo代碼

flutter 熱更新實現方案—UI資源化(一)開啟http-server后，回到項目。

在flutter_pkg中創建AppConf.dart文件，放置配置信息等，文件名及結構根據需求自定義，簡單配置如下圖：

添加App配置之后，在flutter_res模塊中創建資源文件app.json,及home_page.json(內容暫為空)，目錄結構如下圖所示，

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

由于 initAppConf是異步方法，所以在未初始化完成的時候就會繼續渲染界面，所以在這里我們添加AppStartStateMgr，監聽回調刷新UI，如下圖：

這里需要注意，項目需要依賴dio，path_provider，path_providerpackage 提供一種平臺無關的方式以一致的方式訪問設備的文件位置系統。

添加依賴，如下圖：

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

資源下載完成之后，接下來就是需要把資源json文件轉化為組件并渲染，以Container為例。

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

然后創建ControlMgr類，添加所有新的容器并在MyApp啟動時初始化，如下圖：

在添加系統組件的同時我們還需要添加自定義組件，我們創建的UIjson資源文件就是一個獨立的組件，在AppData初始化方法中根據下載的資源創建對應的組件，如下圖：

根據實例化組件中定義的格式，添加json文件內容，如下圖：

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

到這里簡單的熱更新就可以實現了，運行后顏色FFF25D47，這個時候只要更改顏色為FF1C8AEC，只需要結束app后重新打開app就會更新，不需要運行項目

如下圖:

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。