ArkTS的样式提取并复用

将相同的样式提炼出来，减少代码的重复性

1. 对某类组件进行样式、事件快捷添加

使用@Extend注解

他的位置在全局定义

示例：

//在全局部分添加组件便捷样式，事件
@Extend(Text)	// 可以理解为下面这个便捷方法作用于什么组件中
// 在全局封装的时候，要加入function，如果在struct里面就可以不写function
function textExtend(color: ResourceColor, txt: string){		//传参设置，提升灵活性
	.textAlign(TextAlign.Center)
	.backgroundColor(color)
	.fontColor(Color.White)
	.onClick(()=>{
		AlertDialog.show({
			message: txt
		})
	})
}


// 在组建里面调用
...
	Swiper(){
		Text('1')
			.textExtend(Color.Red, "轮播图1")
		Text('2')
			.textExtend(Color.Red, "轮播图2")
		Text('3')
			.textExtend(Color.Red, "轮播图3")
	}
...

2. 设置抽象，通用的样式、事件

使用@Style注解

他的位置可以再组件内（builder外层），也可以在全局

他不接受传参

示例：

@Style
// 在全局封装的时候，要加入function，如果在struct里面就可以不写function
function bordStyle(){
	,width(40)
	.height(40)
	.border({
		width: 1
	})
}

//使用抽象样式
Text()
	.bordStyle()

3. 封装一个结构，样式，事件

使用@Builder注解来创建一个含有结构的组件，他可以传参

示例：

// 封装一个navItem
@Builder
// 在全局封装的时候，要加入function，如果在struct里面就可以不写function
function navItem (icon: ResourceStr, text: string){
	Column(){
		Image(icon)
			.width("80%");
		Text(text);
	}
	.width('25%')
	.onClick(()=>{
		AlertDialog.show({
			message: text
		})
	})
}


//调用
Row(){
	navItem($r('app.media.xxxx'), '首页')
	navItem($r('app.media.xxxx'), '收藏')
	navItem($r('app.media.xxxx'), '我的')
}