零基础开始学习鸿蒙开发-@State的使用以及定义

1.@State组件介绍

首先定义 @State为鸿蒙开发的一个状态组件，当它修饰的组件发生改变时，UI也会相应的刷新，简单介绍就是这样，下面我们用代码去体会一下。

2.定义DeliverParam类

首先定义一个模型类，类里面定义一个构造函数，即constructor方法，这个方法主要是初始化类的成员变量，给成变量赋值。

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

3.自定义MySate组件

用于调用DeliverParam类，并且初始化成员变量value，并且用@state修饰count计数器，通过点击按钮来观察数值的变化。

@Component
struct MySate {@State title: DeliverParam = new DeliverParam('你好，小度');@State count: number = 0;private increaseBy: number = 1;build() {Column() {Text(`${this.title.value}`).margin(10)Button(`点击改变内容`).onClick(() => {// @State变量的更新将触发上面的Text组件内容更新this.title.value = this.title.value === '你好，小度' ? '我在' : '你好，小度';}).width(300).margin(10)Button(`点我数值增加 = ${this.count}`).onClick(() => {// @State变量的更新将触发该Button组件的内容更新this.count += this.increaseBy;}).width(300).margin(10).backgroundColor( Color.Orange)}}
}

4.定义入口类，调用MySate组件，监听被修饰的DeliverParam的成员value值和count值的变化。

@Entry
@Component
struct EntrySate {build() {Column() {// 此处指定的参数都将在初始渲染时覆盖本地定义的默认值，并不是所有的参数都需要从父组件初始化MySate({ count: 1, increaseBy: 2 }).width(300)// MyComponent({ title: new Model('Hello World 2'), count: 7 })}}
}

5.完整代码如下：

class DeliverParam {public value: string;constructor(value: string) {this.value = value;}
}@Entry
@Component
struct EntrySate {build() {Column() {// 此处指定的参数都将在初始渲染时覆盖本地定义的默认值，并不是所有的参数都需要从父组件初始化MySate({ count: 1, increaseBy: 2 }).width(300)// MyComponent({ title: new Model('Hello World 2'), count: 7 })}}
}@Component
struct MySate {@State title: DeliverParam = new DeliverParam('你好，小度');@State count: number = 0;private increaseBy: number = 1;build() {Column() {Text(`${this.title.value}`).margin(10)Button(`点击改变内容`).onClick(() => {// @State变量的更新将触发上面的Text组件内容更新this.title.value = this.title.value === '你好，小度' ? '我在' : '你好，小度';}).width(300).margin(10)Button(`点我数值增加 = ${this.count}`).onClick(() => {// @State变量的更新将触发该Button组件的内容更新this.count += this.increaseBy;}).width(300).margin(10).backgroundColor( Color.Orange)}}
}