鸿蒙4.0开发笔记之ArkTS装饰器语法基础@Extend扩展组件样式与stateStyles多态样式（十一）

最新推荐文章于 2025-04-07 13:20:53 发布

鸿蒙Next

最新推荐文章于 2025-04-07 13:20:53 发布

阅读量4.7k

点赞数 9

分类专栏： HarmonyOS 文章标签： harmonyos 笔记华为

本文链接：https://blog.csdn.net/Viewinfinitely/article/details/134700979

版权

一、Extend扩展组件样式

1、作用
前文提到可以使用@Styles用于样式的扩展，在@Styles的基础上，ArkTS语法还提供了@Extend，⽤于扩展原生组件样式，包括Text、Button等等。

2、定义语法

@Extend(UIComponentName) function functionName {
    ... } 
//UIComponentName表示原生组件，如Text、Button...
//functionName为样式函数名

3、使用规则（和@Styles不同）

@Extend仅支持定义在全局，不支持在组件内部定义。
@Extend支持封装指定的组件的私有属性和私有事件和预定义相同组件的@Extend的方法。
@Extend装饰的方法支持参数，开发者可以在调用时传递参数，调用遵循ts方法传值调用。

@Extend(Text) function makeMeClick(onClick: () => void) {
   
.backgroundColor(Color.Blue)
.onClick(onClick)
}
@Entry
@Component
struct FancyUse {
   
	@State label: string = 'Hello World';
	onClickHandler() {
   
		this.label = 'Hello ArkUI';
	}
	build() {
   
		Row({
    space: 10 }) {
   
		Text(${
   this.label})
			.makeMeClick(