什么是 ArkUI

方舟开发框架（简称 ArkUI）：为 HarmonyOS 应用的 UI 开发提供了完整的基础设施，包括简洁的UI语法、丰富的 UI 功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发。

ArkTS：是 UI 开发语言，基于 TypeScript（简称TS）语言扩展而来，是 TS 的超集。扩展能力包含各种装饰器、自定义组件、UI描述机制。

声明式开发范式：基于 ArkTS 的声明式开发范式的方舟开发框架是一套开发极简、高性能、支持跨设备的 UI 开发框架，提供了构建 HarmonyOS 应用 UI 所必需的能力。

ArkTS 对 UI 的语法支持

  • 装饰器：用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中 @Entry、@Component都是装饰器。
    • @Component 表示自定义组件
    • @Entry 表示该自定义组件为入口组件
  • UI 描述：以声明式的方式来描述 UI 的结构，例如 build() 方法中的代码块。
  • 自定义组件：可复用的 UI 单元，可组合其他组件，如上述被 @Component 装饰的 struct Hello。
  • 系统组件：ArkUI 框架中默认内置的基础和容器组件，可直接被开发者
    调用，比如示例中的 Column、Text、Divider、Button。
  • 属性方法：组件可以通过链式调用配置多项属性，如 fontSize()、width()、height()、backgroundColor()等。
  • 事件方法：组件可以通过链式调用设置多个事件的响应逻辑，如跟随
    在 Button 后面的 onClick()。

自定义组件的规则

  • @Entry 装饰的自定义组件，其 build() 函数下的根节点唯一且必要，且必须为容器组件，其中 ForEach 禁止作为根节点。
  • @Component 装饰的自定义组件，其 build() 函数下的根节点唯一且必要，可以为非容器组件，其中 ForEach 禁止作为根节点。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@Entry
@Component
struct MyComponent {
    build() {
        // 根节点唯一且必要，必须为容器组件
        Row() {
            ChildComponent()
        }
    }
}
@Component
struct ChildComponent {
    build() {
        // 根节点唯一且必要，可为非容器组件
        Image('test.jpg')
    }
}

组件描述的规则

  • 不允许在 UI 描述中声明本地变量
  • 不允许在 UI 描述里直接使用 console
  • 不允许创建本地的作用域；即不支持 for/while
  • 不允许调用除了被 @Builder 装饰以外的方法
  • 不允许 switch 语法，如果需要使用条件判断，请使用 if/else

ArkUI 常用组件