HarmonyOS应用开发实战：猫猫大作战-@Styles 通用样式复用

前言Styles是 ArkUI 中提取通用属性集的装饰器。不同于Extend限定组件类型Styles对所有组件通用适合封装圆角、阴影、内边距等跨组件样式。一、Styles 基础// 全局 StylesStylesfunctioncardStyle(){.backgroundColor(#FFFFFF).borderRadius(16).padding(16).shadow({radius:8,color:rgba(0,0,0,0.1)})}// 使用Column(){Text(卡片内容)}.cardStyle()Row(){Text(行卡片)}.cardStyle()二、组件内 StylesComponentstruct GamePanel{StylespanelTitle(){.fontSize(18).fontWeight(FontWeight.Bold).fontColor(#2C3E50).margin({bottom:8})}build(){Column(){Text(游戏规则).panelTitle()Text(点击列投放猫咪).panelTitle()}}}三、Styles vs Extend特性StylesExtend作用范围所有组件指定组件类型传参❌ 不支持✅ 支持定义位置全局/组件内全局适用场景通用属性集组件特有样式四、游戏中的应用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