【鸿蒙学习笔记】@State装饰器：组件内状态

官方文档 @State装饰器：组件内状态

[Q&A] @State装饰器作用

@State装饰的变量，当变量改变时，UI会发生对应的渲染改变。

[Q&A] @State装饰器特点

1. @State是 私有的，只能从组件内部访问。
2. @State装饰的变量必须初始化，不能为空。
3. @State装饰的变量支持的类型：Object，class，String，number，boolean，enum，以及这些类型对应的数组。
4. 嵌套类型以及数组中对象的属性无法触发视图更新。
5. @State装饰的变量生命周期与其所属自定义组件的生命周期相同。
6. @State装饰的变量与子组件中的@Prop装饰变量之间建立单向数据同步,与@Link、@ObjectLink装饰变量之间建立双向数据同步。

样例：装饰简单类型的变量

@Entry
@Component
struct PracExample {
  @State message: string = 'Hello World';
  @State count: number = 0;

  build() {
    Column() {
      Text(this.message).fontSize(30).fontWeight(FontWeight.Bold).width('100%').backgroundColor(Color.Orange).textAlign(TextAlign.Center)
        .onClick(() => {
          this.message = "Hello ArkTS!"
        })

      Button(`click times: ${this.count}`)
        .onClick(() => {
          this.count += 1;
        }).width('100%')

    }.height('100%')
  }
}

样例：装饰class对象类型的变量

class Title {
  public value: string;

  constructor(value: string) {
    this.value = value;
  }
}

@Entry
@Component
struct PracExample {
  build() {
    Column() {
      ShowComponent({ count: 1, increaseBy: 2 }).width(300)

      Divider().height(10).backgroundColor(Color.Red)

      ShowComponent({ title: new Title('Hello World 2'), count: 7 })
    }
  }
}

@Component
struct ShowComponent {
  @State title: Title = new Title('Hello World');
  @State count: number = 0;
  private increaseBy: number = 1;

  build() {
    Column() {
      Text(`${this.title.value}`).margin(10).fontSize(20)
      Button(`修改标题`).width('100%').margin(10)
        .onClick(() => {
          this.title.value = this.title.value === 'Hello ArkUI' ? 'Hello World' : 'Hello ArkUI';
        })

      Button(`总数加1 = ${this.count}`).width('100%').margin(10)
        .onClick(() => {
          this.count += this.increaseBy;
        })
    }
  }
}

样例：装饰Map类型变量

@Entry
@Component
struct PracExample {
  @State map: Map<number, string> = new Map([[0, "a"], [1, "b"], [3, "c"]]);

  build() {
    Column() {
      ForEach(Array.from(this.map.entries()), (item: [number, string]) => {
        Row() {
          Text(`${item[0]}`).fontSize(30)
          Text('→').fontSize(30)
          Text(`${item[1]}`).fontSize(30)
        }
      })
      Button('初始化').width('100%').onClick(() => {
        this.map = new Map([[0, "a"], [1, "b"], [3, "c"]]);
      })
      Button('追加新值').width('100%').onClick(() => {
        this.map.set(4, "d");
      })
      Button('清除').width('100%').onClick(() => {
        this.map.clear();
      })
      Button('修改第1个值').width('100%').onClick(() => {
        this.map.set(0, "aa");
      })
      Button('删除第一个值').width('100%').onClick(() => {
        this.map.delete(0);
      })
    }.width('100%')
  }
}

样例：装饰Set类型变量

@Entry
@Component
struct PracExample {
  @State message: Set<number> = new Set([5, 1, 2, 3, 4]);

  build() {
    Column() {
      ForEach(Array.from(this.message.entries()), (item: [number, string]) => {
        Text(`${item[0]}`).fontSize(30)
      })
      Button('init set').width('100%').onClick(() => {
        this.message = new Set([0, 1, 2, 3, 4]);
      })
      Button('set new one').width('100%').onClick(() => {
        this.message.add(5);
      })
      Button('clear').width('100%').onClick(() => {
        this.message.clear();
      })
      Button('删除元素5').width('100%').onClick(() => {
        this.message.delete(5);
      })
    }.width('100%')
  }
}

样例：State支持联合类型实例

@Entry
@Component
struct PracExample {
  build() {
    Column() {
      MyComponent()
    }
  }
}

@Component
struct MyComponent {
  @State count: number | undefined = 0;

  build() {
    Column() {
      Text(`count(${this.count})`).width('100%').textAlign(TextAlign.Center).fontSize(20)
      Button('undefined').width('100%')
        .onClick(() => {
          this.count = undefined;
        }).margin(20)
    }
  }
}