HarmonyOS 鸿蒙应用开发 - 多态样式 stateStyles
前言：@Styles和@Extend仅仅应用于静态页面的样式复用，stateStyles可以依据组件的内部状态的不同，快速设置不同样式，类似于css伪类，但语法不同。
ArkUI提供以下四种状态：
- focused：获焦态。
- normal：正常态。
- pressed：按压态。
- disabled：不可用态。
1、基础使用示例
//1、基础使用示例Button('1多态样式实例').margin(20).stateStyles({normal: { //正常情况.backgroundColor(Color.Red)},focused: {//焦点.backgroundColor(Color.Green)},pressed: {//点击时.backgroundColor(Color.Black)}}).focusable(false)Button('1按钮被禁用').enabled(false).stateStyles({disabled:{.backgroundColor(Color.Gray)}})2、联合使用示例
struct StateStylesSample {//2 通用样式@Styles normalStyle() {.backgroundColor(Color.Orange)}//2 通用样式@Styles pressedStyle() {.backgroundColor(Color.Red)}build() {Column() { //2、联合使用示例Text('2Styles和stateStyles联合使用示例').fontSize(20).margin({top:10}).fontColor(Color.White).stateStyles({normal: this.normalStyle,pressed: this.pressedStyle,})3、在stateStyles里使用常规变量和状态变量
struct StateStylesSample {//3 stateStyles里使用常规变量和状态变量@State pressedColor: Color = Color.Red;normalColor: Color = Color.Greenbuild() { //3、在stateStyles里使用常规变量和状态变量Button('3在stateStyles里使用常规变量和状态变量')//.height(100).width(350).fontSize(16).stateStyles({normal: {.backgroundColor(this.normalColor)},pressed:{.backgroundColor(this.pressedColor)}}).margin('20')