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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章