HarmonyOS Development: How components implement dynamic setting of properties

#harmonyos

Foreword

this article is based on Api12

in many scenes, we need to dynamically choose whether to use the attributes of components, such as the display and hiding of components, such as the setting of background color change, the setting of height change, the setting of font size change, etc. In many scenes, we need different states to render our UI view. In non-declarative UI language, we can make logical judgment, that is if/else syntax to control the property settings of components, for example, in Android, to control the display and hiding of a component, we can do the following, pseudo-code is as follows:

If (condition){
display
}else{
hide
}

for declarative languages, how can we dynamically control the setting of certain properties in ArkUI?

For the setting of dynamic attributes, three usage methods are summarized, which can meet different business scenarios and hope to help you.

Way one, ternary operator, direct dynamic setting properties.

For example, if we want to dynamically display and hide a certain component according to the judgment of a state, we can do the following.

.visibility(this.isVisibility ? Visibility.Visible : Visibility.None)

In the above code, we only need to control the variable isVisibility. For other attribute settings, such as color, size, background, etc. All attributes are basically used in the same way, not for example.

Method two, dynamic attribute attributeModifier control

For Mode 1, there is a drawback. Although we theoretically control the state switching of the attribute, no matter what state it is, we must set this attribute, but the value is different. Is there any way to really control the setting of a certain attribute? After searching for official documents, there is indeed, that is, to use it the attribute modifier attribute is used to dynamically set an attribute.

Of course, if it is only a simple attribute switch, such as background, color, text size, etc., the first method can be used, and the second method is more inclined to whether this attribute needs to be set instead of changing the value of its attribute, which we need to pay attention.

For example, in a certain state, the height needs to be set to a fixed value, otherwise it is adaptive. For example, in a certain state, the side slip attribute is required, and in other states, it is not required. For example, in a certain state, the border attribute is required, and in other states, it is not required. Wait, there are many application scenarios, whenever a property needs to be set dynamically, we can use it. attributeModifier let's take a simple case.

The first step is to declare the required dynamic attributes, and the custom class implements the AttributeModifier interface to support most component attributes.

At present, there are many methods to meet different business scenarios:

ApplyNormalAttribute (instance: T): void//The style of the component in its normal state.
Apply Pressed Attribute (instance: T): void//The style of the component's pressing state.
ApplyFocusedAttribute (instance: T): void//The style of the focused state of the component.
ApplyDisabled Attribute (instance: T): The style of the void//component's disabled state.
ApplySelectedAttribute (instance: T): void//Style of the selected state of the component

class MyTextModifier implements AttributeModifier<TextAttribute> {
  textHeight?: Length


  applyNormalAttribute(instance: TextAttribute): void {
    if (this.textHeight != undefined) {

      instance.height(this.textHeight)
    }
  }
}

the second step, can be used directly:


@State modifier: MyTextModifier = new MyTextModifier()


Text("text")
  .attributeModifier(this.modifier)

the above is just a very simple case. The actual business scenario can be implemented by everyone according to their needs.

Way three, multi-component form

Declarative UI supports Conditional rendering. For Mode 3, it can satisfy Mode 1 and Mode 2 at the same time. However, it is not recommended because the code is too redundant. For example, we need to implement the color setting of a component:

if(this.isColor){
  Text("text").fontColor(Color.Red)
}else {
  Text("text").fontColor(Color.Black)
}

method 3 is not the switching of attributes or values, but the overall replacement of components. Although we can achieve the desired effect, dynamic control of attributes is not advocated. However, Method 3 is more friendly in dynamic switching of components, such as multi-item display.