ArkTS @Extend装饰器的用法（附带实例）

@Extend 装饰器的作用主要是扩展原生组件的样式，它的使用语法如下：

@Extend(ui组件名称) function functionName { ... }

在使用 @Extend 装饰器时，需要注意以下几点：

@Extend 装饰器仅支持在全局定义，不支持在组件内定义；
@Export 只能在当前文件内使用，不支持 export 的导出；
@Extend 支持封装指定组件的私有属性、私有事件和自身定义的全局方法；
@Extend 装饰的方法支持参数，可以在调用时传递参数，调用遵循 TypeScript 方法传值调用。

@Extend 装饰器的示例代码如下：

@Entry
@Component
struct Demo_Extend {
    build() {
        Row({ space: 10 }) {
            Text('商品')
                .TextExtendStyle(100, Color.White, 20)
            Text('harmonyos')
                .TextExtendStyle(200, Color.Pink, 30)
            Text('单框架鸿蒙')
                .TextExtendStyle(300, Color.Orange, 40)
        }
    }
}

@Extend(Text) function TextExtendStyle(weight:number, color:Color, fontSize:number) {
    .fontWeight(weight)
    .fontColor(color)
    .fontSize(fontSize)
    .backgroundColor('#000000')
}

在上述示例代码中，3 个 Text UI 组件拥有共同的样式属性，只是每个属性的值不同。此时我们可以将公共的样式属性放到 @Extend 中，并通过传参的方式来设置每个属性的值。这样可使代码更加整洁，同时也减少了代码量。

ArkTS @Extend装饰器的用法（附带实例）

相关文章