如何快速體驗鴻蒙全新宣告式UI框架ArkUI?

華為開發者論壇發表於2021-10-22

HDC2021將於10月22日在東莞松山湖正式開幕,大會將設立Codelab體驗專區,超多好玩、有趣的Demo等你體驗。想快速入門HarmonyOS?學習HarmonyOS新特性?以下幾個Codelab Demo不容錯過~

極簡宣告式UI框架ArkUI

隨著使用者裝置型別的不斷增加,手機、平板、大屏、車載、穿戴等裝置對應用UI介面開發提出了更加多樣化的訴求,應用開發者在開發應用介面的時候要考慮多種裝置場景,從而導致工程程式碼量增加,甚至需要維護多個工程來適配不同裝置。

HarmonyOS提供一套極簡宣告式UI正規化開發框架ArkUI,是HarmonyOS提供的一套基於JS/TS語言的開發能力集合,旨在幫助應用開發者高效開發跨端應用UI介面,自動適配多種不同的螢幕形態,開發者無需關心框架如何實現UI繪製和渲染,只需聚焦應用開發,從而實現極簡高效地開發。

本篇Codelab為大家展示的是如何使用ArkUI開發正規化快速開發一個有轉場動畫、頁面上下滑動,雙擊可以放大或縮小圖片,左右滑動可以切換圖片功能的UI介面,效果如圖1所示:

更多ArkUI詳情,請前往官網Codelab:https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/HarmonyOS-EtsUI

ArkUI基礎元件Slider的使用

Slider是一個滑動元件,常用的場景有音樂播放進度條、系統音量調節、螢幕亮度調節等。凡是和進度有關的場景,都可以嘗試用一下這個元件。

HarmonyOS 極簡宣告式UI開發框架(ArkUI)提供了豐富的介面和元件,在本Codelab中,我們將通過一個簡單的樣例,學習Slider元件的使用,還將搭配Image元件、Slider元件、Text元件共同實現一個可調節的風車動畫,完成效果如圖2所示:

更多ArkUI基礎元件Slider開發詳情,前往官網Codelab:
https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/HarmonyOS-ETS-Slider

一次開發多端部署

在多場景多終端的時代,消費者期待在不同終端上獲得同樣的體驗和服務,操作也應該像使用同一個裝置一樣。這使開發者面臨很大的挑戰,因為不同裝置形態/硬體差異大,開發者需要對多種裝置開發多套程式碼。

一次開發,多端部署通過多終端統一程式設計框架、自動適配多終端硬體能力的統一抽象UI控制元件,以及為不同螢幕的終端提供自適應佈局,開發者無需針對不同裝置開發多套程式碼,只需一套應用工程,就可以在多種終端部署。不僅提高了開發效率,還降低了程式碼的維護難度。

本篇Codelab使用ArkUI實現一次開發多端部署,效果預覽如圖3所示:

更多“一次開發,多端部署”開發詳情,前往官網Codelab:
https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/HarmonyOS-EtsMultiDeployment

平行視界

平行視界是一種實現在應用內雙視窗顯示的方案,適用於平板、摺疊屏展開態等大螢幕裝置。簡單來說,就是將裝置橫屏使用,進入“平行視界”模式後,一個應用將會分為左右兩屏顯示,兩邊互不干擾。

例如:瀏覽網頁查詢資料的時候,你可以一邊看搜尋結果一邊看點開後的具體網頁,資料查詢的效率大大提升……

本篇Codelab主要利用平行視界實現應用內雙視窗,將兩個Ability左右顯示在同一個應用的不同視窗。左側頁面展示圖片列表,可根據螢幕寬度自適應調節圖片佈局;右側頁面展示選擇的圖片,可對圖片進行裁剪、縮放、映象、儲存、流轉操作。效果如圖4所示:左邊是圖片庫,右邊是檢視大圖,兩者搭配,效率加倍。

更多平行視界開發詳情,前往官網Codelab:https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/HarmonyOS-ParallelHorizon

想了解更多HarmonyOS新特性Codelab?HDC2021 Codelab體驗專區等你來~
更多精彩內容,請見華為開發者官方論壇→https://developer.huawei.com/consumer/cn/forum/home?ha_source=sanfang

相關文章