Harmony ArkTs Basics

ArkTS is a programming language designed for building high-performance applications. ArkTS optimizes the TypeScript syntax to provide higher performance and development efficiency.

Overview of Basic Syntax#

Decorators: Used to decorate classes, structures, methods, and variables, giving them special meanings. For example, @Entry, @Component, and @State are all decorators; @Component indicates a custom component, @Entry indicates that this custom component is an entry component, and @State indicates a state variable in the component, where changes to the state variable will trigger a UI refresh.
UI Description: Describes the structure of the UI in a declarative manner, such as the code block in the build() method.
Custom Components: Reusable UI units that can compose other components, such as the struct Hello decorated with @Component mentioned above.
System Components: Basic and container components that are built into the ArkUI framework by default and can be directly called by developers, such as Column, Text, Divider, and Button in the example.
Property Methods: Components can configure multiple properties through method chaining, such as fontSize(), width(), height(), backgroundColor(), etc.
Event Methods: Components can set the response logic for multiple events through method chaining, such as onClick() following the Button.
For specific usage of system components, property methods, and event methods, please refer to the declarative development paradigm based on ArkTS.

In addition, ArkTS extends various syntax paradigms to make development more convenient:

@Builder/@BuilderParam: Special methods for encapsulating UI descriptions, allowing for fine-grained encapsulation and reuse of UI descriptions.
@Extend/@Styles: Extends built-in components and encapsulates property styles, allowing for more flexible combinations of built-in components.
stateStyles: Polymorphic styles that can set different styles based on the internal state of the component.

Declarative UI Description#

ArkTS combines and extends components in a declarative manner to describe the application's UI, while also providing basic methods for configuring properties, events, and child components, helping developers implement application interaction logic.

Creating Components#

Depending on the component constructor method, creating components can be done with or without parameters.

No Parameters#

If the component's interface definition does not include required constructor parameters, then the "()" following the component does not need to be configured with any content. For example, the Divider component does not include constructor parameters.

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

With Parameters#

If the component's interface definition includes constructor parameters, then the "()" following the component needs to be configured with the corresponding parameters.

// Parameter of string type
Text("test");
// $r format to introduce application resources, applicable in multilingual scenarios
Text($r("app.string.title_value"));
// No-parameter form
Text();

Configuring Properties#

Property methods configure the styles and other attributes of system components using method chaining with “.”, and it is recommended to write each property method on a separate line.

Configure the font size of the Text component.

Text("test").fontSize(12);

Configure multiple properties of a component.

Image("test.jpg").alt("error.jpg").width(100).height(100);

In addition to directly passing constant parameters, variables or expressions can also be passed.

Text("hello").fontSize(this.size);
Image("test.jpg")
  .width(this.count % 2 === 0 ? 100 : 200)
  .height(this.offset + 100);

Configuring Events#

Event methods configure the events supported by system components using method chaining with “.”, and it is recommended to write each event method on a separate line.

Use arrow function expressions to configure the event methods of components, requiring the use of “() => {...}” to ensure the function is bound to the component while conforming to ArkTS syntax specifications.

Button("add counter").onClick(() => {
  this.counter += 2;
});

Use the component's member function to configure the event method of the component, requiring bind this. ArkTS syntax does not recommend using member functions with bind this to configure the event methods of components.

myClickHandler(): void {
  this.counter += 2;
}
...
Button('add counter')
  .onClick(this.myClickHandler.bind(this))

Using declared arrow functions allows for direct invocation without needing to bind this.
The this inside arrow functions is lexically scoped, determined by the context. Anonymous functions may have unclear this references, which are not allowed in ArkTS.

Configuring Child Components#

If a component supports child component configuration, then the UI description for the child components should be added in the trailing closure "{...}". Components like Column, Row, Stack, Grid, and List are all container components.

Column() {
  Row() {
    Image('test1.jpg')
      .width(100)
      .height(100)
    Button('click +1')
      .onClick(() => {
        console.info('+1 clicked!');
      })
  }
}

This article is synchronized and updated to xLog by Mix Space
The original link is http://www.sroxck.top/posts/harmony/arkts-base