04-鸿蒙4.0学习之样式装饰器相关

04-鸿蒙4.0学习之样式装饰器

@styles装饰器：定义组件重用样式

js 复制代码

/**
 * @styles装饰器：定义组件重用样式
 */
@Entry
@Component
struct StyleUI {
  @State message: string = '@styles'

 @Styles commonStyle(){
   .width(200)
   .height(100)
   .backgroundColor(Color.Gray)
   .margin(5)
  }
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold).commonStyle()
        Button().commonStyle()
        Image('').commonStyle()
        Row(){}.commonStyle()
      }
      .width('100%')
    }
    .height('100%')
  }
}
// 外部通用样式函数 使用function 关键字 内部样式函数 内部不需要function  内部优先级 > 外部样式
// 弊端：只能写通用样式 不能传参
//  @Styles function commonStyle(){
//    .width(200)
//    .height(100)
//    .backgroundColor(Color.Gray)
//   }

@Extend 扩展组件样式

js 复制代码

/**
 *@Extend 扩展组件样式
 */
@Entry
@Component
struct ExtendFun {
  @State message: string = '@Extend'
  @State count: number = 0

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Divider()
        Text('HarmonyOS4.0').sizeColor(40, Color.Blue)
        Text('第二行').sizeColor(40, 'red')
        Text('第三行').textStyle(20, "#6699ff")
        Text('第四行').textStyle(50, Color.Pink)
        Button(this.count.toString()).btnStyle(()=>{
          this.count++
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Extend(Text) function sizeColor(fs: number, fc: Color | string) {
  .fontSize(fs)
  .fontColor(fc)
}

@Extend(Text) function textStyle(fs: number, fc: Color | string) {
  .sizeColor(fs, fc)
  .fontStyle(FontStyle.Italic)
  .fontWeight(FontWeight.Bold)
}

@Extend(Button) function btnStyle(click:()=>void) {
  .fontSize(40)
  .width(150)
  .height(50)
  .onClick(()=>{
    click()
  })
}

多态样式

js 复制代码

/**
 * 多态样式
 */
@Entry
@Component
struct StateStyleFun {
  @State message: string = 'stateStyles()'

  build() {
    Row() {
      Column() {
        Button(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .stateStyles({
            normal: {
              .backgroundColor(Color.Red)
            },
            focused: {
              .backgroundColor(Color.Pink)
            },
            pressed: {
              .backgroundColor(Color.Blue)
            }
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}