flutter 熱更新實現方案—UI資源化(二)
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就會更新,不需要運行項目
如下圖:
這里只是搬了一種思路,代碼並不完善並沒有做過多處理,其中可能涉及加密、解密、代理服務器、界面事件處理等等問題。