【HarmonyOS】鸿蒙应用设置控件通用样式AttributeModifier, @Styles
前言
在鸿蒙中UI开发经常需要对控件样式进行统一的封装,在API早前版本,一般是通过 @Styles进行样式封装复用:
{build() {Column() {Text("开启广播").TxtStyle()}.height('100%').width('100%')} TxtStyle(){.width(px2vp(300)).height(px2vp(100)).backgroundColor(Color.Blue).margin({top: px2vp(100)}).border({width: px2vp(2),color: Color.Blue,radius: px2vp(50)})}
}
struct Index
@Styles从API8开始支持,目前从API Version 11开始支持另一种写法attributeModifier,可根据开发者需要动态设置属性。
因为@Styles的使用限制,所以官方才新增了attributeModifier。
1.样式属性并不全面,font相关属性无法设置:
2.@Styles修饰的函数只能在当前类中使用,无法跨界面使用。
不过在单一页面内进行复用的简单样式,也建议使用@Styles进行样式复用。
AttributeModifier的使用
从API 11开始,所有UI控件都可以设置attributeModifier属性:
针对不同的UI控件,有对应的基类Modifier:(足足79个!!!)
以Button为例,封装按钮的样式,我们需要找到ButtonAttribute,实现AttributeModifier接口。
ButtonAttribute样式接口会提供五种样式回调:
applyNormalAttribute 默认样式回调,
applyPressedAttribute 按下样式回调,
applyFocusedAttribute 获得焦点样式回调,
applyDisabledAttribute 不可点击样式回调,
applySelectedAttribute 被选择样式回调。
class CommonBtnModifier implements AttributeModifier<ButtonAttribute> {applyNormalAttribute(instance: ButtonAttribute): void {instance.backgroundColor(Color.Blue)}applyPressedAttribute(instance: ButtonAttribute): void {instance.backgroundColor(Color.Red)}
}
一般情况下,我们不需要处理这么多样式状态,只需要处理默认态即可,那只用继承ButtonModifier即可:
import { ButtonModifier } from '@kit.ArkUI'class CommonBtnModifier implements AttributeModifier<ButtonModifier> {applyNormalAttribute(instance: ButtonAttribute): void {instance.backgroundColor(Color.Blue)}
}
只需要实现默认态样式回调:
当我们实现了样式封装类后,只需要在UI调用的类创建对象,赋值给控件即可实现样式的统一:
import { CommonBtnModifier } from '../common/MyButtonModifier';
struct TextPage { message: string = 'Hello World';build() {RelativeContainer() {Button(this.message)// 如果你有多个控件,都需要该样式赋值,可以创建全局对象进行赋值.attributeModifier(new CommonBtnModifier())}.height('100%').width('100%')}
}import { ButtonModifier } from '@kit.ArkUI'
// export 添加后,才能导入到其他类使用。不加是无法引入该类。
export class CommonBtnModifier implements AttributeModifier<ButtonModifier> {applyNormalAttribute(instance: ButtonAttribute): void {instance.backgroundColor(Color.Blue)}
}
DEMO示例:
Index 界面UI
import { CommonTextModifier } from '../common/CommonTextModifier'
struct Index {txtModifier: CommonTextModifier = new CommonTextModifier()onClickStart = ()=>{}build() {Column() {Text("开启广播").attributeModifier(this.txtModifier).onClick(this.onClickStart)Text("关闭广播").fontSize(px2fp(50)).onClick(this.onClickStart).attributeModifier(this.txtModifier).onClick(this.onClickStart)}.height('100%').width('100%')}
}
文本控件通用样式封装
import { TextModifier } from '@kit.ArkUI'/*** 文本控件通用样式*/
export class CommonTextModifier implements AttributeModifier<TextModifier> {applyNormalAttribute(instance: TextModifier): void {instance.fontSize(px2fp(50)).fontColor(Color.White).width(px2vp(300)).height(px2vp(100)).backgroundColor(Color.Blue).textAlign(TextAlign.Center).margin({top: px2vp(100)}).border({width: px2vp(2),color: Color.Blue,radius: px2vp(50)})}
}