了解DevEco Studio的預(yù)覽功能

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

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

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

二、雙向預(yù)覽

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

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

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

圖2 雙向預(yù)覽

三、實(shí)時(shí)預(yù)覽

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

圖3 實(shí)時(shí)預(yù)覽

四、動態(tài)預(yù)覽

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

圖4 動態(tài)預(yù)覽

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

審核編輯 ：李倩