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%')
  }
}
相关推荐
好好研究1 小时前
学习栈和队列的插入和删除操作
数据结构·学习
新中地GIS开发老师2 小时前
新发布:26考研院校和专业大纲
学习·考研·arcgis·大学生·遥感·gis开发·地理信息科学
SH11HF3 小时前
小菜狗的云计算之旅,学习了解rsync+sersync实现数据实时同步(详细操作步骤)
学习·云计算
Frank学习路上3 小时前
【IOS】XCode创建firstapp并运行(成为IOS开发者)
开发语言·学习·ios·cocoa·xcode
Chef_Chen4 小时前
从0开始学习计算机视觉--Day07--神经网络
神经网络·学习·计算机视觉
X_StarX6 小时前
【Unity笔记02】订阅事件-自动开门
笔记·学习·unity·游戏引擎·游戏开发·大学生
MingYue_SSS6 小时前
开关电源抄板学习
经验分享·笔记·嵌入式硬件·学习
weixin_437398217 小时前
转Go学习笔记(2)进阶
服务器·笔记·后端·学习·架构·golang
慕y2747 小时前
Java学习第十六部分——JUnit框架
java·开发语言·学习
peace..8 小时前
温湿度变送器与电脑进行485通讯连接并显示在触摸屏中(mcgs)
经验分享·学习·其他