鸿蒙装饰器学习资料

装饰器使用的时候如果是 struct（结构体内部使用）就不需要 function 关键字。

装饰器使用的时候 是采用就近原则 （如 内部样式名字和外部一样的，那么将使用内部名字）。

自定义控件 @Builder 装饰器使用

//方式一
@Component
struct CustomerItemView {
  build(){
    Row() {
      Text("Component 装饰器")
    }
  }
}
// 方式二
@Component
struct CustomerItemView {
  @Builder item() {
    Row() {
      Text("Builder 装饰器")
    }
  }
  
  build(){
    
  }
}
/**
方式三
 * @Builder
*  自定义
 */
@Builder function item() {
  Row() {
    Text("Builder 装饰器")
  }
}

样式 @Styles

//方式一
@Styles function customerStyle() {
  .width(200)
  .width(40)
  .backgroundColor(Color.Blue)
}
//方式二
@Component
struct Index {

  @Styles customerStyle() {
    .width(200)
    .width(40)
    .backgroundColor(Color.Blue)
  }
}

扩展控件样式 @Extend 装饰器

/**
 * @Extend
 * 控件样式扩展修饰器
 */
@Extend(Text) function Index_textStyle() {
  .fontSize(30)
  .fontColor(Color.Blue)
}

状态样式 stateStyles ： 点击了，获取焦点 等

Text(this.message)
  .fontSize(50)
  .stateStyles({//看到对象， 就直接使用 {}, stateStyles 是状态
    normal: {
    },
    pressed: {
    }
  })

数据通信

单向通信 @Prop

@Prop childMessage: string//不能给定默认值。
/**
* 例如
*/
// 自定义 子组件
@Component
struct ChildIndex {
  @Prop childMessage: string//不能给定默认值。
  build() {
    Column() {
      Text(this.childMessage)
        .fontSize(30)
        .fontColor(Color.Green)

      Button("点击改变 子 childMessage 值")
        .onClick(()=>{
          this.childMessage = ""
        })
    }
  }
}

// 父 组件 调用
ChildIndex({childMessage: this.message})

总结：@Prop 是 父 传 子 的装饰器，值不能逆向改变

双向

/**
* 例如
*/
// 自定义 子组件
@Component
struct ChildIndex {
  @Link childMessage: string//不能给定默认值。
  build() {
    Column() {
      Text(this.childMessage)
        .fontSize(30)
        .fontColor(Color.Green)

      Button("点击改变 子 childMessage 值")
        .onClick(()=>{
          this.childMessage = "子组件改变了 Message"
        })
    }
  }
}
// 父 组件调用
ChildIndex({childMessage: $message})//这里唯一和 @Prop 不一样的，不然会有错误提示，即使错误提示了也能正常预览，（如下图：）

数据多层通信 @Provide @Comsume

@Entry
@Component
struct Index {

  //index.message.data 通信的唯一key,才知道谁是需要改变的
  @Provide("index.message.data") message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(20)
          .fontColor(Color.Blue)

        Button("点击改变 父 message 值")
          .onClick(() => {
            this.message = "Hello 变了"
          })

        ChildIndex()
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
struct ChildIndex {
  build() {
    Column() {
      Text("子组件")
        .fontSize(30)
        .fontColor(Color.Green)

      Button("点击改变 子 childMessage 值")
        .onClick(()=>{

        })

      Child2Index()
    }
  }
}

@Component
struct Child2Index {
  @Consume("index.message.data") chil2Message: string//不能给定默认值。
  build() {
    Column() {
      Text(this.chil2Message)
        .fontSize(30)
        .fontColor(Color.Green)

      Button("点击改变 孙 chil2Message 值")
        .onClick(()=>{
          this.chil2Message = "孙组件改变了 Message"
        })
    }
  }
}
总结： 在使用过程 须要指定 key 的内容，不然会提示错误