HarmonyOS NEXT学习——@Styles、@Extend、stateStyles

2024/11/30 14:53:23 来源：https://blog.csdn.net/paipaicui/article/details/140514953 浏览: 次关键词：HarmonyOS NEXT学习——@Styles、@Extend、stateStyles

@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)}
}