@Styles装饰器
定义组件重用样式
自定义样式函数使用装饰器
可以定义在组件内或全局,内部优先级>外部,内部不需要function,外部需要function
定义在组件内的@styles可以通过this访问组件内部的常量和状态变量,可以在@styles里通过事件来改变状态变量
弊端:只支持通用属性和通用事件 不能传参
@Entry
@Component
struct StylesFun {
@State count: number = 100
@State bc: Color|string = Color.Blue
// 组件内部
@Styles interiorStyle() {
.width(200)
.height(this.count)
.backgroundColor(this.bc)
.onClick(() => {
this.count++
if(this.bc==Color.Blue||this.bc=='blue'){
this.bc='green'
}else{
this.bc='blue'
}
})
}
build() {
Row() {
Column() {
Text('我是组件内部@Styles的样式')
.fontSize(30)
.interiorStyle()
Text('我是全局@Styles的样式')
.fontSize(30)
.overallStyle()
}
.width('100%')
}
.height('100%')
}
}
// 全局
@Styles function overallStyle () {
.width(150)
.height(100)
.backgroundColor(Color.Pink)
}
@Extend装饰器
定义扩展组件样式
在@Styles的基础上,用于扩展原生组件样式
仅支持定义在全局,不支持在组件内部定义
支持封装指定的组件的私有属性和私有事件,也支持预定义相同组件的@Extend的方法
支持参数,可传递参数
参数可以为Function,或者 ()=>{} ,作为Event事件,例如:
@Extend(Text) function sizeColor(FSize:string|number,FColor?:string|Color){
.fontSize(FSize)
.fontColor(FColor)
}
@Extend(Button) function testClick(FSize:string|number,click:()=>void) {
.fontSize(FSize)
.width(300)
.height(50)
.click()
}
@Entry
@Component
struct ExtendFun {
@State message: string = 'Hello World'
@State count: number = 0
onClickAdd() {
this.count++
}
build() {
Row() {
Text('我是数字:'+this.count).sizeColor(40,Color.Pink)
Button('点我...快点我...').testClick(40,()=>{
this.onClickAdd()
})
}
}
}
参数也可以是状态变量,当状态变量改变时,UI可以正常的被刷新渲染
当然 这只是我的学习笔记 ,若有什么不足之处还望大佬指出