腾讯建设网站首页,免费html网站,wordpress调用本分类热门文章,汕头网站建设托管【HarmonyOS】鸿蒙应用设置控件通用样式AttributeModifier#xff0c; Styles
前言
在鸿蒙中UI开发经常需要对控件样式进行统一的封装#xff0c;在API早前版本#xff0c;一般是通过 Styles进行样式封装复用#xff1a; Entry
Component
struct Index {build() {Column(…【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 AttributeModifierButtonAttribute {applyNormalAttribute(instance: ButtonAttribute): void {instance.backgroundColor(Color.Blue)}applyPressedAttribute(instance: ButtonAttribute): void {instance.backgroundColor(Color.Red)}
}一般情况下我们不需要处理这么多样式状态只需要处理默认态即可那只用继承ButtonModifier即可
import { ButtonModifier } from kit.ArkUIclass CommonBtnModifier implements AttributeModifierButtonModifier {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 AttributeModifierButtonModifier {applyNormalAttribute(instance: ButtonAttribute): void {instance.backgroundColor(Color.Blue)}
}DEMO示例
Index 界面UI
import { CommonTextModifier } from ../common/CommonTextModifierEntry
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 AttributeModifierTextModifier {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)})}
}
