前言：@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')