鸿蒙 ArkTS 高级样式复用：@Extend 装饰器完全解析（比 @Styles 更强大）

前言在上一篇文章《鸿蒙 ArkTS 样式复用Styles 装饰器从入门到实战》中我们学习了使用Styles实现基础样式复用。但Styles不支持传参、不能使用组件专有属性在复杂 UI 场景下能力有限。 本文核心介绍 ArkTS 中功能更强大的样式复用方案Extend装饰器。它支持传参、支持专属属性、支持封装事件是企业级项目 UI 规范统一的首选方案。一、Extend 是什么Extend用于为指定组件扩展专属样式方法可以理解为给组件“扩展一个自带样式的方法”。与Styles相比它最大的优势是支持传参支持组件专有属性与事件语义更明确只作用于特定组件二、Extend 核心规则只能定义在全局不能写在组件内部。必须指定组件类型Extend(Button)、Extend(Text)。内部可使用该组件的专有属性 专有事件。支持传入参数颜色、尺寸、回调函数均可。作用范围仅限当前.ets文件。三、Extend 基础语法Extend(组件类型)function方法名(参数...){// 样式与属性封装}四、实战封装可传参的 Button 扩展样式我们将按钮的尺寸、圆角、类型、背景色、点击事件全部封装使用时只需一行调用。EntryComponentstruct ExtendPage{build(){Column(){Row({space:50}){Button(确认).buttonExtendStyle(Color.Green,()console.log(确认))Button(取消).buttonExtendStyle(Color.Gray,()console.log(取消))}}.width(100%).height(100%).justifyContent(FlexAlign.Center)}}// 扩展 Button 专属样式Extend(Button)functionbuttonExtendStyle(bgColor:Color,callback:()void){// 通用样式.width(100).height(40).borderRadius(10)// Button 专有属性.type(ButtonType.Normal).backgroundColor(bgColor)// 点击事件.onClick(callback)}使用后组件代码极度简洁UI 风格高度统一维护成本大幅降低。五、Extend vs Styles 快速对比特性StylesExtend定义位置组件内 / 全局只能全局支持传参不支持支持适用组件任意通用组件指定单一组件Button/Text 等专有属性不能使用可以使用适用场景简单通用样式复杂专属样式、动态样式、UI 规范六、总结简单样式复用 → 使用Styles组件专属、需要传参、需要封装事件 → 使用Extend 两者搭配使用可以让你的鸿蒙 ArkTS 项目代码结构更清晰、冗余更少、维护性更强是现代鸿蒙 UI 开发必备技能。