海南海口网站开发公司电商小程序源码

【HarmonyOS】鸿蒙应用设置控件通用样式AttributeModifier， @Styles

前言

在鸿蒙中UI开发经常需要对控件样式进行统一的封装，在API早前版本，一般是通过 @Styles进行样式封装复用：

@Entry
@Component
struct Index {build() {Column() {Text("开启广播").TxtStyle()}.height('100%').width('100%')}@Styles TxtStyle(){.width(px2vp(300)).height(px2vp(100)).backgroundColor(Color.Blue).margin({top: px2vp(100)}).border({width: px2vp(2),color: Color.Blue,radius: px2vp(50)})}
}

@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';@Entry
@Component
struct TextPage {@State 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'@Entry
@Component
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)})}
}