便利店网站建设拓扑图,商城建设开发,软件开发公司排名国内,网站页数Styles和Extend仅仅应用于静态页面的样式复用#xff0c;stateStyles可以依据组件的内部状态的不同#xff0c;快速设置不同样式。这就是我们本章要介绍的内容stateStyles#xff08;又称为#xff1a;多态样式#xff09;。 概述 stateStyles是属性方法#xff0c;可以根… Styles和Extend仅仅应用于静态页面的样式复用stateStyles可以依据组件的内部状态的不同快速设置不同样式。这就是我们本章要介绍的内容stateStyles又称为多态样式。 概述 stateStyles是属性方法可以根据UI内部状态来设置样式类似于css伪类但语法不同。ArkUI提供以下四种状态 focused获焦态。normal正常态。pressed按压态。disabled不可用态。selected10选中态。 使用场景 基础场景 下面的示例展示了stateStyles最基本的使用场景。Button处于第一个组件默认获焦生效focused指定的粉色样式。按压时显示为pressed态指定的黑色。如果在Button前再放一个组件使其不处于获焦态就会生效normal态的黄色。 Entry
Component
struct StateStylesSample {build() {Column() {Button(Click me).stateStyles({focused: {.backgroundColor(Color.Pink)},pressed: {.backgroundColor(Color.Black)},normal: {.backgroundColor(Color.Yellow)}})}.margin(30%)}
}图1 获焦态和按压态 Styles和stateStyles联合使用 以下示例通过Styles指定stateStyles的不同状态。 Entry
Component
struct MyComponent {Styles normalStyle() {.backgroundColor(Color.Gray)} Styles pressedStyle() {.backgroundColor(Color.Red)} build() {Column() {Text(Text1).fontSize(50).fontColor(Color.White).stateStyles({normal: this.normalStyle,pressed: this.pressedStyle,})}}
}图2 正常态和按压态 在stateStyles里使用常规变量和状态变量 stateStyles可以通过this绑定组件内的常规变量和状态变量。 Entry
Component
struct CompWithInlineStateStyles {State focusedColor: Color Color.Red;normalColor: Color Color.Green build() {Button(clickMe).height(100).width(100).stateStyles({normal: {.backgroundColor(this.normalColor)},focused: {.backgroundColor(this.focusedColor)}}).onClick(() {this.focusedColor Color.Pink}).margin(30%)}
}Button默认获焦显示红色点击事件触发后获焦态变为粉色。 图3 点击改变获焦态样式
