前言Extend是 ArkUI 中用于扩展组件样式的装饰器。与Styles不同Extend可以传参、可以作用于特定组件类型。在「猫猫大作战」中我们使用Extend封装了游戏按钮、猫咪卡片和 HUD 文字的统一样式。一、Extend 基础// 扩展 Button 样式 Extend(Button) function gameButtonStyle() { .width(80%).height(48) .fontSize(17).fontWeight(FontWeight.Bold) .fontColor(#FFFFFF) .borderRadius(24) } // 使用 Button(开始游戏).gameButtonStyle() Button(暂停).gameButtonStyle()二、带参数的 Extend// 带颜色参数的扩展 Extend(Text) function scoreText(size: number, color: string) { .fontSize(size) .fontWeight(FontWeight.Bold) .fontColor(color) } // 使用 Text(得分: 2450).scoreText(24, #E74C3C) Text(最高分: 5000).scoreText(16, #95A5A6)三、Extend vs Styles特性ExtendStyles传参✅ 支持❌ 不支持指定组件类型✅Extend(Button)❌ 所有组件定义位置全局全局或组件内适用场景按钮、Text 样式通用属性集// Extend(Button) — 只对 Button 生效 Extend(Button) function primaryButton() { .backgroundColor(#2ECC71) .borderRadius(24) } // Styles — 对所有组件生效 Styles function roundedCorner() { .borderRadius(12) .padding(16) }四、游戏中的应用// 游戏按钮样式集 Extend(Button) function primaryBtn() { .width(80%).height(48) .fontSize(17).fontWeight(FontWeight.Bold) .fontColor(#FFFFFF).backgroundColor(#2ECC71) .borderRadius(24) } Extend(Button) function dangerBtn() { .width(80%).height(48) .fontSize(17) .fontColor(#FFFFFF).backgroundColor(#E74C3C) .borderRadius(24) } // 游戏中大量复用 Button(开始游戏).primaryBtn() Button(重新开始).primaryBtn() Button(退出游戏).dangerBtn()五、最佳实践按钮样式用 Extend(Button)限定组件类型避免滥用颜色等可调参数化Extend(Text)接收颜色和大小参数与 Styles 配合通用边框用 Styles组件特有用 Extend全局定义在单独的文件中统一管理所有样式总结Extend扩展指定组件类型的样式支持传参适合封装游戏中大量复用的按钮和文字样式。核心要点Extend(Button)指定组件、 参数化颜色和尺寸、 全局统一管理。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Extend 装饰器官方文档Styles 文档第 106 篇Styles第 108 篇Event Hub