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)
  }
}
相关推荐
sealaugh328 小时前
aws(学习笔记第四十八课) appsync-graphql-dynamodb
笔记·学习·aws
水木兰亭8 小时前
数据结构之——树及树的存储
数据结构·c++·学习·算法
鱼摆摆拜拜9 小时前
第 3 章:神经网络如何学习
人工智能·神经网络·学习
遇到困难睡大觉哈哈9 小时前
HarmonyOS 公共事件机制介绍以及多进程之间的通信实现(9000字详解)
华为·harmonyos
aha-凯心9 小时前
vben 之 axios 封装
前端·javascript·学习
幽蓝计划12 小时前
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
开发语言·harmonyos
伍哥的传说12 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
ytttr87312 小时前
matlab通过Q学习算法解决房间路径规划问题
学习·算法·matlab
Georgewu14 小时前
【HarmonyOS】应用开发拖拽功能详解
harmonyos
塞尔维亚大汉14 小时前
鸿蒙内核源码分析(构建工具篇) | 顺瓜摸藤调试鸿蒙构建过程
源码·harmonyos