热门问题
时间线
聊天
视角
方舟UI框架
来自维基百科,自由的百科全书
Remove ads
方舟UI框架(簡稱ArkUI[1],原名方舟開發框架)是一個由華為[2]開發的聲明式的用戶界面框架,用於在原生鴻蒙、OpenHarmony以及Oniro OS應用程式上構建用戶界面。ArkUI採用基於TypeScript聲明式UI語法擴展而來的ArkTS語言,同時也支持使用鴻蒙標記語言(HarmonyOS Markup Language,縮寫HML)、JavaScript和CSS以類似Vue 2的語法、MVVM範式開發。[3][4][5]
ArkUI與DevEco Studio IDE集成,提供實時預覽[6]、調試和其他開發功能。
ArkUI-X是基於ArkUI擴展的跨平台用戶界面框架,可使ArkUI不局限於OpenHarmony、HarmonyOS,運行到Android、 iOS等系統上。[7][8]
歷史
在2023年8月的HDC 2023大會上,華為宣布了HarmonyOS 4.0的ArkUI改進,可以使用ArkTS和Ark Engine進行原生HarmonyOS NEXT軟體開發,並引入了ArkGraphics 2D和ArkGraphics3D框架。[9]
特性
ArkUI架構分為三層:最上層提供了聲明式UI範式,中間層為方舟編譯器和運行時、UI後端引擎和渲染引擎;下層為平台適配橋接層。[8]
頁面是ArkUI中系統調度的最小單位,組件是最小分割單位。[3]系統組件是ArkUI框架中的內置組件,分為容器組件和基礎組件兩種。例如,Row和Column都屬於容器組件,可容納其他組件;Text和Button組件屬於基礎組件。[10]
ArkTS使用單執行緒模型,對象跨執行緒使用序列化方式通過ArrayBuffer和SharedArrayBuffer共享。[11]
示例代碼
import ArkTS
// Index.ets
import router from '@ohos.router';
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// Add a button to respond to user clicks.
Button() {
Text('Next')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
// Bind the onClick event to the Next button so that clicking the button redirects the user to the second page.
.onClick(() => {
router.pushUrl({ url: 'pages/Second' })
})
}
.width('100%')
}
.height('100%')
}
}
其中,@ohos.router
路由庫實現了頁面的流轉,調用前需在 main_pages.json 文件中聲明。[12]
Remove ads
應用
- 鴻蒙原生版淘寶通過使用ArkUI和ArkTs能力,將購物結算場景性能提升至安卓版本的1.5 倍。[13]
參考文獻
Wikiwand - on
Seamless Wikipedia browsing. On steroids.
Remove ads