HarmonyOS NEXT学习——@Styles、@Extend、stateStyles

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

  • 仅支持通用属性通用事件
  • 不支持参数
  • 可以定义全局和组件内使用,全局使用需要加function
javascript 复制代码
// 全局
@Styles function functionName() { ... }

// 在组件内
@Component
struct FancyUse {
  @Styles fancy() {
    .height(100)
  }
}
  • 组件内@Styles的优先级高于全局@Styles。
javascript 复制代码
// 定义在全局的@Styles封装的样式
@Styles function globalFancy  () {
  .width(100)
  .height(100)
  .backgroundColor(Color.Pink)
}

@Entry
@Component
@Preview
struct FancyUse {
  @State heightValue: number = 100
  // 定义在组件内的@Styles封装的样式
  @Styles fancy() {
    .width(200)
    .height(this.heightValue)
    .backgroundColor(Color.Yellow)
    .onClick(() => {
      this.heightValue = 200
    })
  }

  build() {
    Column({ space: 10 }) {
      // 使用全局的@Styles封装的样式
      Text('FancyA')
        .globalFancy()
        .fontSize(30)
      // 使用组件内的@Styles封装的样式
      Text('FancyB')
        .fancy()
        .fontSize(30)
      //组件内优先级高于全局
      Text('FancyAB')
        .globalFancy()
        .fancy()
        .fontSize(30)
    }
    .alignItems(HorizontalAlign.Start)
  }
}

@Extend装饰器:定义扩展组件样式

  • @Styles用于样式的扩展
  • 可以传参数
  • 仅能全局定义
javascript 复制代码
@Extend(Text) function fancyText(weightValue: number, color: Color,clickE:()=>void) {
  .fontStyle(FontStyle.Italic)
  .fontSize(weightValue)
  .backgroundColor(color)
  .onClick(clickE)
}
@Entry
@Component
struct FancyUse {
  @State label: string = 'Hello World'

  onClickHandler(){
    console.log('40')
  }
  build() {
    Column() {
      Text(`${this.label}`)
        .fancyText(30, Color.Blue,()=>{console.log('30')})
      Text(`${this.label}`)
        .fancyText(40, Color.Pink,()=>{this.onClickHandler()})
      Text(`${this.label}`)
        .fancyText(50, Color.Orange,()=>{console.log('50')})
    }
    .alignItems(HorizontalAlign.Start)
  }
}

三个点击事件

stateStyles 多态样式

stateStyles是属性方法,可以根据UI内部状态来设置样式,类似于css伪类,但语法不同。ArkUI提供以下五种状态:

  • focused:获焦态。
  • normal:正常态。
  • pressed:按压态。
  • disabled:不可用态。
  • selected:选中态。
javascript 复制代码
@Entry
@Component
struct FancyUse {
  @State label: string = 'Hello World'

  build() {
    Column() {
      Text(`${this.label}`)
        .stateStyles({
          normal:{
            .backgroundColor(Color.Yellow)
          },
          pressed:{
            .backgroundColor(Color.Pink)
          }
        })
        .fontSize(40)
    }
    .alignItems(HorizontalAlign.Start)
  }
}
相关推荐
Chef_Chen1 分钟前
从0开始学习R语言--Day40--Kruskal-Wallis检验
开发语言·学习·r语言
枫叶丹411 分钟前
【HarmonyOS Next之旅】DevEco Studio使用指南(四十二) -> 动态修改编译配置
华为·harmonyos·deveco studio·harmonyos next
ozawacai25 分钟前
markdown学习笔记(个人向) Part.1
笔记·学习
吃货界的硬件攻城狮31 分钟前
【显示模块】嵌入式显示与触摸屏技术理论
stm32·单片机·嵌入式硬件·学习
rui锐rui1 小时前
大数据学习6:Sqoop数据迁移工具
大数据·学习·sqoop
psybrain1 小时前
脑科学圈| 利用眼动追踪评估演讲情境下焦虑障碍儿童的注视行为
学习·心理学·脑科学·课堂·焦虑·儿童青少年·眼动
序属秋秋秋3 小时前
《C++初阶之内存管理》【内存分布 + operator new/delete + 定位new】
开发语言·c++·笔记·学习
许白掰3 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
B1nna4 小时前
Docker学习
学习·docker·容器
promising-w10 小时前
【运算放大器专题】基础篇
嵌入式硬件·学习