ArkTS 基础语法：声明式 UI 描述与自定义组件

1. ArkTS 简介

ArkTS 是 HarmonyOS 应用开发中的一种编程语言，它结合了 TypeScript 的类型检查和声明式 UI 描述方式，帮助开发者更高效地构建用户界面。

2. 声明式 UI 描述

ArkTS 使用声明式语法来定义 UI 结构，通过组件、属性和事件配置实现用户界面开发。

2.1 创建组件

ArkTS 提供了丰富的内置组件，如 Text、Button、Image 等，使用这些组件可以快速构建界面。

@Entry
@Component
struct SimpleUI {
  build() {
    Text("欢迎使用 ArkUI")
      .fontSize(24)
      .textAlign(TextAlign.Center);
  }
}

2.2 配置属性

通过链式方法为组件配置属性，使 UI 元素具有特定的样式或行为。

Text("设置字体大小与颜色")
  .fontSize(20)
  .textColor(Color.Red)
  .italic(true);

2.3 配置事件

为组件绑定事件处理器以响应用户交互。

 @State myTest: string = "world";

 Text(`hello ${this.myTest}`)
        .fontSize(50);

 Button('点我啊')
   .onClick(()=>{
       this.myTest = 'ArkTS'
   })

2.4 配置子组件

使用容器组件如 Column、Row 将多个子组件组合在一起。

Column() {
  Text("标题 1").fontSize(18);
  Text("标题 2").fontSize(16);
}

3. 自定义组件

在 ArkTS 中，可以通过定义自定义组件来实现代码的复用与模块化。

/*
 * 封装组件，并调用
 * */
@Entry
@Component
struct Page{

  build() {
    Column(){
      // 调用组件，显示内容
      Header()
    }
  }
}

// 创建自定义组件
@Component
export struct Header{
  build() {
    Column(){
      Text('Header')
        .width('100%')  // 宽度
        .height(60) // 高度
        .backgroundColor(Color.Red) // 背景色
        .textAlign(TextAlign.Center)  // 对齐方式居中
    }
  }
}

使用其他文件中已经封装好的组件

/*
  调用其他 文件中 export 的组件
 */
import { Header} from './Page'

@Entry
@Component
struct Page1 {

  build() {
    Column(){
      Header()
    }
  }
}

4. 通用属性

ArkTS 提供了大量通用属性，用于设置组件的样式和布局。

华为官方文档

5. 尺寸设置：px 与 vp 的区别

6. 开发示例：计数器组件

代码示例

@Entry
@Component
struct CounterComponent {
  @State count: number = 0;

  build() {
    Column() {
      Text(`当前计数：${this.count}`)
        .fontSize(24)
        .textAlign(TextAlign.Center);

      Button("点击增加计数")
        .onClick(() => {
          this.count++;
        })
        .width(200)
        .height(50);
    }
  }
}

代码解析

凡是过去，皆为序章；凡是未来，皆有可期。