前言

@Extend 装饰器用于为特定组件类型扩展样式方法，与 @Styles 的通用属性集合不同，@Extend 可以访问组件特有的属性。

本文以「猫猫大作战」的 Text 标题样式为锚点，讲解 @Extend 的使用。

提示：本系列不讲 ArkTS 基础语法与环境搭建，假设你已跟完第 1–106 篇。本篇是阶段三第 107 篇。

一、@Extend 基本用法

1.1 为 Text 扩展样式

@Extend(Text)
function TitleStyle() {
  .fontSize(24)
  .fontWeight(FontWeight.Bold)
  .fontColor('#2C3E50')
  .lineHeight(32)
}

@Extend(Text)
function SubtitleStyle() {
  .fontSize(16)
  .fontColor('#7F8C8D')
}

1.2 使用

Text('猫猫大作战').TitleStyle()
Text('合并进化·策略消除').SubtitleStyle()

二、带参数的 @Extend

@Extend(Text)
function ColorText(color: ResourceColor) {
  .fontColor(color)
  .fontSize(16)
}

Text('得分: 88888').ColorText('#2ECC71')
Text('游戏结束').ColorText('#E74C3C')

三、总结

@Extend 为特定组件扩展样式方法，支持参数传递。

核心要点：

• @Extend(ComponentType) 为特定组件扩展方法
• 支持参数传递实现样式差异化

下一篇预告：第 108 篇将深入 EventHub——Ability 与 Page 之间的通信机制。

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

相关资源：

• @Extend 装饰器文档
• 开源鸿蒙跨平台社区
• 第 106 篇：@Styles
• 第 108 篇：EventHub