方舟UI框架

方舟UI框架（簡稱ArkUI^[1]，原名方舟開發框架）是一個由華為^[2]開發的聲明式的用戶界面框架，用於在原生鴻蒙、OpenHarmony以及Oniro OS應用程式上構建用戶界面。ArkUI採用基於TypeScript聲明式UI語法擴展而來的ArkTS（英語：ArkTS）語言，同時也支持使用鴻蒙標記語言（HarmonyOS Markup Language，縮寫HML）、JavaScript和CSS以類似Vue.js 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]

UI元素

頁面是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]

應用

• 鴻蒙原生版淘寶通過使用ArkUI和ArkTs能力，將購物結算場景性能提升至安卓版本的1.5 倍。^[13]