一、多端設備預覽
HarmonyOS作為分布式操作系統,支持運行在不同的終端設備上。為方便開發者查看應用/服務在不同終端設備上的UI布局和交互效果,DevEco Studio提供多端設備預覽功能。
DevEco Studio的預覽器支持自定義預覽設備Profile(包含分辨率和語言等)。點擊預覽器右上角的按鈕,可以看到所有已定義的預覽設備Profile。通過點擊切換不同的預覽設備Profile,可以查看不同終端設備上的預覽效果。此外,打開Multi-profile preview開關,還可以同時查看多個終端設備上的預覽效果。
二、雙向預覽
為幫助開發者提升開發效率,DevEco Studio提供雙向預覽功能,支持代碼編輯器、預覽器UI界面和組件樹(Component tree)三者之間的聯動。
- 選中預覽器UI界面中的組件,則組件樹上對應的組件將被選中,同時代碼編輯器中的布局文件中對應的代碼塊高亮顯示。這樣,通過預覽器的UI界面即可快速地定位到相應代碼,讓代碼修改更加便利。
- 選中布局文件中的代碼塊,則在UI界面會高亮顯示,組件樹上的組件節點也會呈現被選中的狀態。這樣,通過選中代碼塊就能精準地查看對應的界面組件的預覽效果,讓預覽更加精準、高效。
-
選中組件樹中的組件,則對應的代碼塊和UI界面也會高亮顯示。此外,如果修改了組件樹中某一組件的屬性,代碼編輯器中對應的代碼也會同步修改。
圖2 雙向預覽
三、實時預覽
為了讓開發者可以在應用/服務開發時快速查看預覽效果,DevEco Studio提供實時預覽功能。開發者添加或刪除UI組件、并且使用快捷鍵Ctrl+S進行保存后,預覽器會立即刷新預覽結果。
圖3 實時預覽
四、動態預覽
動態交互也是應用/服務開發過程中非常重要的一個環節。為此,DevEco Studio提供動態預覽功能,支持開發者在預覽器的UI界面中進行交互操作,比如點擊、跳轉、滑動交互等,操作體驗與在真機設備上的交互體驗一致。

圖4 動態預覽
至此,DevEco Studio的預覽功能就介紹完了。需要注意的是,在使用DevEco Studio的預覽器前,需確保Settings > SDK Manager > HarmonyOS Legacy SDK > Tools中已安裝Previewer資源,同時建議Settings > SDK Manager > HarmonyOS Legacy SDK > Platforms中的JS SDK更新到最新版本。
審核編輯 :李倩
-
操作系統
+關注
關注
37文章
7097瀏覽量
124977 -
HarmonyOS
+關注
關注
79文章
2054瀏覽量
32170
原文標題:DevEco Studio強大的預覽功能讓開發效率大大提升!
文章出處:【微信號:HarmonyOS_Community,微信公眾號:電子發燒友開源社區】歡迎添加關注!文章轉載請注明出處。
發布評論請先 登錄
最新 HUAWEI DevEco Studio 使用技巧

DevEco Studio 工具如何安裝
DevEco Studio 寫一個簡單的頁面
DevEco Studio AI輔助開發工具兩大升級功能 鴻蒙應用開發效率再提升
最新 HUAWEI DevEco Studio 調試技巧
鴻蒙北向開發OpenHarmony5.0 DevEco Studio開發工具安裝與配置

【貝啟科技BQ3568HM開源鴻蒙開發板深度試用報告】使用Deveco Studio進行開發
DevEco Studio 聯合小藝接入 DeepSeek,步驟更簡單開發鴻蒙更專業
HarmonyOS NEXT開發實戰:DevEco Studio中DeepSeek的使用
如何在DevEco Studio中利用CodeGPT接入DeepSeek

戈帥的《HarmonyOS從入門到精通40例》DevEco Studio升級說明
DevEco Studio應用與服務體檢工具介紹

評論