5️⃣标准计算器学习组件完结篇

注：转自Tuer白晓明，原文地址：https://ost.51cto.com/posts/10751

本系列文章共有五篇，细致描述了如何学习ArkUI组件实现计算器的功能，以下为正文

3.11 @State注解

@State装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的build方法进行UI刷新。
@State状态数据具有以下特征：

• 支持多种类型：允许class、number、boolean、string强类型的按值和按引用类型。允许这些强类型构成的数组，即Array、Array、Array、Array。不允许object和any。
• 支持多实例：组件不同实例的内部状态数据独立。
• 内部私有：标记为@State的属性时私有变量，只能在组件内访问。
• 需要本地初始化：必须为所有@State变量分配初始值，将变量保持未初始化可能导致框架行为未定义。
• 创建自定义组件时支持通过状态变量名设置初始值：在创建组件实例时，可以通过变量名显式指定@State状态属性的初始值。

// 实现点击按钮更改文本内容，显示点击次数
@Entry
@Component
struct StateExample {
  @State clickNum: number = 0;

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button(`这是第${this.clickNum}次点击按钮`)
        .fontSize(25)
        .fontWeight(FontWeight.Bold)
        .height(64)
        .onClick(() => {
          this.clickNum++;
        })
    }
    .width('100%')
    .height('100%')
  }
}

OpenHarmony计算器-ETS版