flutter 熱更新實現方案—UI資源化(二)


 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_provider package 提供一種平台無關的方式以一致的方式訪問設備的文件位置系統。

添加依賴,如下圖:

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

 

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

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

 

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

 

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

 

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

 

然后在需要的地方添加使用,如下圖:

 

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

如下圖:

 

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM