鸿蒙-样式服用

1. 使用 @Styles 装饰器(适用于简单样式复用)-

仅限当前组件或页面内复用,无法跨文件使用

less 复制代码
@Styles function TxtStyle() {
  .width(px2vp(300))
  .height(px2vp(100))
  .backgroundColor(Color.Blue)
  .margin({ top: px2vp(100) })
  .border({ width: px2vp(2), color: Color.Blue, radius: px2vp(50) })
}

使用 AttributeModifier(适用于全局样式和动态样式)

AttributeModifier 是更强大的样式管理方式,支持跨组件、跨页面复用,并能针对不同状态(如按下、禁用)设置样式。

  • 支持全局导出,可在多个页面复用
  • 可针对不同交互状态(如按下、聚焦)定义不同样式
  • 适用于复杂组件(如 ButtonText)的样式统一管理
less 复制代码
// 定义全局样式类
export class CommonTextModifier implements AttributeModifier<TextModifier> {
  applyNormalAttribute(instance: TextModifier): void {
    instance
      .fontSize(px2fp(50))
      .fontColor(Color.White)
      .backgroundColor(Color.Blue)
      .margin({ top: px2vp(100) });
  }
}

// 使用
Text("测试文字").attributeModifier(new CommonTextModifier())

使用 @Extend 扩展原生组件样式

  • 适用于需要继承或覆盖原生组件样式的场景2。
  • @Styles 更灵活,支持跨文件复用。
scss 复制代码
// 定义扩展样式
export class Text18fp3F8CFF implements AttributeModifier<TextAttribute> {
  applyNormalAttribute(instance: TextAttribute): void {
    instance
      .fontColor(Color.Blue)
      .fontSize(R.float.fp18)
      .fontWeight(FontWeight.Medium);
  }
}

// 使用
Text("测试文字").attributeModifier(new Text18fp3F8CFF())
相关推荐
vipbic15 分钟前
关于Vue打包的遇到模板引擎解析的引号问题
前端·webpack
qq_5103515916 分钟前
vw 和 clamp()
前端·css·html
良木林19 分钟前
JS中正则表达式的运用
前端·javascript·正则表达式
JosieBook1 小时前
【SpringBoot】21-Spring Boot中Web页面抽取公共页面的完整实践
前端·spring boot·python
吃饭睡觉打豆豆嘛2 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
前端端2 小时前
claude code 原理分析
前端
GalaxyMeteor2 小时前
Elpis 开发框架搭建第二期 - Webpack5 实现工程化建设
前端
Spider_Man2 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
我的写法有点潮2 小时前
最全Scss语法,赶紧收藏起来吧
前端·css
小高0072 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js