【中秋国庆不断更】OpenHarmony多态样式stateStyles使用场景
@Styles和@Extend仅仅应用于静态页面的样式复用,stateStyles可以依据组件的内部状态的不同,快速设置不同样式。这就是我们本章要介绍的内容stateStyles(又称为:多态样式)。
概述
stateStyles是属性方法,可以根据UI内部状态来设置样式,类似于css伪类,但语法不同。ArkUI提供以下四种状态:
● focused:获焦态。
● normal:正常态。
● pressed:按压态。
● disabled:不可用态。
● selected10+:选中态。
使用场景
基础场景
下面的示例展示了stateStyles最基本的使用场景。Button处于第一个组件,默认获焦,生效focused指定的粉色样式。按压时显示为pressed态指定的黑色。如果在Button前再放一个组件,使其不处于获焦态,就会生效normal态的黄色。
@Entry
@Component
struct StateStylesSample {
build() {
Column() {
Button('Click me')
.stateStyles({
focused: {
.backgroundColor(Color.Pink)
},
pressed: {
.backgroundColor(Color.Black)
},
normal: {
.backgroundColor(Color.Yellow)
}
})
}.margin('30%')
}
}
图1 获焦态和按压态
@Styles和stateStyles联合使用
以下示例通过@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,
})
}
}
}
图2 正常态和按压态
在stateStyles里使用常规变量和状态变量
stateStyles可以通过this绑定组件内的常规变量和状态变量。
@Entry
@Component
struct CompWithInlineStateStyles {
@State focusedColor: Color = Color.Red;
normalColor: Color = Color.Green
build() {
Button('clickMe').height(100).width(100)
.stateStyles({
normal: {
.backgroundColor(this.normalColor)
},
focused: {
.backgroundColor(this.focusedColor)
}
})
.onClick(() => {
this.focusedColor = Color.Pink
})
.margin('30%')
}
}
Button默认获焦显示红色,点击事件触发后,获焦态变为粉色。
图3 点击改变获焦态样式
本文由博客一文多发平台 OpenWrite 发布!
【中秋国庆不断更】OpenHarmony多态样式stateStyles使用场景的更多相关文章
- 中秋国庆8天挑战赛 之 挑战8天掌握微信小程序
中秋国庆8天挑战赛 挑战8天掌握微信小程序 当前学习进度: // 10.1// 学习内容:// 10.2// 学习内容:// 10.3// 学习内容:// 10.4// 学习内容:// ...
- JavaFX让UI更美观-CSS样式
相对于Swing来说,JavaFX在UI上改善了很多,不仅可以通过FXML来排版布局界面,同时也可以通过CSS样式表来美化UI. 其实在开发JavaFX应用的时候,可以将FXML看做是HTML,这样跟 ...
- ZBrush国庆中秋大放价,优惠提前享!
没记错的话,上次的ZBrush活动应该是17年春节吧,悄么蔫地就把端午节等一系列节日忽略了,这让苦苦等待的小伙伴们情何以堪,这试用版用的也不得劲儿! 终于等到你,ZBrush官方消息称,17年中秋国庆 ...
- OpenHarmony 3.1 Release版本发布
OpenHarmony 3.1 Release 版本概述 当前版本在OpenHarmony 3.1 Beta的基础上,更新支持以下能力: 标准系统基础能力增强 本地基础音视频播放能力.视频硬编解码.相 ...
- 中秋礼物!开源即时通信GGTalk安卓版全新源码!
经过连续两个多月的努力(开发.调试.测试.改bug),我们终于赶在中秋国庆之前能把全新的GGTalk Android版本献给大家. 4年之前我们就推出了GGTalk Android的第一个版本,但是功 ...
- js学习进阶-元素获取及样式设置
var imgs = document.querySelectorAll("article img"); 获得article元素的直接或间接子孙的所有img元素, <arti ...
- bootstrap入门-4.排版及其他固定样式
本篇包括以下内容:排版.代码.表格.表单. 总结:超无聊,弃更. · 排版样式 标题 h1-h6 取消加粗,字体大小也有一定变化 ...
- WPF 样式和行为
样式(style):组织和重用格式化选项的重要工具,将细节如边距.字体.字号等信息封装起来,然后再需要的地方通过属性来应用样式. 行为(behavior):封装一些通用的UI行为,如拖动,缩放元素的代 ...
- 系列文章--精通CSS.DIV网页样式与布局学习
精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...
- setStyleSheet来设定窗口部件的样式
使用setStyleSheet来设置图形界面的外观:QT Style Sheets是一个很有利的工具,允许定制窗口的外观,此外还可以用子类QStyle来完成,他的语法很大比重来源于html的CSS,但 ...
随机推荐
- ChainMap合并字典
在python中,我们有两个字典需要合并的时候,可以使用字典的update方法 a = {'a': 1, 'b': 2} b = {'x': 3, 'y': 4} a.update(b) print( ...
- Python函数每日一讲 - 简洁快速学会globals()函数
引言 在 Python 中,globals() 函数是一个强大的工具,它允许您访问全局命名空间中的所有变量和函数.本文将深入探讨 globals() 函数的语法.用法以及实际应用场景,帮助大家更好地理 ...
- Gitlab中的打包作业完成后,更新http服务器里的版本号文件
背景 在.gitlab-ci.yml里面,我们有4个场景 dotnet build.dotnet pack和dotnet push 单元测试 SSH到http服务器,更新对应的版本号文件里面的版本数字 ...
- 启动Study.BlazorOne项目
由于Study.Trade模块的Blazor是基于国内著名的BootstrapBlazor组件,因此Study.BlazorOne项目也必须添加对BootstrapBlazor的支持. # 1.去Bo ...
- 第一百一十篇:内存泄漏和垃圾回收(JS)
好家伙,本篇内容为<JS高级程序设计>第四章的学习笔记 1.内存泄露 1.1.什么是内存泄漏? 内存泄漏(Memory Leak)是指程序中已动态分配的堆内存由于某种原因程序未释放或无法释 ...
- 【Azure Redis 缓存】Azure Cache for Redis 是否记录具体读/写(Get/Set)或删除(Del)了哪些key呢?
问题描述 在Azure Redis的门户活动日志中,可以查看到的是对于Redis资源本身的操作.但是对于客户端连接到Redis服务后,对服务所做出的读写,或删除操作,是否有日志可以查看到呢? 问题回答 ...
- 一个利用go反向代理解决api转发的例子(go反向代理)
实现的效果: 如果访问的url路径是类似 /163/ 或 /163/debian 的形式,则转发到163开源镜像服务器 直接上代码: package main import ( "fmt& ...
- 文心一言 VS 讯飞星火 VS chatgpt (205)-- 算法导论15.4 1题
一.求〈1,0,0,1,0,1,0,1〉和〈0,1,0,1,1,0,1,1,0〉的一个LCS.需要写代码的时候,请用go语言. 文心一言,代码正常运行: 在Go语言中,求两个序列的最长公共子序列(Lo ...
- Nebula Graph|信息图谱在携程酒店的应用
本文首发于 Nebula Graph Community 公众号 对于用户的每一次查询,都能根据其意图做到相应的场景和产品的匹配",是携程酒店技术团队的目标,但实现这个目标他们遇到了三大问题 ...
- Zabbix技术分享——zabbix命令详解
在与IT运维的小伙伴交流过程中不少人问到了zabbix_agentd.zabbix_proxy等命令的具体使用问题,为此这一期内容我们来聊聊Zabbix相关命令,其中包括zabbix_server.z ...