HarmonyOs开发：组件如何实现属性的动态设置

前言

运行环境：基于HarmonyOs NEXT

DevEco Studio：Build Version: 5.0.3.900

API：12

modelVersion：5.0.0

在很多的场景下，针对组件的属性，我们都需要动态来选择是否使用，比如组件的显示和隐藏，比如背景颜色改变的设置，高度的改变设置，字体大小的改变设置，等等，很多的场景下，都需要不同的状态来渲染我们的UI视图，在非声明式UI语言里，我们可以进行逻辑的判断也就是if/else语法，来控制组件的属性设置，比如在Android中，控制一个组件的显示与隐藏，我们就可以如下操作，伪代码如下：

if(条件){
   显示
}else{
    隐藏
}

针对声明式语言，在ArkUI中，我们如何动态控制某些属性的设置呢？

针对动态属性的设置，目前总结了三种使用方式，可以满足不同的业务场景，也希望可以帮助到你。

方式一，三元运算符，直接动态设置属性。

比如我们要根据一个状态的判断，来动态的显示和隐藏某一个组件，我们就可以如下操作。

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

以上的代码，我们只需要控制isVisibility这个变量即可，针对其他的属性设置，比如颜色，大小，背景等等，所有的属性，使用方式基本一致，不在举例。

方式二，动态属性attributeModifier控制

针对方式一，有一个弊端，虽然说我们理论上控制了属性的状态切换，但无论是何种状态，这个属性我们必须要进行设置的，无非值不一样罢了，有没有方式，可以真正的控制某个属性的设置呢，翻找官方文档后，确实有，就是使用attributeModifier属性，来动态的设置某一个属性。

当然了，如果仅仅是简单的属性切换，比如背景，颜色，文字大小等等，使用方式一即可，方式二更倾向于，是否需要设置这个属性，而不是改变其属性的值，这一点大家需要注意。

比如，某种状态下，高度需要设置固定值，否则自适应，在比如，某种状态下需要侧滑属性，其他状态下不需要，在比如，某种状态下需要边框属性，其他状态下不需要，等等吧，应用场景是很多的，凡是某个属性需要动态设置，我们就可以使用attributeModifier，我们简单例举一个案例。

第一步，声明需要的动态属性，自定义类实现AttributeModifier接口，支持大部分的组件属性。

目前方法有多个，可以满足不同的业务场景：

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

applyPressedAttribute(instance: T) : void//组件按压状态的样式。

applyFocusedAttribute(instance: T) : void//组件获焦状态的样式。

applyDisabledAttribute(instance: T) : void//组件禁用状态的样式。

applySelectedAttribute(instance: T) : void//组件选中状态的样式

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

  //组件普通状态时的样式。
  applyNormalAttribute(instance: TextAttribute): void {
    if (this.textHeight != undefined) {
      //不为空，设置height属性
      instance.height(this.textHeight)
    }
  }
}

第二步，直接使用即可：

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

//组件使用
Text("文本描述")
  .attributeModifier(this.modifier)

//通过this.modifier，可以动态设置定义里面的属性

以上只是一个很简单的案例，实际的业务场景，大家根据需求自己实现即可。

方式三，多组件形式

声明式UI是支持条件渲染的，针对方式三，是可以同时满足方式一和方式二的，但有一点，不提倡，因为代码过于冗余，比如我们要实现一个组件的颜色设置：

if(this.isColor){
  Text("文本描述").fontColor(Color.Red)
}else {
  Text("文本描述").fontColor(Color.Black)
}

方式三，不是属性的切换也不是值的切换，而是组件的整体替换，虽然可以实现我们想要的效果，但针对属性的动态控制却是不提倡的；但方式三更友好的存在于，组件的动态切换中，比如多条目展示中。

总结

如果是属性值的动态切换，使用方式一便可满足需求，如果是属性的动态设置，使用方式二即可。