鸿蒙-样式服用

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

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

@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 是更强大的样式管理方式，支持跨组件、跨页面复用，并能针对不同状态（如按下、禁用）设置样式。

• 支持全局导出，可在多个页面复用
• 可针对不同交互状态（如按下、聚焦）定义不同样式
• 适用于复杂组件（如 Button、Text）的样式统一管理

// 定义全局样式类
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 更灵活，支持跨文件复用。

// 定义扩展样式
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())