鸿蒙@Styles标签

@Styles标签

@Styles标签跟Android style类似，分为全局和组件内

全部定义

@Styles function xx {}

组件内定义

@Styles xxx{}

引用时组件内高于全局的

/**
 * 全局styles样式
 */
@Styles function globalFancy(){
  .width(100)
  .height(150)
  .backgroundColor(Color.Pink)
}


//页面入口
@Entry
@Component
struct StylesPage{

  @State heightNum:number = 100

  @Styles selfFancy(){
    .width(120)
    .height(this.heightNum)
    .backgroundColor(Color.Yellow)
    .onClick(()=>{
      this.heightNum = 180
    })
  }

  build(){

    Column({space:10}){
      Text("全局引用styles")
        .globalFancy()
        .fontSize(25)

      Text("组件内的style")
        .selfFancy()
        .fontSize(18)
    }

  }
}

@Extend

类似于kotlin的扩展函数

//定义
@Extend(Text) function textSizeFancy(size:number){
  .fontColor(Color.Red)
  .fontSize(size)
}
//使用
 Text("@Extend扩展方法").textSizeFancy(18)