鸿蒙开发学习笔记：状态管理与事件处理

学习概述

今天深入学习了鸿蒙应用开发中的核心概念：状态管理与事件处理。掌握了如何使用 @ComponentV2 装饰器构建组件，利用 @Local 进行局部状态管理，并通过 .onClick() 实现用户交互逻辑。同时，熟练运用了 .textAlign() 等样式属性来优化界面布局。

🔑 核心知识点

1. 文本对齐方式

使用 .textAlign(TextAlign.Center) 可以确保文本内容在组件容器内水平居中对齐，这对于按钮、计数器等需要视觉平衡的组件至关重要。

Text('示例内容')
  .textAlign(TextAlign.Center)

2. V2 状态管理模型

通过 @ComponentV2 装饰器定义组件，并配合 @Local 装饰器管理组件内部的局部状态。当状态变量发生变化时，框架会自动触发视图刷新。

@ComponentV2
struct Index {
  @Local num: number = 1 // 定义一个初始值为1的局部状态变量
}

3. 点击事件处理

使用 .onClick() 监听用户的点击操作，并在回调函数中编写业务逻辑（如状态变更）。

.onClick(() => {
  // 执行具体的逻辑代码
  this.num++ 
})

💻 实战案例：简易计数器

本案例实现了一个包含“减”、“数值显示”、“加”三个部分的计数器组件。

代码实现

@Entry
@ComponentV2
struct Index {
  // 定义局部状态变量，初始值为1
  @Local num: number = 1

  build() {
    Column() {
      Row() {
        // 【减号按钮】
        Text('-') // 修正：原代码为 '_'，根据计数器逻辑通常为 '-'
          .width(40)
          .height(40)
          .border({ width: 1, color: '#999', radius: { topLeft: 3, bottomLeft: 3 } })
          .textAlign(TextAlign.Center)
          .onClick(() => {
            // 只有当数值大于1时才允许减少
            if (this.num > 1) {
              this.num--
            }
          })

        // 【数值显示区域】
        Text(this.num.toString())
          .width(40)
          .height(40)
          .textAlign(TextAlign.Center)
          .border({ width: { top: 1, bottom: 1 }, color: '#999' })

        // 【加号按钮】
        Text('+')
          .width(40)
          .height(40)
          .border({ width: 1, color: '#999', radius: { topRight: 3, bottomRight: 3 } })
          .textAlign(TextAlign.Center)
          .onClick(() => {
            // 点击后数值自增
            this.num++
          })
      }
    }
    .padding(50) // 设置整体内边距
  }
}

运行效果展示

如图所示，界面中央呈现了一个紧凑的计数器：

• 左侧为圆角矩形减号按钮。
• 中间为当前数值显示，上下有边框。
• 右侧为圆角矩形加号按钮。
• 点击两侧按钮可实时改变中间数字，且数字始终保持居中显示。

📝 学习总结

通过本次练习，我理解了以下关键流程：

1. 状态驱动视图：修改 @Local 装饰的变量 num，UI 会自动重新渲染，无需手动操作 DOM 或组件树。
2. 事件绑定：.onClick() 是连接用户操作与逻辑代码的桥梁。
3. 样式组合：链式调用（.width(), .border(), .textAlign()）让样式定义更加清晰流畅。

下一步计划尝试更复杂的状态共享场景（如 @Link 或 @Prop），并探索更多手势事件的处理。