手把手教你用 Ark-TS UI 做一个会 “动” 的计数器：从代码到原理全解析

一、最终效果长什么样？

二、完整代码长这样

@Entry
@Component
struct CounterApp {
  // 用@State标记一个变量count，它的值变化时界面会自动更新
  @State count: number = 0

  build() {
    // Column是一个垂直布局容器，里面的内容会从上到下排列
    Column() {
      // Text组件显示文字，这里显示当前的count值
      Text(`当前计数：${this.count}`)
        .fontSize(24) // 设置字体大小为24像素
        .margin(20) // 给文本周围添加20像素的边距

      // Button组件是一个按钮，点击时触发onClick事件
      Button("点击加1")
        .onClick(() => {
          // 点击按钮时，count的值增加1
          this.count++
        })
        .fontSize(18) // 按钮文字大小18像素
        .padding(15) // 按钮内部的 padding 为15像素
        .backgroundColor('#007DFF') // 按钮背景色为蓝色
        .textColor('#FFFFFF') // 按钮文字颜色为白色
        .cornerRadius(8) // 按钮圆角半径8像素
    }
    // 设置整个Column布局的宽度为屏幕宽度的100%
    .width('100%')
    // 设置整个布局的对齐方式为垂直和水平居中
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

三、逐行代码拆解，零基础也能看懂

1. @Entry 和 @Component
   • @Entry 表示这个组件是应用的入口，程序从这里开始运行。
   • @Component 标记这是一个可复用的组件，里面包含界面和逻辑。
2. @State count: number = 0
   • @State 是 Ark-TS UI 的关键装饰器，它告诉系统：“这个变量count的值会影响界面，一旦它变化，界面要自动更新。”
   • 这里初始化count为 0，也就是计数器的初始值。
3. build() 方法
   • 这个方法定义了组件的界面结构。Ark-TS UI 通过声明式语法描述界面，就像 “画图纸” 一样。
4. Column() 布局容器
   • Column是一个垂直布局容器，里面的组件会从上到下排列。就像一个竖着的盒子，把内容依次装进去。
5. Text 组件显示计数
   • Text(当前计数：\({this.count}`)`：显示一行文字，`\){this.count}会实时替换为count` 变量的值。
   • .fontSize(24)：设置文字大小为 24 像素。
   • .margin(20)：给文本周围添加 20 像素的空白，让界面看起来不拥挤。
6. Button 组件实现点击功能
   • Button("点击加1")：创建一个按钮，显示文字 “点击加 1”。
   • .onClick(() => { this.count++ })：点击按钮时，执行this.count++，也就是让count的值加 1。
   • .fontSize(18)：按钮文字大小 18 像素。
   • .padding(15)：按钮内部的空白区域为 15 像素，让文字看起来不贴着边缘。
   • .backgroundColor('#007DFF')：按钮背景色设置为蓝色。
   • .textColor('#FFFFFF')：按钮文字颜色设置为白色。
   • .cornerRadius(8)：按钮四个角设置为圆角，半径 8 像素，让按钮看起来更圆润。
7. 设置布局的整体样式
   • .width('100%')：让整个Column布局的宽度占满屏幕。
   • .justifyContent(FlexAlign.Center) 和 .alignItems(HorizontalAlign.Center)：让布局内的内容在垂直和水平方向都居中显示，这样按钮和文本会在屏幕正中间。

四、核心原理：为什么界面会自动更新？

五、晒为总结以下：从案例学 Ark-TS UI 的精髓

1. 声明式语法：用简洁的代码描述界面结构，就像画图纸一样直观。
2. 状态管理：@State让数据和界面自动联动，数据变，界面跟着变。
3. 丰富的组件和样式：直接使用Text、Button等组件，通过链式调用快速设置样式，省去了复杂的 CSS 代码。