HarmonyOS 应用开发学习笔记 stateStyles:多态样式

1、 HarmoryOS Ability页面的生命周期
2、 @Component自定义组件
3、HarmonyOS 应用开发学习笔记 ets组件生命周期
4、HarmonyOS 应用开发学习笔记 ets组件样式定义 @Styles装饰器:定义组件重用样式 @Extend装饰器:定义扩展组件样式

前面记录了ets组件样式定义的定义,本文记录ets样式的多态定义

重点内容:

语法构造

.stateStyles({focused: { //获得活动焦点时},pressed: { //点击按下时},normal: { //正常状态下}, disabled: { //不可用,不可点击的状态下}})

在这里插入图片描述

一、stateStyles 描述

@Styles和@Extend仅仅应用于静态页面的样式复用,stateStyles可以依据组件的内部状态的不同,快速设置不同样式。这就是我们本章要介绍的内容stateStyles(又称为:多态样式)。

stateStyles是属性方法,可以根据UI内部状态来设置样式,类似于css伪类,但语法不同。ArkUI提供以下四种状态:

项目描述
focused组件获焦态。
normal组件正常态。
pressed组件按压态。
disabled组件不可用态。

简单点理解就是:组件在不同状态下的属性变化,灵活配合,更能醒目当前组件的状态,丰富页面与用户的交互,提高用户体验

二、和Android中的对比

在android中,也是一般drawable的方式,设置view不同状态的属性
在这里插入图片描述

项目描述
android:state_focused=“true”true 获得焦点,false失去焦点
android:state_selected=“true”true 选中状态,false非选中状态
android:state_pressed=“true”true 按下状态,false非按下状态

备:部分,使用时R.drawable.xxx 引用

三、ets中 stateStyles:多态样式的使用

语法构造

.stateStyles({focused: { //获得活动焦点时},pressed: { //点击按下时},normal: { //正常状态下}, disabled: { //不可用,不可点击的状态下}})

Button处于第一个组件,默认获焦,生效focused指定的粉色样式。按压时显示为pressed态指定的黑色

示例:

        Button("测试按钮").stateStyles({focused: { //获得活动焦点时.backgroundColor($r('app.color.start_window_background'))},pressed: { //点击按下时.backgroundColor($r('app.color.table_green'))},normal: { //正常状态下.backgroundColor($r('app.color.green'))}, disabled: { //不可用,不可点击的状态下.backgroundColor($r('app.color.purple_200'))}})

四、@Styles和stateStyles联合使用

@Entry
@Component
struct MyComponent {@Styles normalStyle() {.backgroundColor(Color.Gray)}@Styles pressedStyle() {.backgroundColor(Color.Red)}build() {Column() {Text('Text1').fontSize(50).fontColor(Color.White).stateStyles({normal: this.normalStyle,pressed: this.pressedStyle,})}}
}

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

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

相关文章

1-04C语言执行过程

一、概述 本小节主要讲解一个C程序从源代码到最终执行的过程,这个过程又可以细分为两部分: 源代码到可执行文件的过程可执行文件在内存中执行 本小节是C语言基础当中,比较容易被初学者忽视的知识点。而实际上: 熟悉C程序从源文…

使用curl命令在Linux中进行HTTP请求

在Linux中,curl是一个非常强大的命令行工具,用于发送HTTP请求。它允许用户发送各种类型的HTTP请求,如GET、POST、PUT、DELETE等,并能够处理响应数据。 首先,确保您的Linux系统已经安装了curl。如果未安装,…

OpenVoice实时语音克隆功能实现

前言 在【OpenVoice本地部署教程与踩坑记录】一文中介绍了OpenVoice的基本概念与,并且完成了项目的安装与运行。官方给的示例和用法中仅包含了文本转TTS再克隆音色的功能,仅能用于TTS场景下的文字朗读。 本文基于官方示例改造,实现了实时采集…

亿尚网:撤柜上线电商+直播将成为美妆行业发展的绝佳组合

亿尚网:撤柜上线电商直播将成为美妆行业发展的绝佳组合 来源: 编辑:亿尚风范 时间:2024-01-09 随着社交媒体的兴起,网红经济逐渐成为市场中的一股不可忽视的力量。而在这其中,直播电商的模式更是为网红们…

前端实现搜索功能

最近遇到一个需求,用户在输入框输入关键字之后,点击搜索按钮后进行搜索,如下图,选中的数据在下面,上面展现的是搜索后的数据,现在选中了2条数据: 当用户输入KET后点击搜索,搜出的结果有16条,勾选全选选中后,将选中的16条的数据加到之前已选的2条数据里,于是此时已选…

阿里云云服务器u1实例和e实例有什么区别?

阿里云服务器u1和e实例有什么区别?ECS通用算力型u1实例是企业级独享型云服务器,ECS经济型e实例是共享型云服务器,所以相比较e实例,云服务器u1性能更好一些。e实例为共享型云服务器,共享型实例采用非绑定CPU调度模式&am…

如何启动、停止rocketmq

RocketMQ 是一个分布式消息中间件,启动、停止RocketMQ 实际上意味着重启 RocketMQ 的各个组件,包括 Namesrv、Broker 等。以下是一个通用的重启步骤,具体步骤可能会根据你的部署方式和 RocketMQ 版本有所不同: 1. 停止rocketmq …

prometheus 监控 Hyperledger Fabric 网络

本例中使用的 fabric 版本为 2.4.1 修改 orderer , peer 节点 docker-compose 文件 orderer 节点: environment:- ORDERER_METRICS_PROVIDERprometheus- ORDERER_OPERATIONS_LISTENADDRESS0.0.0.0:8443 ports:- 8443:8443peer 节点: environment:- CO…

ConcurrentLinkedQueue原理探究

ConcurrentLinkedQueue是线程安全的无界非阻塞队列,其底层数据结构使用单向链表实现,对于入队和出队操作使用CAS来实现线程安全。下面我们来看具体实现。 类图结构 为了能从全局直观地了解ConcurrentLinkedQueue的内部构造,先简单介绍Concu…

步入式汽车零件阳光模拟试验箱

汽车零件阳光模拟试验箱辐照光源采用金属卤素灯管,该产品按照其技术性能规定保证了光谱分布,非常适合运用在 汽车零件阳光模拟系统中。灯具的反光罩使用对称抛物面反射,以保证其高平行光束反射率。灯组由带有实际功率调节功能的电子电源&am…

大前端nestjs入门教程系列(四):如何nestjs整合mysql数据库

经过前面的几篇文章,想必大家已经对nestjs有了基础的了解,那么这篇文章就带大家玩玩数据库,学会了这篇,就离大前端又进了一步 Nest与数据库无关,使你可以轻松地与任何 SQL 或 NoSQL 数据库集成。 根据你的喜好&#xf…

javaweb基础----JDBC(一)

一、什么是JDBC JDBC全称为Java数据库连接(Java Database Connectivity),是一套用于执行SQL语句的Java API。应用程序可以通过这套API连接到关系型数据库,并使用SQL语句完成对数据中数据的查询、增加、更新和删除等操作。 JDBC在应用程序与数据库之间起到了一个桥…