應(yīng)用的開發(fā)過程中，往往需要多次調(diào)試和修改，如果支持實(shí)時(shí)預(yù)覽，邊改邊看效果，所看即所得，可大大提升開發(fā)效率。為滿足這一需求，DevEco Studio作為HarmonyOS和OpenHarmony應(yīng)用及服務(wù)開發(fā)配套的集成開發(fā)環(huán)境（IDE），提供了強(qiáng)大的預(yù)覽功能，讓開發(fā)者能夠預(yù)覽應(yīng)用/服務(wù)在不同終端設(shè)備上的UI顯示效果，不僅支持邊開發(fā)邊預(yù)覽，還支持在預(yù)覽過程中進(jìn)行界面交互。下面，就帶大家一起來了解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ù)覽效果。

圖1 多端設(shè)備預(yù)覽

二、雙向預(yù)覽

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

選中預(yù)覽器UI界面中的組件，則組件樹上對(duì)應(yīng)的組件將被選中，同時(shí)代碼編輯器中的布局文件中對(duì)應(yīng)的代碼塊高亮顯示。這樣，通過預(yù)覽器的UI界面即可快速地定位到相應(yīng)代碼，讓代碼修改更加便利。

選中布局文件中的代碼塊，則在UI界面會(huì)高亮顯示，組件樹上的組件節(jié)點(diǎn)也會(huì)呈現(xiàn)被選中的狀態(tài)。這樣，通過選中代碼塊就能精準(zhǔn)地查看對(duì)應(yīng)的界面組件的預(yù)覽效果，讓預(yù)覽更加精準(zhǔn)、高效。

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

圖2 雙向預(yù)覽

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

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

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

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

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

圖4 動(dòng)態(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更新到最新版本。