Mastering Declarative UI with ArkTS: Key Syntax, Components, and State Management

ArkTS is HarmonyOS's primary application development language, extending TypeScript with declarative UI description, custom components, dynamic UI elements, multi‑dimensional state management, and rendering control.

In declarative UI, developers compose and extend components using chainable syntax, for example Text('hello').fontSize(20).fontColor(Color.Red), set event handlers with Button('Click me').onClick(() => { this.myText = 'ArkUI'; }), and define child components inside a closure such as Column() { Text('Hello').fontSize(100) }.

This approach lets developers focus on application logic and structure, improving development efficiency and code maintainability.

Key points and examples:

1. Basic Syntax and Component Creation

Components can be created with or without parameters.

No‑parameter component : components without required constructor arguments, e.g., Divider(). Example:

Column() {
  Text('item 1')
  Divider()
  Text('item 2')
}

Component with parameters : components requiring arguments, e.g., Image('https://weige/my.jpg') or Text('weige').

Image('https://weige/my.jpg')

Text('weige')

2. Configuring Properties

Properties are set via dot‑chaining, for example: Text('weige').fontSize(15) Multiple properties can be configured together:

Image('weige.jpg').alt('error.jpg').width(100).height(100)

3. Configuring Events

Events are attached using lambda expressions:

Button('Click me').onClick(() => {
  this.myText = 'ArkUI';
})

4. Configuring Child Components

If a component supports child components, they are defined inside a trailing closure:

Column() {
  Text('Hello').fontSize(100)
  Divider()
  Text(this.myText).fontSize(100).fontColor(Color.Red)
}

5. State Management

ArkTS provides multi‑dimensional state management; changes to @State variables automatically trigger UI refreshes. Example:

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  build() {
    Column() {
      Text('Hello').fontSize(30)
      Text(this.message).fontSize(30)
      Button() {
        Text('Click Me').fontSize(30)
      }.onClick(() => {
        this.message = 'ArkUI'
      }).width(200).height(50)
    }
  }
}

6. Rendering Control

ArkTS supports conditional rendering, loop rendering, and lazy data loading, allowing the UI to adapt to different application states.

Through these syntax features and examples, developers can efficiently build rich HarmonyOS application interfaces.