DEV Community

Cover image for HarmonyOS development understands the dynamic setting of attributes
redvip8866
redvip8866

Posted on

HarmonyOS development understands the dynamic setting of attributes

#harmonyos

This development tool is based on DevEco Studio 5.1.0 Release
API>=12
this article tags: HarmonyOS/ArkUI

first of all, we need to understand why dynamic setting of attributes is needed in development? For example, there is such a scenario, when a certain judgment is established, this attribute needs to be set, otherwise the attribute is not set, and when there is no attribute dynamic setting, how is this requirement realized? Obviously, it cannot be realized. Some friends may say that we can set the attributes of different components according to judgment. The simple code is as follows:

if (this.viewHeight != undefined) {
        Column() {

        }.width("100%")
        .height(this.viewHeight)
      } else {
        Column() {

        }.width("100%")
      }
Enter fullscreen mode Exit fullscreen mode

the above code is exactly the different settings of the components, not the dynamic settings of the attributes. If the components have many attributes, the redundant codes will be greatly increased, which is very inconvenient.

Some friends may think that it is not enough to set the attribute directly, if there is, set it, and if there is no, set undefined.

Column() {

}.width("100%")
  .height(this.viewHeight != undefined?this.viewHeight:undefined)
Enter fullscreen mode Exit fullscreen mode

The above code can indeed realize the dynamic setting of values, but it cannot realize the dynamic setting of properties, because the above code, regardless of whether the variable exists or not, this height property always exists, but the value is different, so the implementation is essentially different from the dynamic setting of properties.

Obviously, if there is no dynamic setting of attributes, it is impossible to develop according to our normal requirements. After all, declarative UI development cannot be directly judged according to Variables. For example, the following code will directly report an error, because this writing is not supported in declarative UI.

Column() {

    }
    if(this.viewHeight != undefined){
      .height(this.viewHeight)
    }
Enter fullscreen mode Exit fullscreen mode

Therefore, to realize that when a certain judgment is established, this attribute is set, otherwise the attribute is not set, and dynamic attribute setting, that is, AttributeModifier, must be used.

What is AttributeModifier

We may know something about @ Styles and @ Extend decorators. They only realize the extraction of attributes and simplify the attribute setting of components. In actual functions, they cannot realize the dynamic setting of attributes. Compared with them, AttributeModifier can provide more perfect capabilities and flexibility, and can continuously improve the full amount of attribute and event setting capabilities. Therefore, when dynamic setting of attributes is needed, recommend use AttributeModifier first.

AttributeModifier, the official system API, provides us with many methods to meet the requirements of different scenarios, such as when the component is in a normal state, when it is in a pressed state, etc. You can choose to use it according to your own requirements.

applyNormalAttribute(instance: T) : void

applyPressedAttribute(instance: T) : void

applyFocusedAttribute(instance: T) : void

applyDisabledAttribute(instance: T) : void

applySelectedAttribute(instance: T) : void
Enter fullscreen mode Exit fullscreen mode

What we need to know is that AttributeModifier is an interface. When using it, we need to create a separate class to implement this interface. At present, it supports many component attributes, which can basically meet most of our requirements. To implement the AttributeModifier interface, there is a generic parameter, that is, the current component attribute.

Image description

Examples of simple use are as follows:

class MyColumnModifier implements AttributeModifier<ColumnAttribute> {
  viewHeight?: number = undefined


  applyNormalAttribute(instance: ColumnAttribute): void {

    instance
      .width("100%") 
      .margin(10)
      .backgroundColor(Color.White) 


    if (this.viewHeight != undefined) {

      instance.height(this.viewHeight)
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

in the above code, we can dynamically set the properties we need according to our requirements. The specific usage is as follows:


  @State modifier: MyColumnModifier = new MyColumnModifier()


  build() {
    Column() {

    }.attributeModifier(this.modifier)
  }
Enter fullscreen mode Exit fullscreen mode

simple summary

although AttributeModifier is a little troublesome to use, it does enable us to realize dynamic setting of attributes, which is also the main way provided by the government. Therefore, in daily development, if you need to dynamically set an attribute according to whether the judgment condition is established or not, you can use AttributeModifier at this time.

Top comments (0)