前言

@Styles 是 ArkUI 中提取通用属性集的装饰器。不同于 @Extend 限定组件类型，@Styles 对所有组件通用，适合封装圆角、阴影、内边距等跨组件样式。

一、@Styles 基础

// 全局 @Styles
@Styles
function cardStyle() {
  .backgroundColor('#FFFFFF')
  .borderRadius(16)
  .padding(16)
  .shadow({ radius: 8, color: 'rgba(0,0,0,0.1)' })
}

// 使用
Column() { Text('卡片内容') }.cardStyle()
Row() { Text('行卡片') }.cardStyle()

二、组件内 @Styles

@Component
struct GamePanel {
  @Styles
  panelTitle() {
    .fontSize(18)
    .fontWeight(FontWeight.Bold)
    .fontColor('#2C3E50')
    .margin({ bottom: 8 })
  }

  build() {
    Column() {
      Text('游戏规则').panelTitle()
      Text('点击列投放猫咪').panelTitle()
    }
  }
}

三、@Styles vs @Extend

四、游戏中的应用

@Styles
function gameShadow() {
  .shadow({ radius: 8, color: 'rgba(0,0,0,0.15)', offsetY: 4 })
}

@Styles
function roundedBox() {
  .borderRadius(12)
  .padding(16)
  .backgroundColor('#FFFFFF')
}

// 使用
Column() {
  Text('排行榜').fontSize(18).fontWeight(FontWeight.Bold)
  // ...
}
.roundedBox()
.gameShadow()

五、最佳实践

1. 通用边框用 @Styles：圆角、阴影、背景色
2. 组件特定样式用 @Extend：按钮颜色、文字大小
3. 全局定义：通用样式在全局定义，组件内定义局部样式

总结

@Styles 在所有组件上添加通用属性集，适合圆角、阴影等跨组件样式。核心要点：全局通用属性、 不支持传参、 与 @Extend 互补。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• @Styles 官方文档
• 第 105 篇：wrapBuilder
• 第 107 篇：@Extend
• 第 108 篇：EventHub