鸿蒙中实现样式&结构重用
遇到重复模块不想再写一遍怎么办,遇到相同样式懒得写怎么办,他来了~ 他来了~\
1.@Extends: 扩展组件(样式、事件)只能全局定义
2.@Styles:抽取通用属性、事件
3.@Builder:自定义构建函数(结构、样式、事件)
@Extends
//只可以扩展样式和事件 @Extend(样式、事件)
@Extend(Text)
//方法名不能同名,小可爱注意(●'◡'●)
function textExtend(backgroudColor: ResourceColor, info: string) {
//文字水平方向上居中
.textAlign(TextAlign.Center)
.backgroundColor(backgroudColor)
.fontColor(Color.White)
.fontSize(30)
//点击事件
.onClick(() => {
//提示语句
AlertDialog.show({'extend扩展组件!'})
})
@Entry
@Component
struct Extends_demo {
build() {
Column({ space: 10 }) {
Text(this.message)
.fontSize(30)
Swiper() {
Text('0')
//使用@Extend中抽取的方法传入参数,通过组件.方法名的方式点出来
.textExtend(Color.Red, '轮播图 1')
Text('1')
.textExtend(Color.Green, '轮播图 2')
Text('2')
.textExtend(Color.Blue, '轮播图 3')
}
.width('100%')
.height(160)
}
.width('100%')
.height('100%')
}
}
}
@Styles
@Styles 可以抽取 通用的事件和属性,比如:width、height、onClick...
作用:@Styles扩展通用样式和事件给多个组件使用,遇到多个相同样式时就可以轻松了*^____^*
// 全局定义
@Styles function functionName() {
.通用属性()
.通用事件(()=>{})
}
@Component
struct FancyUse {
// 在组件内定义
@Styles fancy() {
.通用属性()
.通用事件(()=>{})
}
}
// 使用
组件().fancy()//组内定义
组件().functionName()//全局定义
注意点:
1.@Styles不支持传递参数
2.在添加了Styles的组件中,添加样式可以覆盖Styles中的内容,所以有时候@styles失效可能是它的问题\
@Builder
最常用的来了,连结构一锅端---自定义构建函数\
// 自定义 全局 构建函数
@Builder function MyGlobalBuilderFunction(param1,param2...) {
// 结构、属性、事件放这里
}
// 使用
MyGlobalBuilderFunction(param1,param2...)
// 自定义 组件内 构建函数
@Builder MyBuilderFunction( param1,param2...) {
// 结构、属性、事件放这里
}
// 使用
this.MyBuilderFunction(param1,param2...)
注意点:
在组件内定义的通过this.函数名使用,内部可以通过this使用组件属性,但是but全局定义的不可以\
学会这几个就可以疯狂抽取了···
爽啦~ 爽啦~ 会代码抽取的人爽啦~(要记得代码的结构哦,不然就是真的爽啦!)