AWTK 開源串口屏開發(14) - 界面重用

AWTK串口屏支持同一個界面綁定不同的數據，本文以家居控制為例，介紹一下界面重用的方法。在家居控制應用中，我們演示了空調和咖啡機界面?，F在我們來想一想，如果有多個空調怎么辦呢？當然最直觀的方法，就是把界面再拷貝一份。但是如果界面有多份，維護是一件麻煩的事情。今天我來介紹一下界面重用的問題。

1. 功能

用同一個空調界面實現兩臺空調的設置。

有兩臺空調

• 客廳空調

• 臥室空調

2. 創建項目

從模板創建項目，將 hmi/template_app 拷貝 hmi/ui_reuse 即可。

第一個項目最好不要放到其它目錄，因為放到其它目錄需要修改配置文件中的路徑，等熟悉之后再考慮放到其它目錄。路徑中也不要中文和空格，避免不必要的麻煩。

3. 制作界面

界面重用 demo_home2 的界面，這里不再細說。

4. 添加綁定規則

4.1 空調界面

空調界面除了空調_位置之外，其它的變量都是一樣的，所以我們只需要添加空調_位置的綁定規則即可。

4.2 主窗口

4.2.1 客廳空調

和之前的不同的是，我們加了參數prefix=living_room，表示獲取 living_room 下面的數據。

4.2.2 臥室空調

和之前的不同的是，我們加了參數prefix=bed_room，表示獲取 living_room 下面的數據。

5. 初始化數據

修改資源文件 design/default/data/default_model.json, 將其內容改為：

{ "coffee": { "咖啡_開關": false, "咖啡_類型": 1, //類型 (0: 卡布奇諾；1: 拿鐵；2: 美式；3: 意式） "咖啡_溫度": 60, //溫度（0-100） "咖啡_口味": 1, //口味 (0: 濃郁；1: 絲滑；2: 清淡；3: 平衡；4: 溫和） "咖啡_熱奶": 1, //熱奶 (0: 少量；1: 較少；2: 較多；3: 大量） "咖啡_奶泡": 1, //奶泡 (0: 少量；1: 較少；2: 較多；3: 大量） "咖啡_水量": 150, //水量 (50-350ml) "咖啡_剩余時間": 200, //單位秒，格式化為 分鐘：秒 "咖啡_開始制作": false }, "bed_room":{ "空調_開關": false, "空調_位置":"臥室", "空調_模式": 3, //空調模式 (0: 制冷；1: 制熱；2: 送風；3: 除濕；4: 自動 "空調_風速": 3, //空調風速 (0: 自動；1: 低速；2: 中速；3: 高速） "空調_垂直風向": 1, //垂直風向 (0: 自動；1：上；2：中；3：下） "空調_水平風向": 1, //水平風向 (0: 自動；1：左；2：中；3：右） "空調_溫度": 25, //溫度（0-40） }, "living_room":{ "空調_開關": false, "空調_位置":"客廳", "空調_模式": 3, //空調模式 (0: 制冷；1: 制熱；2: 送風；3: 除濕；4: 自動 "空調_風速": 3, //空調風速 (0: 自動；1: 低速；2: 中速；3: 高速） "空調_垂直風向": 1, //垂直風向 (0: 自動；1：上；2：中；3：下） "空調_水平風向": 1, //水平風向 (0: 自動；1：左；2：中；3：右） "空調_溫度": 25, //溫度（0-40） }}

之前我們介紹的數據只有一級，現在我們的數據有兩級，所以我們需要加上 prefix 參數，來訪問 prefix 參數下的數據。

注意：

如果文件內容有中文（非 ASCII 字符），一定要保存為 UTF-8 格式。

重新打包資源才能生效。

6. 數據持久化

無

7. 編譯運行

8. 注意

本項目并沒有編寫界面相關的代碼，AWStudio 在 src/pages 目錄下生成了一些代碼框架，這些代碼并沒有用到，可以刪除也可以不用管它，但是不能加入編譯。

• 完整示例請參考：demo_home2。