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%')
  }
}
相关推荐
序属秋秋秋38 分钟前
《C++初阶之内存管理》【内存分布 + operator new/delete + 定位new】
开发语言·c++·笔记·学习
许白掰40 分钟前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
B1nna2 小时前
Docker学习
学习·docker·容器
promising-w8 小时前
【运算放大器专题】基础篇
嵌入式硬件·学习
宝山哥哥8 小时前
网络信息安全学习笔记1----------网络信息安全概述
网络·笔记·学习·安全·网络安全
前端开发与ui设计的老司机8 小时前
从UI设计到数字孪生实战:构建智慧教育的个性化学习平台
学习·ui
X Y O8 小时前
神经网络初步学习3——数据与损失
人工智能·神经网络·学习
霖0010 小时前
C++学习笔记三
运维·开发语言·c++·笔记·学习·fpga开发
巴伦是只猫11 小时前
【机器学习笔记 Ⅲ】1 无监督学习
笔记·学习·机器学习
武昌库里写JAVA12 小时前
vue3面试题(个人笔记)
java·vue.js·spring boot·学习·课程设计