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

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

前言

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




struct Index {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)})}
}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/59017.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MySQL】可重复读级别下基于Next Key Lock解决幻读

昨天读到了一篇文章[1]&#xff0c;里面讲&#xff0c;面试官说mysql的可重复读级别下有解决幻读的方式&#xff0c;最后公布了答案&#xff0c;是在sql后面加for update。这么说倒是没错&#xff0c;但是这种问法给我一种奇怪的感觉&#xff0c;因为for update无论在哪个隔离级…

Mybatis学习笔记(三)

十、MyBatis的逆向工程 (一)逆向工程介绍 MyBatis的一个主要的特点就是需要程序员自己编写sql&#xff0c;那么如果表太多的话&#xff0c;难免会很麻烦&#xff0c;所以mybatis官方提供了一个逆向工程&#xff0c;可以针对单表自动生成mybatis执行所需要的代码&#xff08;包…

dns构建

&#xff08;1&#xff09;用户输入域名发起域名查询请求。 &#xff08;2&#xff09;计算机操作系统先查找本地hosts文件中是否有这个域名与IP的对应关系&#xff0c;有就返回结果给用户&#xff0c;没有就进入下一步。 &#xff08;3&#xff09;hosts文件找那个没有此域名…

<项目代码>YOLOv8 pcb板缺陷检测<目标检测>

YOLOv8是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一个回归问题&#xff0c;能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法&#xff08;如Faster R-CNN&#xff09;&#xff0c;YOLOv8具有更高的…

FET113i-S核心板已支持RISC-V,打造国产化降本的更优解 -飞凌嵌入式

FET113i-S核心板是飞凌嵌入式基于全志T113-i处理器设计的国产工业级核心板&#xff0c;凭借卓越的稳定性和超高性价比&#xff0c;FET113i-S核心板得到了客户朋友们的广泛关注。作为一款拥有A7核RISC-V核DSP核的多核异构架构芯片&#xff0c;全志科技于近期释放了T113-i的RISC-…

打印速度与精度难兼顾,动态界面打印能否破解?

大家好&#xff01;在科技飞速发展的今天&#xff0c;3D 打印技术已深入众多领域。然而&#xff0c;传统打印技术面临着速度、材料、精度等诸多挑战。在此背景下&#xff0c;一种名为动态界面打印&#xff08;DIP&#xff09;的新技术应运而生——《Dynamic interface printing…

IMS 注册慢问题分析

1、问题描述 VOLTE长时间没注册上。 2、Log分析 10-04 15:49:04.745089 2118 3531 D ImsService: enableIms, phoneId 1 10-04 15:49:04.757739 1423 1498 D RmcImsCtlReqHdl: [1] requestSetImsCfg volte:1, vilte:1, vowifi:0, viwifi:0, sms:1, imsTe…

【网络】套接字编程——TCP通信

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;TCP网络服务器简单模拟实现。 > 毒鸡汤&#xff1a;有些事情&#xff0c;总是不明白&#xff0c;所以我不会坚持。早安! > 专栏选自&#xff1a;…

Django Form 实现多层(嵌套)模型表单

在 Django 中&#xff0c;可以通过使用 ModelForm 和 InlineFormSet 来实现多层&#xff08;嵌套&#xff09;模型表单。这样可以在一个表单中同时编辑主模型及其相关的子模型。下面是一个示例&#xff0c;演示如何实现这种多层嵌套的表单。 1、问题背景 如何使用 Django 的 F…

Linux - grep的正则用法

新建u.txt&#xff0c;文本内容如图&#xff1a; 搜寻特定字符串 利用中括号[]搜寻集合字符 行首与行位字符^$ 任意一个字符.与重复字符*限定连续RE字符范围{} 总结:

落地灯选什么光源最好?五款值得入手的大路灯护眼灯推荐

落地灯选什么光源最好&#xff1f;落地灯是既适合日常人群使用&#xff0c;又适合长时间用眼的学生党、码字党使用的一种照明神器&#xff0c;因此热度一直都很高。但是该行业内的产品也很复杂&#xff0c;其中还有一些劣质不专业的产品掺杂在其中&#xff0c;不但灯光效果不明…

如何获取免费的纯真社区版IP库授权?

纯真社区版IP库 1、访问官网 https://cz88.net/geo-public 地址注册账号 2、登录账号后&#xff0c;申请api 授权

【AAOS】【源码分析】CarSystemUI -- CarSystemBar

CarSystemBar不像Android手机那样固定的顶部“状态栏”和底部“导航栏”,而是将StatusBar和NavigationBar都统称为SystemBar,可以通过如下配置为每侧最多配置一个“系统栏”。 packages/apps/Car/SystemUI/res/values/config.xml<!-- Configure which system bars should …

【DBeaver】连接带kerberos的hive[Apache|HDP]

目录 一、安装配置Kerberos客户端环境 1.1 安装Kerberos客户端 1.2 环境配置 二、基于Cloudera驱动创建连接 三、基于Hive原生驱动创建连接 一、安装配置Kerberos客户端环境 1.1 安装Kerberos客户端 在Kerberos官网下载,地址如下&#xff1a;https://web.mit.edu/kerberos…

1.探索WebSocket:实时网络的心跳!

序言 你可能听说过"WebSokcet"这个词&#xff0c;感觉它好像很高深&#xff0c;但其实它是一个超级酷的小工具&#xff0c;让我们在Web应用里实现实时通信。想象一下&#xff0c;你可以像聊天一样&#xff0c;在浏览器和服务器之间来回“畅聊“&#xff0c;没有延迟…

【大数据学习 | kafka】kafka的数据存储结构

以上是kafka的数据的存储方式。 这些数据可以在服务器集群上对应的文件夹中查看到。 [hexuanhadoop106 __consumer_offsets-0]$ ll 总用量 8 -rw-rw-r--. 1 hexuan hexuan 10485760 10月 28 22:21 00000000000000000000.index -rw-rw-r--. 1 hexuan hexuan 0 10月 28 …

做一个干电池的电量检测器03:数值拟合与电路仿真

首先在表格中进行详细的计算&#xff0c;整理出所需的数据。接着&#xff0c;我们运用MATLAB的强大功能对这些数据进行插值处理&#xff0c;生成了一个离散的数值数组。这个数组的每个数值都精确地对应着模数转换器&#xff08;ADC&#xff09;采样到的信号。通过这些数值&…

MFC工控项目实例二十八模拟量信号每秒采集100次

用两个多媒体定时器&#xff0c;一个定时0.1秒计时&#xff0c;另一个定时0.01秒用来对模拟量信号采集每秒100次。 1、在SEAL_PRESSUREDlg.h中添加代码 class CSEAL_PRESSUREDlg : public CDialo { public:CSEAL_PRESSUREDlg(CWnd* pParent NULL); // standard constructor&a…

【Mac】Screen Recorder by Omi Mac:Omi录屏专家

大家好&#xff0c;今天给大家介绍的这款软件叫Screen Recorder by Omi Mac&#xff1a;Omi录屏专家。 软件介绍 OmniRecorder for Mac 是一款用于录制屏幕的应用程序&#xff0c;专为 macOS 设计。它允许用户录制整个屏幕或特定区域&#xff0c;支持音频录制和实时编辑。这个…

多波束T50P和SES2000 Medium100安装记录(2024年10月)

SES2000 Medium100买了一直没有机会用&#xff0c;本次外业刚好需要。SES2000最大穿透70m。 Medium100安装与SES2000 Standard基本相同。除了钢管和法兰不同以外&#xff0c;它们安装支架都可以通用。有条件的话&#xff0c;用焊接方式将其固定在船侧舷&#xff0c;前方加一道拉…