@Styles装饰器 定义组件重用样式
- 仅支持通用属性和通用事件
- 不支持参数
- 可以定义全局和组件内使用,全局使用需要加function
// 全局
@Styles function functionName() { ... }// 在组件内
@Component
struct FancyUse {@Styles fancy() {.height(100)}
}
- 组件内@Styles的优先级高于全局@Styles。
// 定义在全局的@Styles封装的样式
@Styles function globalFancy () {.width(100).height(100).backgroundColor(Color.Pink)
}@Entry
@Component
@Preview
struct FancyUse {@State heightValue: number = 100// 定义在组件内的@Styles封装的样式@Styles fancy() {.width(200).height(this.heightValue).backgroundColor(Color.Yellow).onClick(() => {this.heightValue = 200})}build() {Column({ space: 10 }) {// 使用全局的@Styles封装的样式Text('FancyA').globalFancy().fontSize(30)// 使用组件内的@Styles封装的样式Text('FancyB').fancy().fontSize(30)//组件内优先级高于全局Text('FancyAB').globalFancy().fancy().fontSize(30)}.alignItems(HorizontalAlign.Start)}
}
@Extend装饰器:定义扩展组件样式
- @Styles用于样式的扩展
- 可以传参数
- 仅能全局定义
@Extend(Text) function fancyText(weightValue: number, color: Color,clickE:()=>void) {.fontStyle(FontStyle.Italic).fontSize(weightValue).backgroundColor(color).onClick(clickE)
}
@Entry
@Component
struct FancyUse {@State label: string = 'Hello World'onClickHandler(){console.log('40')}build() {Column() {Text(`${this.label}`).fancyText(30, Color.Blue,()=>{console.log('30')})Text(`${this.label}`).fancyText(40, Color.Pink,()=>{this.onClickHandler()})Text(`${this.label}`).fancyText(50, Color.Orange,()=>{console.log('50')})}.alignItems(HorizontalAlign.Start)}
}
三个点击事件
stateStyles 多态样式
stateStyles是属性方法,可以根据UI内部状态来设置样式,类似于css伪类,但语法不同。ArkUI提供以下五种状态:
- focused:获焦态。
- normal:正常态。
- pressed:按压态。
- disabled:不可用态。
- selected:选中态。
@Entry
@Component
struct FancyUse {@State label: string = 'Hello World'build() {Column() {Text(`${this.label}`).stateStyles({normal:{.backgroundColor(Color.Yellow)},pressed:{.backgroundColor(Color.Pink)}}).fontSize(40)}.alignItems(HorizontalAlign.Start)}
}