HarmonyOS应用开发实战：猫猫大作战-@Styles 通用样式复用
前言
@Styles是 ArkUI 中提取通用属性集的装饰器。不同于@Extend限定组件类型，@Styles对所有组件通用，适合封装圆角、阴影、内边距等跨组件样式。
一、@Styles 基础
// 全局 @Styles@StylesfunctioncardStyle(){.backgroundColor('#FFFFFF').borderRadius(16).padding(16).shadow({radius:8,color:'rgba(0,0,0,0.1)'})}// 使用Column(){Text('卡片内容')}.cardStyle()Row(){Text('行卡片')}.cardStyle()二、组件内 @Styles
@Componentstruct GamePanel{@StylespanelTitle(){.fontSize(18).fontWeight(FontWeight.Bold).fontColor('#2C3E50').margin({bottom:8})}build(){Column(){Text('游戏规则').panelTitle()Text('点击列投放猫咪').panelTitle()}}}三、@Styles vs @Extend
| 特性 | @Styles | @Extend |
|---|---|---|
| 作用范围 | 所有组件 | 指定组件类型 |
| 传参 | ❌ 不支持 | ✅ 支持 |
| 定义位置 | 全局/组件内 | 全局 |
| 适用场景 | 通用属性集 | 组件特有样式 |
四、游戏中的应用
@StylesfunctiongameShadow(){.shadow({radius:8,color:'rgba(0,0,0,0.15)',offsetY:4})}@StylesfunctionroundedBox(){.borderRadius(12).padding(16).backgroundColor('#FFFFFF')}// 使用Column(){Text('排行榜').fontSize(18).fontWeight(FontWeight.Bold)// ...}.roundedBox().gameShadow()五、最佳实践
- 通用边框用 @Styles：圆角、阴影、背景色
- 组件特定样式用 @Extend：按钮颜色、文字大小
- 全局定义：通用样式在全局定义，组件内定义局部样式
总结
@Styles在所有组件上添加通用属性集，适合圆角、阴影等跨组件样式。核心要点：全局通用属性、 不支持传参、 与 @Extend 互补。
如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！
相关资源：
- @Styles 官方文档
- 第 105 篇：wrapBuilder
- 第 107 篇：@Extend
- 第 108 篇：EventHub