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

@Styles可以定义在组件内或全局,在全局定义时需在方法名前面添加function关键字,组件内定义时则不需要添加function关键字。

组件内@Styles的优先级高于全局@Styles。

框架优先找当前组件内的@Styles,如果找不到,则会全局查找。

ts 复制代码
// 全局
@Styles function functionName() { ... }

// 在组件内
@Component
struct FancyUse {
  @Styles fancy() {
    .height(100)
  }
}
ts 复制代码
// 定义在全局的@Styles封装的样式
@Styles function globalFancy  () {
  .width(150)
  .height(100)
  .backgroundColor(Color.Pink)
}

@Entry
@Component
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)
    }
  }
}
相关推荐
北城以北88888 分钟前
ES6(二)
前端·javascript·es6
朕的剑还未配妥22 分钟前
移动端触摸事件与鼠标事件的触发机制详解
前端
墨鱼鱼27 分钟前
【征文计划】Rokid JSAR 实践指南:打造沉浸式 "声动空间盒" 交互体验
前端
渣哥27 分钟前
多环境配置利器:@Profile 在 Spring 项目中的实战价值
javascript·后端·面试
携欢30 分钟前
Portswigger靶场之Exploiting a mass assignment vulnerability通关秘籍
前端·安全
什么芋泥香蕉33038 分钟前
比 Manus 还好用?这款国产 AI,让 Python 小白也能玩转编程
前端·后端
为java加瓦38 分钟前
前端学AI:如何写好提示词(prompt)
前端·人工智能·prompt
U.2 SSD44 分钟前
Echart仪表盘示例
javascript·echarts
qq_1841776771 小时前
前端自动部署项目到服务器
服务器·前端·javascript
非凡ghost1 小时前
猫眼浏览器(Chrome内核增强版浏览器)官方便携版
前端·网络·chrome·windows·软件需求