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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于粒子群算法的曲面路径优化

目录 摘要 测试函数shubert 粒子群算法的原理 粒子群算法的主要参数 粒子群算法原理 粒子群算法参数拟合 代码 结果分析 展望 基于粒子群算法的曲面路径优化(代码完整,数据齐全)资源-CSDN文库 https://download.csdn.net/download/abc991835105/88698419 摘要 寻优算法,…

Guarded Suspension模式--适合等待事件处理

Guarded是被守护、被保卫、被保护的意思, Suspension则是暂停的意思。 如果执行现在的处理会造成问题, 就让执行处理的线程进行等待--- 这就是Guarded Suspension模式。 模式通过让线程等待来保证实例的安全性。 一个线程ClientThread会将请求 Request的…

Linux第16步_安装NFS服务

NFS(Network File System)是一种在网络上实现的分布式文件系统,它允许不同的操作系统和设备之间共享文件和资源。 在创建的linux目录下,再创建一个“nfs“文件夹,用来供nfs服务器使用,便于”我们的开发板“…

C语言注意点(2)

1.使用pow函数的相关问题 局部变量n0 while(num/pow(10,n)) n; 为什么不可行 printf("%d",num/pow(10,4)%10) 为什么要提前用temp先引出来 答:pow函数的返回值为double类型,1.终止条件不会满足 2.num/pow(10,4)结果为浮点型,浮…

Nginx 常用变量 与 防盗链

目录 1.常用变量 2. $http_referer 配置防盗链 2.1 referer 2.2 配置防盗链 1.常用变量 变量说明 $args 请求中的参数,也叫查询参数 $content_length HTTP响应信息里的"Content-Length" $document_root nginx虚拟主机配置文件中的root站点根目录…

STM32的在线升级(IAP)实现方法:BOOT+APP原理详解

0 工具准备 Keil uVision5 Cortex M3权威指南(中文) STM32参考手册 1 在线升级(IAP)设计思路 为了实现STM32的在线升级(IAP)功能,通常会将STM32的FLASH划分为BOOT和APP两个部分,BOO…

JavaScript:关系数组、对象的复制

关系数组(关联数组)解字符串出现的次数: var str aaccddvvasdadqwd;// 统计每个字母出现的次数// 关系数组(关联数组) 长度永远为0// 使用字符串当做索引var arr [];arr[0] 20;// arr[a] 1;// arr[b] 3;// arr[c] 4;// console.log(arr)for (var i 0; i < str.lengt…

美经济学家预测,明年美股或将大跌86%,你怎么看?

年初至今&#xff0c;标准普尔500指数上涨25%&#xff0c;道琼斯指数上涨13%&#xff0c;以科技股为主的纳斯达克指数大涨了44%。 美国经济学家哈里斯登特近日预测&#xff0c;这种牛市是“100%人为印钞的结果”&#xff0c;而这一巨大的泡沫将在2024年破灭&#xff0c;届时美…

“智慧”千里眼助力水泵站

泵站是为水提供势能和压能&#xff0c;解决无自流条件下的排灌、供水和水资源调配问题的唯一动力来源&#xff0c;在工农业用水、防洪、排涝和抗旱减灾等方面发挥着重要作用。一旦出现异常&#xff0c;对经济生产将造成难以估量的损失&#xff0c;给水利安全管理造成负担。因此…

反射UnityEditor.GameView设置GamePlayMode分辨率

现在很有游戏考虑横屏适配、竖屏适配、阿拉伯语适配&#xff08;横竖屏&#xff09;导致拼界面变得越来越繁琐。 有很多时候需要记录各个控件的状态。 为了减少操作&#xff0c;特意制作了这个工具&#xff0c;点击用x配置可以自动切换到 宽高分辨率&#xff0c;如果当前没有则…

简易视频播放器(案例)

介绍 本篇Codelab使用ArkTS语言实现视频播放器&#xff0c;主要包括主界面和视频播放界面&#xff0c;我们将一起完成以下功能&#xff1a; 主界面顶部使用Swiper组件实现视频海报轮播。主界面下方使用List组件实现视频列表。播放界面使用Video组件实现视频播放。在不使用视频组…

程序员必知!命令模式的实战应用与案例分析

命令模式是一种行为设计模式&#xff0c;它将请求封装为对象以实现客户端参数化、请求排队、日志记录及撤销操作&#xff0c;旨在解耦调用者与操作实现者&#xff0c;以智能家居为例&#xff0c;用户通过界面发送命令对象&#xff0c;设备作为接收者执行相应操作&#xff0c;无…

物理与网络安全

物流环境安全 场地选择考虑抗震、承重、防火、防水、供电、空气调节、电磁防护、雷击及静电 场地因素&#xff1a; 自然灾害&#xff0c;社会因素&#xff08;加油站、化工厂&#xff09;&#xff0c;配套条件&#xff08;消防&#xff0c;交通&#xff0c;电力&#xff0c;…

QT项目中添加资源文件和使用qss样式

时间记录&#xff1a;2024/1/6 一、添加使用资源文件 1.1 创建项目并打开项目&#xff08;带ui界面的项目&#xff09; 1.2 使用快捷键Ctrln创建文件&#xff0c;选择"QT"下面的"QT Resource File" 1.3 输入文件名和文件保存路径 1.4 将需要添加的文件…

钡铼网关 只需一台,解锁智慧无人搅拌站系统,绿色又环保

行业需求 为了提高搅拌站的自动化&#xff0c;减少人工繁琐的操作&#xff0c;同时记录物料的增减记录&#xff0c;实现对于物料从进场到出场的全周期管理。 系统介绍 针对搅拌站各个环节的需求大致相同&#xff0c;市场中逐渐流行一整套基本的智慧搅拌站解决方案。各种搅拌站…

水母目标检测数据集VOC格式500张

水母&#xff0c;一种美丽而神秘的海洋生物&#xff0c;以其独特的形态和生态习性而备受瞩目。 水母的体型呈伞状&#xff0c;身体透明&#xff0c;有各种颜色和花纹。它们没有骨骼&#xff0c;身体由胶状物质组成&#xff0c;非常柔软和脆弱。水母通过触手上的刺细胞释放毒素…

哪个洗地机质量好?2024年洗地机推荐

如今&#xff0c;家用洗地机已经成为越来越多家庭的不可或缺之物。然而&#xff0c;在市场上琳琅满目的洗地机品牌和型号中&#xff0c;究竟哪一个性价比高、质量好&#xff0c;很多消费者常常陷入选择困难。为了帮助大家能够更加轻松地购买到适合自己的洗地机&#xff0c;我们…

dotdotdot插件快速实现多行文本的省略

jQuery.dotdotdot 前言 在“css新增文本样式&#xff08;完整&#xff09;”这篇&#xff0c;我们介绍了text-overflow属性省略多余的文本。用text-overflow属性可以直接省略单行文本&#xff0c;但省略多行文本&#xff0c;单独使用CSS是无法实现&#xff0c;今天我们介绍一…

【Linux 内核源码分析】关于Linux内核源码目录结构

Linux内核源码采用树形结构。功能相关的文件放到不同的子目录下面&#xff0c;使程序更具有可读行。 使用Source Insight打开源码&#xff0c;如下图所示&#xff0c;可以看到源码是树形结构。 目录含义描述arch存放与体系结构相关的代码&#xff0c;包括不同硬件平台的特定代…

深度解析分布式算法:构建高效稳定的分布式系统

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…