天天看點

DevEco Studio強大的預覽功能讓開發效率大大提升!

應用的開發過程中,往往需要多次調試和修改,如果支援實時預覽,邊改邊看效果,所看即所得,可大大提升開發效率。為滿足這一需求,DevEco Studio作為HarmonyOS和OpenHarmony應用及服務開發配套的內建開發環境(IDE),提供了強大的預覽功能,讓開發者能夠預覽應用/服務在不同終端裝置上的UI顯示效果,不僅支援邊開發邊預覽,還支援在預覽過程中進行界面互動。下面,就帶大家一起來了解DevEco Studio的預覽功能。

一、多端裝置預覽

HarmonyOS作為分布式作業系統,支援運作在不同的終端裝置上。為友善開發者檢視應用/服務在不同終端裝置上的UI布局和互動效果,DevEco Studio提供多端裝置預覽功能。DevEco Studio的預覽器支援自定義預覽裝置Profile(包含分辨率和語言等)。點選預覽器右上角的

DevEco Studio強大的預覽功能讓開發效率大大提升!

按鈕,可以看到所有已定義的預覽裝置Profile。通過點選切換不同的預覽裝置Profile,可以檢視不同終端裝置上的預覽效果。此外,打開Multi-profile preview開關,還可以同時檢視多個終端裝置上的預覽效果。

DevEco Studio強大的預覽功能讓開發效率大大提升!

圖1 多端裝置預覽

二、雙向預覽

為幫助開發者提升開發效率,DevEco Studio提供雙向預覽功能,支援代碼編輯器、預覽器UI界面群組件樹(Component tree)三者之間的關聯。

  • 選中預覽器UI界面中的元件,則元件樹上對應的元件将被選中,同時代碼編輯器中的布局檔案中對應的代碼塊高亮顯示。這樣,通過預覽器的UI界面即可快速地定位到相應代碼,讓代碼修改更加便利。
  • 選中布局檔案中的代碼塊,則在UI界面會高亮顯示,元件樹上的元件節點也會呈現被選中的狀态。這樣,通過選中代碼塊就能精準地檢視對應的界面元件的預覽效果,讓預覽更加精準、高效。
  • 選中元件樹中的元件,則對應的代碼塊和UI界面也會高亮顯示。此外,如果修改了元件樹中某一元件的屬性,代碼編輯器中對應的代碼也會同步修改。
DevEco Studio強大的預覽功能讓開發效率大大提升!

圖2 雙向預覽

三、實時預覽

為了讓開發者可以在應用/服務開發時快速檢視預覽效果,DevEco Studio提供實時預覽功能。開發者添加或删除UI元件、并且使用快捷鍵Ctrl+S進行儲存後,預覽器會立即重新整理預覽結果。

DevEco Studio強大的預覽功能讓開發效率大大提升!

圖3 實時預覽

四、動态預覽

動态互動也是應用/服務開發過程中非常重要的一個環節。為此,DevEco Studio提供動态預覽功能,支援開發者在預覽器的UI界面中進行互動操作,比如點選、跳轉、滑動互動等,操作體驗與在真機裝置上的互動體驗一緻。

DevEco Studio強大的預覽功能讓開發效率大大提升!

圖4 動态預覽

繼續閱讀