@Extend
通过 Extend 可以扩展组件的样式、事件,实现复用效果
@Extend仅支持在全局定义，不支持在组件内部定义。
语法： @Extend(组件名)
function functionName(参数1....) {
.属性()
.事件(()=>{})
}// 使用
组件(){}
.functionName(参数1...)
@Extend (Text)
function myExtend(){
.width(100)
.height(100)
.backgroundColor(Color.Pink)
.margin({bottom:50})
.onClick(()=>{
AlertDialog.show({
message:'hello'
})
})
}
@Entry
@Component
struct Index {
build() {
Column() {
Text()
.myExtend()
Text()
.myExtend()
}
}
}
@Style
@Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式。
不同于@Extend 用来给某个组件扩展，@Styles 可以抽取 通用的事件和属性。
语法： // 全局定义 @Styles function functionName() { .通用属性() .通用事件(()=>{}) } @Component
struct FancyUse {
// 在组件内定义
@Styles fancy() {
.通用属性()
.通用事件(()=>{})
} }
// 使用
组件().fancy()
组件().functionName()
// 全局定义
@Styles function setSize() {
.width(100)
.height(100)
.onClick(()=>{
// 逻辑略
})
}
@Entry
@Component
struct Index {
// 在组件内定义
@Styles setBg() {
.backgroundColor(Color.Red)
}
build() {
Column() {
Text()
.setSize()
.setBg()
}
}
}
@Bulid
ArkUI提供了一种轻量的UI元素复用机制@Builder，该自定义组件内部UI结构固定，仅与使用方进行数据传递，开发者可以将重复使用的UI元素抽象成一个方法，在build方法里调用。
如果连结构也需要抽取，就可以使用@Builder，他也可以叫做 自定义构建函数 语法：
// 自定义 全局 构建函数
@Builder function MyGlobalBuilderFunction(param1,param2...) {
// 结构、属性、事件放这里
}
// 使用
MyGlobalBuilderFunction(param1,param2...)// 自定义 组件内 构建函数
@Builder MyBuilderFunction( param1,param2...) {
// 结构、属性、事件放这里
}
// 使用
this.MyBuilderFunction(param1,param2...)
//定义全局 Builder
@Builder
function GlobalTextItem(title: string) {
Text(title)
.fontSize(30)
.onClick(() => {
// 逻辑略
})
}
@Entry
@Component
struct Index {
@State message: string = '@Builder';
build() {
Column() {
// 使用全局 Builder
GlobalTextItem('你好')
// 使用本地 Builder
this.LocalTextItem('西兰花炒蛋')
}
.width('100%')
.height('100%')
}
//定义本地 Builder
@Builder
LocalTextItem(title: string) {
Text(title)
.fontSize(30)
.onClick(() => {
// 逻辑略
})
}
}
总结：
extend与build可以进行传参，而style则不能进行传参
extend抽取 特定组件 样式、事件
style抽取 公共样式、事件
build抽取 结构、样式、事件
