HarmonyOS开发了解属性的动态设置

本文开发工具基于DevEco Studio 5.1.0 Release

API>=12

本文标签：HarmonyOS/ArkUI

首先，我们需要了解一下，在开发中，为什么需要属性的动态设置？比如，有这样的一个场景，当某个判断成立时，需要设置这个属性，否则就不设置属性，没有属性动态设置的时候，这个需求是如何实现的？显然是无法实现的，可能有的朋友会说，我们可以根据判断设置不同的组件的属性不就可以了，简单代码如下：

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

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

        }.width("100%")
      }

以上的代码确切的说是组件的不同设置，并不是属性的动态设置，如果组件的属性很多，这样判断，存在的冗余代码也会极具增加，十分的不便。

有的朋友可能又想到了直接给属性设置不就可以了，有就设置，没有就设置undefined。

Column() {

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

以上的代码确实能够实现值的动态设置，但是并不能实现属性的动态设置，因为以上的代码，无论变量是否存在，这个height属性是一直存在的，只不过值不一样，所以在实现上和属性动态设置有着本质的区别。

显然，如果没有属性的动态设置，按照我们正常的需求开发，是无法实现的，毕竟声明式UI开发，是无法直接根据变量来判断，比如下面的代码，会直接报错的，因为声明式UI中是不支持此种写法的。

Column() {

    }
    if(this.viewHeight != undefined){
      .height(this.viewHeight)
    }

所以要实现当某个判断成立，设置这个属性，否则就不设置属性，就必须使用动态属性设置了，也就是AttributeModifier。

什么是AttributeModifier

我们可能对@Styles和@Extend装饰器有所了解，它们仅仅实现了属性的抽取，简化了组件的属性设置，在实际的功能中并不能实现属性的动态设置，与它们想比较，AttributeModifier可以说，提供了更加完善的能力和灵活性，并且能够持续完善全量的属性和事件设置能力，因此，在有需要属性动态设置的时候，推荐优先使用AttributeModifier。

AttributeModifier，官方系统API中，给我们提供了很多方法，可以满足不同的场景需求，比如组件普通状态时，按压状态时的等等，大家可以根据自身需求，进行选择使用。

applyNormalAttribute(instance: T) : void//组件普通状态时的样式。
 
applyPressedAttribute(instance: T) : void//组件按压状态的样式。
 
applyFocusedAttribute(instance: T) : void//组件获焦状态的样式。
 
applyDisabledAttribute(instance: T) : void//组件禁用状态的样式。
 
applySelectedAttribute(instance: T) : void//组件选中状态的样式

我们需要知道的是，AttributeModifier，它是一个接口，在使用的时候，我们需要单独的创建一个类，去实现这个接口，目前支持了很多的组件属性，基本上可以满足我们绝大部分的需求，实现AttributeModifier接口，有一个泛型参数，即为当前的组件属性。

简单使用举例如下：

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)
    }
  }
}

以上代码中，我们可以根据需求，动态的设置我们需要的属性，具体的使用方式如下：

//定义变量
  @State modifier: MyColumnModifier = new MyColumnModifier()

  //组件使用
  build() {
    Column() {

    }.attributeModifier(this.modifier)
  }

简单总结

虽然说AttributeModifier使用起来稍显麻烦，但是确实能够让我们实现属性的动态设置，这也是官方为我们提供了主要的方式，所以说，在日常的开发中，如果你需要根据判断条件的成立与否，来动态的设置某一个属性，这个时候就可以使用AttributeModifier。