HarmonyOS Development: Entering stateStyles Polymorphic Style

Foreword

this article is based on Api12 

how do we implement a component in multiple states? To give a very simple case, a button has a black background by default, red after clicking, and black after the finger is released. 

We will naturally think of using gestures to press and lift, change its background color can be, the code is as follows:

 

Button("CLICK")
  .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
    }
  })

in addition to onTouch, gesture can also achieve its effect. No matter what kind of implementation, we have to define variables and change a certain attribute. Is there a way to directly change the attribute? Of course, there are stateStyles. 

Also in the previous case, we use stateStyles to implement it. The code is as follows:

 

Button("CLICK")
  .stateStyles({
    pressed: {
      .backgroundColor(Color.Red)
  },
               normal: { 
               .backgroundColor(Color.Black)
               }
               })

it can be found that the effect is exactly the same as above. 

Simple Overview

stateStyles is a polymorphic style, which can quickly set different styles according to the internal state of the component, such as background color, color, size and other common common attributes. This behavior is very similar to the pseudo-class in css, but with a slightly different syntax, the following five states are currently supported: 

status	overview
focused	coke state
normal	normal State
pressed	pressed
disabled	unavailable state
selected	selected state

actual Scene

the specific scenario is mainly applicable to multi-state switching, such as the case in the foreword. Of course, it supports multiple attributes. For example, we add the high attribute:

 

Button("CLICK")
  .stateStyles({
    pressed: { 
      .backgroundColor(Color.Red)
      .width(200)
      .height(100)
  },
               normal: { 
               .backgroundColor(Color.Black)
               .width(100)
               .height(50)
               }
               })

in addition to multiple properties, styles can also be passed directly: 

defining Styles:

 

@Styles
  normalStyle() {
    .backgroundColor(Color.Black)
      .width(100)
      .height(50)
  }

@Styles
  pressedStyle() {
  .backgroundColor(Color.Red)
    .width(200)
    .height(100)
}

use Styles:

 

Button("点击")
  .stateStyles({
    pressed: this.pressedStyle,
    normal: this.normalStyle
  })

summary

selected states are generally used for optional components, such checkbox, such as Radio, currently supports the following components: 

support Components	supported Parameters/Properties	starting API version
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)
               },
               })