HarmonyOS Development Enters Polymorphic Styles stateStyles

This article is based on HarmonyOSApi14 

in the development, there is a case where there is an entry. The default is a background color in the no-Operation State. After clicking the finger, it changes to another background color. When the finger is released, it reverts to the default background color. How should we implement it? 

Some students may say, this is not a pinch in hand, it can be easily done by using onTouch event. Press the finger to change the background, and lift the finger to restore the background. The code is as follows:

 

Column() {
        Text("我是一个普通的条目")
          .fontColor(Color.White)
      }
      .width("100%")
      .height(100)
      .borderRadius(10)
      .justifyContent(FlexAlign.Center)
      .backgroundColor(this.itemBgColor)
      .onTouch((event) => {
        if (event.type == TouchType.Down) {
          this.itemBgColor = Color.Pink
        } else if (event.type == TouchType.Up) {
          this.itemBgColor = Color.Gray
        }
      })

ah, let alone, this effect has really been achieved. If it is not only the background color, there may be many attribute changes in actual development, such as width, height, margin, etc., then we need many attributes to assign values. In this writing method, in addition to implementing onTouch method, we also need to define changeable variables to switch our state, which is slightly redundant in code, is there a simple way to change attributes directly? Of course, there are stateStyles. 

Let's use stateStyles to implement the above code. The code is as follows:

 

Column() {
        Text("test")
          .fontColor(Color.White)
      }
      .width("100%")
      .height(100)
      .borderRadius(10)
      .justifyContent(FlexAlign.Center)
      .stateStyles({
        pressed: { 
          .backgroundColor(Color.Pink)
        },
        normal: { 
          .backgroundColor(Color.Gray)
        }
      })

after running the above code, you can find that the effect is exactly the same as the onTouch above. 

What are stateStyles? 

stateStyles is a polymorphic style. The official interpretation is that different styles can be quickly set according to the internal state of the component, such as the width, height, background, margin, etc. of the component, supporting all the attributes of the component itself. Currently, there are five supported states, namely: focused: focused state, normal: normal state, pressed: pressed state, disabled: unavailable state, selected: selected state.

The specific usage scenario mainly involves multi-state switching scenarios, such as the case of background switching in the front. What we need to know is that it supports all the attributes of the component itself. For example, we add other attributes:

 

.stateStyles({
        pressed: { 
          .backgroundColor(Color.Pink)
          .width("100%")
        },
        normal: { 
          .backgroundColor(Color.Gray)
          .width("80%")
        }
      })

if there are more Styles to modify, stateStyles can be used in combination with the @ Styles Decorator. For example, in the above case, let's modify it:

 

  @Styles
  normalStyle() {
    .backgroundColor(Color.Gray)
    .width("80%")
  }

  @Styles
  pressedStyle() {
    .backgroundColor(Color.Pink)
    .width("100%")
  }

specific use is as follows:

 

 .stateStyles({
        pressed: this.pressedStyle,
        normal: this.normalStyle
      })

the disabled state is displayed only when the component is disabled. For example, in the following case, the component is disabled:

 

.enabled(false)
      .stateStyles({
        disabled: {
          .backgroundColor(Color.Blue)
        }
      })

after running, the background color of the display is blue. 

In addition to the above three states, we introduce another state selected, which is generally applicable to selectable components, such as Checkbox and Radio. Currently, the supported components are as follows: 

we simply cite an example:

 

Radio({ value: 'radio', group: 'radioGroup' })
        .checked(this.isChecked)
        .height(50)
        .width(50)
        .borderWidth(0)
        .borderRadius(30)
        .onClick(() => {
          this.isChecked = !this.isChecked
        })
        .radioStyle({ checkedBackgroundColor: Color.Pink })
        .stateStyles({
          normal: {
            .backgroundColor(Color.Gray)
          },
          selected: {
            .backgroundColor(Color.Pink)
          }
        })

simple summary 

when using the polymorphic style stateStyles, it is important to note that when clicked and pressed are used on a component at the same time, only the post-registered state will take effect. 

Article tags: HarmonyOS language, ArkUI