阅读量:4
@Styles装饰器 定义组件重用样式
// 全局 @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) } }