一、多端設(shè)備預覽

HarmonyOS作為分布式操作系統(tǒng)，支持運行在不同的終端設(shè)備上。為方便開發(fā)者查看應(yīng)用/服務(wù)在不同終端設(shè)備上的UI布局和交互效果，DevEco Studio提供多端設(shè)備預覽功能。

DevEco Studio的預覽器支持自定義預覽設(shè)備Profile（包含分辨率和語言等）。點擊預覽器右上角的按鈕，可以看到所有已定義的預覽設(shè)備Profile。通過點擊切換不同的預覽設(shè)備Profile，可以查看不同終端設(shè)備上的預覽效果。此外，打開Multi-profile preview開關(guān)，還可以同時查看多個終端設(shè)備上的預覽效果。

二、雙向預覽

為幫助開發(fā)者提升開發(fā)效率，DevEco Studio提供雙向預覽功能，支持代碼編輯器、預覽器UI界面和組件樹（Component tree）三者之間的聯(lián)動。

• 選中預覽器UI界面中的組件，則組件樹上對應(yīng)的組件將被選中，同時代碼編輯器中的布局文件中對應(yīng)的代碼塊高亮顯示。這樣，通過預覽器的UI界面即可快速地定位到相應(yīng)代碼，讓代碼修改更加便利。
• 選中布局文件中的代碼塊，則在UI界面會高亮顯示，組件樹上的組件節(jié)點也會呈現(xiàn)被選中的狀態(tài)。這樣，通過選中代碼塊就能精準地查看對應(yīng)的界面組件的預覽效果，讓預覽更加精準、高效。

• 選中組件樹中的組件，則對應(yīng)的代碼塊和UI界面也會高亮顯示。此外，如果修改了組件樹中某一組件的屬性，代碼編輯器中對應(yīng)的代碼也會同步修改。

圖2 雙向預覽

三、實時預覽

為了讓開發(fā)者可以在應(yīng)用/服務(wù)開發(fā)時快速查看預覽效果，DevEco Studio提供實時預覽功能。開發(fā)者添加或刪除UI組件、并且使用快捷鍵Ctrl+S進行保存后，預覽器會立即刷新預覽結(jié)果。

圖3 實時預覽

四、動態(tài)預覽

動態(tài)交互也是應(yīng)用/服務(wù)開發(fā)過程中非常重要的一個環(huán)節(jié)。為此，DevEco Studio提供動態(tài)預覽功能，支持開發(fā)者在預覽器的UI界面中進行交互操作，比如點擊、跳轉(zhuǎn)、滑動交互等，操作體驗與在真機設(shè)備上的交互體驗一致。

圖4 動態(tài)預覽

至此，DevEco Studio的預覽功能就介紹完了。需要注意的是，在使用DevEco Studio的預覽器前，需確保Settings > SDK Manager > HarmonyOS Legacy SDK > Tools中已安裝Previewer資源，同時建議Settings > SDK Manager > HarmonyOS Legacy SDK > Platforms中的JS SDK更新到最新版本。

審核編輯 ：李倩