HarmonyOS开发:组件如何实现属性的动态设置

程序员一鸣
• 阅读 85

前言

本文基于Api13

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

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

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

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

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

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

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

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

方式二,动态属性attributeModifier控制

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

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

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

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

HarmonyOS开发:组件如何实现属性的动态设置

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


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

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

总结

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

点赞
收藏
评论区
推荐文章
Dax Dax
3年前
Vue父子组件
几种常见的通信方式:1、prop属性父组件通过绑定属性的方式,给子组件传值,同时子组件通过设置props来接收letChildVue.extend(template:'content',props:content:type:String,default:()r
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Stella981 Stella981
3年前
Mixin研究之一
如何利用Mixin对已定义的类进行方法和属性扩展起因类已经定义明确,但希望在创建实例时拓展实例的功能,这种情况下怎么办?目的实现一种机制,能够根据一定的规则,在实例创建时动态的拓展实例的功能(方法和属性);实现1.动态的拓展类的方法和属性,这样所有实例
Stella981 Stella981
3年前
CSS 分类 (Classification)
★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。⑵下面是常用的属性以及描述:!(https://oscimg.oschina.net/oscnet/00cb565
Easter79 Easter79
3年前
Spring两种依赖注入方式的比较
我们知道,Spring对象属性的注入方式有两种:设值注入和构造注入。先看代码:  假设有个类为People,该对象包含三个属性,name和school还有age,这些属性都有各自的setter和getter方法,还有一个包含这三个属性的构造方法。如果用spring来管理这个对象,那么有以下两种方式为People设置属性:  1.设值注入:
Wesley13 Wesley13
3年前
Java高级特性—反射和动态代理
1).反射  通过反射的方式可以获取class对象中的属性、方法、构造函数等,一下是实例:2).动态代理  使用场景:      在之前的代码调用阶段,我们用action调用service的方法实现业务即可。    由于之前在service中实现的业务可能不能够满足当先客户的要求,需要我们重新修改servic
使用 CallLib SDK 时,如何设置主叫方视图在被叫方视图上面
可以通过设置组件style的方式让被叫方的视图上面显示主叫方的视图,唯一要注意的一点是,android在setVideoView时需要设置一个属性isZOrderOnTop,这个属性控制是否置顶。
京东云开发者 京东云开发者
8个月前
鸿蒙跨端实践-布局方案介绍
作者:京东科技刘宁一、前言动态化使用jue语言(开发风格与Vue一致)开发,对于视图的布局采用了标准的Flex布局方式。对于列表类视图,动态化提供了、、、等标签,将子视图的布局管理封装到标签中实现,业务只需要针对标签简单地设置相关属性,即可实现列表类布局,
程序员一鸣 程序员一鸣
2个月前
鸿蒙开发:使用Rect绘制矩形
几何矩形,在实际的开发中,有多种的实现方式,并非一定需要Rect组件,但是,如果有需要用到矩形的场景,建议还是使用Rect组件,因为Rect组件自身携带了很多样式属性,可以满足我们日常的不同的需求。
飞龙AI 飞龙AI
1星期前
DevEcoStudio 中使用模拟器时如何过滤日志
DevEcoStudio中使用模拟器时如何过滤日志鸿蒙核心技术鸿蒙开发者工具DevEcoStudio在HilogSettingsFilter设置Logmessage:A03d00/JSAPP当你看到不断更新的日志时,你会不会崩溃因为Nofilters模式下