鸿蒙开发：走进stateStyles多态样式

前言

一个组件，多种状态下，我们如何实现呢？举一个很简单的案例，一个按钮，默认状态下是黑色背景，点击后是红色，手指放开后还原黑色。

我们自然而然的就会想到利用手势的按下和抬起，改变其背景颜色即可，代码如下：

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中的伪类，但语法稍有不同，目前支持的有以下五种状态：

实际场景

具体的场景主要适用于多状态的切换，比如前言中的案例，当然了，它是支持多个属性的，比如，我们再增加宽高属性：

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，目前支持的组件如下：

简单案例：

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