前言
一个组件，多种状态下，我们如何实现呢？举一个很简单的案例，一个按钮，默认状态下是黑色背景，点击后是红色，手指放开后还原黑色。
我们自然而然的就会想到利用手势的按下和抬起，改变其背景颜色即可，代码如下：
Button("点击") .backgroundColor(this.clickBackgroundColor) .onTouch((event: TouchEvent) => { if (event.type == TouchType.Down) { this.clickBackgroundColor = Color.Red } else if (event.type == TouchType.Up) { this.clickBackgroundColor = Color.Black } })
除了onTouch之外，gesture也可以实现其效果，无论哪种实现，我们都是要定义变量，改变某一个属性，有没有一种方式，直接更改属性呢？当然是有的，这就是stateStyles。
同样是上一个案例，我们使用stateStyles来实现一下，代码如下：
Button("点击") .stateStyles({ pressed: { //按压 .backgroundColor(Color.Red) }, normal: { //正常态 .backgroundColor(Color.Black) } })
可以发现，效果是和上述一模一样的。
简单概述
stateStyles为多态样式，可以依据组件的内部状态的不同，快速设置不同样式，比如背景颜色，颜色、大小等等常见的通用属性，此种行为，很类似于css中的伪类，但语法稍有不同，目前支持的有以下五种状态：
状态 |
概述 |
focused |
获焦态 |
normal |
正常态 |
pressed |
按压态 |
disabled |
不可用态 |
selected |
选中态 |
实际场景
具体的场景主要适用于多状态的切换，比如前言中的案例，当然了，它是支持多个属性的，比如，我们再增加宽高属性：
Button("点击") .stateStyles({ pressed: { //按压 .backgroundColor(Color.Red) .width(200) .height(100) }, normal: { //正常态 .backgroundColor(Color.Black) .width(100) .height(50) } })
除了多个属性之外，另外也可以直接传递样式：
定义Styles：
@Styles normalStyle() { .backgroundColor(Color.Black) .width(100) .height(50) } @Styles pressedStyle() { .backgroundColor(Color.Red) .width(200) .height(100) }
使用Styles：
Button("点击") .stateStyles({ pressed: this.pressedStyle, normal: this.normalStyle })
总结
selected状态一般用于可选择的组件，比如Checkbox，比如Radio，目前支持的组件如下：
支持组件 |
支持的参数/属性 |
起始API版本 |
Checkbox |
select |
10 |
CheckboxGroup |
selectAll |
10 |
Radio |
checked |
10 |
Toggle |
isOn |
10 |
ListItem |
selected |
10 |
GridItem |
selected |
10 |
MenuItem |
selected |
10 |
简单案例：
Radio({ value: 'Radio1', group: 'radioGroup1' }) .checked(this.value) .height(50) .width(50) .borderRadius(50) .radioStyle({ checkedBackgroundColor: Color.Red }) .onClick(() => { this.value = !this.value }) .stateStyles({ normal: { .backgroundColor(Color.Black) }, selected: { .backgroundColor(Color.Red) }, })
