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

server/2025/1/16 0:08:58/

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: uiltin">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 提供了大量通用属性，用于设置组件的样式和布局。

属性	描述	示例
`fontSize()`	设置字体大小	`Text().fontSize(16)`
`textColor()`	设置文字颜色	`Text().textColor(Color.Red)`
`width()`	设置宽度	`Button().width(200)`
`height()`	设置高度	`Button().height(50)`
`padding()`	设置内边距	`Column().padding(10)`
`margin()`	设置外边距	`Row().margin(15)`

华为官方文档

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

单位	描述	应用场景
`px`	物理像素单位，表示屏幕上的真实像素大小。	精细调整组件尺寸时使用
`vp`	虚拟像素单位，适应不同分辨率的屏幕。	适用于跨设备 UI 设计

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

代码示例

@Entry
@Component
struct CounterComponent {@State count: uiltin">number = 0;build() {Column() {Text(`当前计数：${this.count}`).fontSize(24).textAlign(TextAlign.Center);Button("点击增加计数").onClick(() => {this.count++;}).width(200).height(50);}}
}

代码解析

语法/方法	描述
`@State`	定义组件状态，状态变化时自动刷新 UI
`this.count++`	按钮点击时增加计数器数值
`.fontSize()`	设置文字的字体大小
`.onClick()`	设置按钮点击事件