鸿蒙-样式服用

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())
相关推荐
A_ugust__7 小时前
vue3+ts 封装跟随弹框组件,支持多种模式【多选,分组,tab等】
前端·javascript·vue.js
林九生7 小时前
【Vue3】v-dialog 中使用 execCommand(‘copy‘) 复制文本失效的原因与解决方案
前端·javascript·vue.js
yi碗汤园7 小时前
【一文了解】C#的StringSplitOptions枚举
开发语言·前端·c#
cxr8288 小时前
BMAD框架实践:掌握story-checklist提升用户故事质量
前端·人工智能·agi·智能体·ai赋能
emma羊羊9 小时前
【xsslabs】第12-19关
前端·javascript·靶场·xss
真的想不出名儿11 小时前
vue项目引入字体
前端·javascript·vue.js
胡楚昊12 小时前
Polar WEB(1-20)
前端
吃饺子不吃馅12 小时前
AntV X6图编辑器如何实现切换主题
前端·svg·图形学
余防13 小时前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html
jump_jump13 小时前
前端部署工具 PinMe
运维·前端·开源