#我的鸿蒙开发手记# HarmonyOS开发之属性的动态设置原创

北京大神

发布于 2025-5-19 15:35

浏览

0收藏

本文基于HarmonyOSApi14

在前面的文章中，我们重点概述了组件样式属性抽取的两个装饰器，一个是@Extend装饰器，一个是@Styles装饰器，虽然避免了样式属性的冗余，但是在属性的动态设置上显得无从着手，比如一个组件，需要根据变量来动态设置背景属性，该如何实现？

显然，我们直接根据变量来判断，正如下面的代码，则会直接报错的，毕竟声明式UI中是不支持此种写法的。

Column() {

    }
    if(isBack){
      .backgroundColor(Color.Pink)
    }

有的同学可能会想到，你可以直接给背景的值设置嘛，正如下面的代码：

 Column() {

    }.backgroundColor(this.isBack ? Color.Pink : undefined)

以上的代码确实能够实现值的动态设置，但是并不能实现属性的动态设置，我要的是根据变量选择是否设置backgroundColor，而以上的代码，则变量是真是假，这个backgroundColor属性是一直存在的，只不过值不一样，所以在实现上有着本质的区别。

有的同学可能会想到，既然上面的方式不行，那就多组件的形式，如下面的代码：

if (this.isBack) {
      Column() {

      }.backgroundColor(Color.Pink)
    } else {
      Column() {

      }
    }

确实可以实现属性的动态添加，但是，以上的操作不仅仅是属性了，而是整个组件的重复添加，如果属性非常多，则会显得代码非常冗余，所以呢，在实际的开发中基本上不推荐使用。

有的同学可能会说了，这也不行，那也不行，那么该如何实现呢？哎，这就是本篇文章要概述的，属性的动态添加AttributeModifier。

什么是AttributeModifier

与@Styles和@Extend相比，AttributeModifier可以说，提供了更强的能力和灵活性，且在持续完善全量的属性和事件设置能力，因此，在有需要属性动态设置的时候，推荐优先使用AttributeModifier。

AttributeModifier目前提供了很多方法供我们选择，可以满足不同的业务场景，比如组件普通状态时的样式，按压状态时的样式等等。

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

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

#我的鸿蒙开发手记# HarmonyOS开发之属性的动态设置-鸿蒙开发者社区

简单使用举例如下：

class MyColumnModifier implements AttributeModifier<ColumnAttribute> {
  isSetJustifyContent: boolean = false

  //组件普通状态时的样式。
  applyNormalAttribute(instance: ColumnAttribute): void {

    instance.backgroundColor(Color.White) //设置背景
      .margin({ top: 10 })//设置外边距
   

    if (this.isSetJustifyContent) {
      //为true就设置
      instance.justifyContent(FlexAlign.Center)
    }
  }
}

以上代码中，可以根据自身需要，我们就可以动态切灵活的设置组件的属性了，使用方式如下：

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

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

    }.height("100%")
    .width("100%")
    .attributeModifier(this.modifier)
  }

简单总结

AttributeModifier适用于属性的动态设置，比如，在某一个条件判断下，宽度需要设置固定值，否则自适应，在比如，某种状态下需要背景属性，其他状态下不需要，在比如，某种状态下需要内边距属性，其他状态下不需要，等等，只需要记住一点，那就是某个属性需要动态设置，我们就可以使用attributeModifier。

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

ArkUI / eTS

HarmonyOS

标签

鸿蒙动态属性设置

已于2025-5-20 14:44:32修改