七、Harmony OS 之状态装饰器

@State：@State装饰器的变量拥有其所属组件的状态，可以作为其子组件单向和双向同步的数据源。当其数值改变时，会引起相关组件的渲染刷新。

@Prop：@Prop装饰的变量可以和父组件建立单向同步关系，@Prop装饰的变量二hi可变的，但修改不会同步回父组件。

@Link：@Link装饰的变量和父组件构建双向同步关系的状态变量，父组件会接受来自@Link装饰的变量的修改的同步，父组件的更新也会同步给@Link装饰的变量。

@Provide/@Consume：@Provide/@Consume装饰的变量用于跨组件层级（多层组件）同步状态变量，可以不需要通过参数命名机制传递，通过alias（别名）或者属性名绑定。

@Observed：@Observed装饰class，需要观察多层嵌套场景的class需要被@Observed装饰。单独使用@Observed没有任何作用，需要和@ObjectLink、@Prop连用。

@ObjectLink：@ObjectLink装饰的变量接收@Observed装饰的class的实例，应用于观察多层嵌套场景，和父组件的数据源构建双向同步。

@State------>@Prop 和 @State <--------> @Link

驱动build()更新

@State ------> @Prop(this.进行传参)

@State -------> @Link(传参使用$)

@Entry
@Component
struct StateManagement {
  // @State 必须初始化
  @State name: string = '帝心'
  build() {
    Row() {
      Column() {
        Text(this.name).StateManagement_textStyle()
        Button('你干嘛~~').StateManagement_btnStyle(() => {
          this.name = this.name === '帝心' ? '庄生' : '帝心'
        })
        Divider()
        StateManagement_prop({content_prop:this.name})
        Divider()
        // 如果是 state <----> link 参数传递时，需要使用$变量名进行传递
        StateManagement_link({content_link:$name})
      }
      .width('100%')
    }
    .height('100%')
  }
}
// 踩坑注意： 自定义组件、自定义样式的函数名称 要保证在整个项目中是唯一的否则会报错!!
//          可以使用 文件名_样式名（组件名） 来命名样式函数或组件函数
//
// 声明一个自定义组件
// 存放一个 @Prop 装饰的状态数据，方便父子组件之间进行数据传递和同步 State -----> Prop
@Component
struct StateManagement_prop{
  // 组件的形参
  // @Prop 装饰的变量不允许初始化赋值
  @Prop content_prop:string
  build(){
    Column(){
      // 父组件数据修改，子组件的数据同步变化
      Text('prop:' + this.content_prop).StateManagement_textStyle()
      // 修改子组件的数据，父组件不同步变化
      Button('修改prop数据').StateManagement_btnStyle(() => {
        this.content_prop = 'HarmonyOS4.0'
      })
    }
  }
}
// 存放一个 @Link 装饰的状态数据
@Component
struct StateManagement_link{
  @Link content_link: string
  build() {
    Column() {
      Text('Link:' + this.content_link).StateManagement_textStyle()
      Button('修改link数据').StateManagement_btnStyle(() => {
        this.content_link = '全网最细'
      })
    }
  }
}
// text样式封装
@Extend(Text) function StateManagement_textStyle(){
  .fontSize(30)
  .fontWeight(FontWeight.Bold)
  .fontColor(Color.Green)
}
// button样式封装
@Extend(Button) function StateManagement_btnStyle(click:Function){
  .fontSize(30)
  .onClick(()=>{
    click()
  })
}