HarmonyOS 多态样式

还记得我们css中有 按压 失去焦点 点击后 正常状态 的各种样式设置
那么作为前端开发 TS JS的改版 harmonyos自然也有

这里 我们编写代码如下

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        TextInput()
        TextInput()
          .stateStyles({
            //正常状态
            normal: {
              .backgroundColor(Color.Red)
            },
            //获取焦点状态
            focused: {
              .backgroundColor(Color.Pink)
            },
            //按压状态
            pressed: {
              .backgroundColor(Color.Blue)
            },
            //禁用状态
            disabled: {
              .backgroundColor(Color.White)
            },
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

这里 我们声明了一个 TextInput 因为 禁用状态 和 获取焦点状态 只有表单元素能够触发
然后 我们多状态的 样式 用 stateStyles 属性方法
里面有四个字段
normal 正常状态 我们设置为红色

focused 获取焦点 当 表单元素获取焦点时 触发样式 这里 我们设为粉色

pressed 鼠标或手指 按压时触发颜色 这里我们设置为蓝色