构建第一个ArkTS应用之stateStyles:多态样式

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

概述

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

  • focused:获焦态。
  • normal:正常态。
  • pressed:按压态。
  • disabled:不可用态。

使用场景

基础场景

下面的示例展示了stateStyles最基本的使用场景。Button1处于第一个组件,Button2处于第二个组件。按压时显示为pressed态指定的黑色。使用Tab键走焦,先是Button1获焦并显示为focus态指定的粉色。当Button2获焦的时候,Button2显示为focus态指定的粉色,Button1失焦显示normal态指定的红色。

@Entry
@Component
struct StateStylesSample {build() {Column() {Button('Button1').stateStyles({focused: {.backgroundColor(Color.Pink)},pressed: {.backgroundColor(Color.Black)},normal: {.backgroundColor(Color.Red)}}).margin(20)Button('Button2').stateStyles({focused: {.backgroundColor(Color.Pink)},pressed: {.backgroundColor(Color.Black)},normal: {.backgroundColor(Color.Red)}})}.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.Greenbuild() {Column() {Button('clickMe').height(100).width(100).stateStyles({normal: {.backgroundColor(this.normalColor)},focused: {.backgroundColor(this.focusedColor)}}).onClick(() => {this.focusedColor = Color.Pink}).margin('30%')}}
}

Button默认normal态显示绿色,第一次按下Tab键让Button获焦显示为focus态的红色,点击事件触发后,再次按下Tab键让Button获焦,focus态变为粉色。

图3 点击改变获焦态样式

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

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

相关文章

【Linux C | 多线程编程】线程同步 | 条件变量(万字详解)

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 ⏰发布时间⏰:2024-04-15 0…

【合合TextIn】智能文档处理系列—电子文档解析技术全格式解析

一、引言 在当今的数字化时代,电子文档已成为信息存储和交流的基石。从简单的文本文件到复杂的演示文档,各种格式的电子文档承载着丰富的知识与信息,支撑着教育、科研、商业和日常生活的各个方面。随着信息量的爆炸性增长,如何高…

2024年MathorCup数学应用挑战赛C题思路分析(妈妈杯)

2024年第十四届MathorCup数学应用挑战赛C题解析 文章目录 题目概览第一问:货量预测第二问:运输线路变化的预测第三问:单目标优化第四问:排班计划的优化 MATLAB代码框架货量预测人员排班 2024年的MathorCup数学应用挑战赛再次为我…

基于SpringBoot和Vue的企业客户管理系统

今天要和大家聊的是基于SpringBoot和Vue的企业客户管理系统 !!! 有需要的小伙伴可以通过文章末尾名片咨询我哦!!! 💕💕作者:李同学 💕💕个人简介…

Spring框架第一篇(Spring概述与IOC思想)

文章目录 一、Spring概述二、Spring家族三、Spring Framework四、IOC思想五、IOC容器在Spring中的实现 一、Spring概述 Spring 是最受欢迎的企业级 Java 应用程序开发框架,数以百万的来自世界各地的开发人员使用 Spring 框架来创建性能好、易于测试、可重用的代码。…

界面控件DevExpress WinForms/WPF v23.2 - 富文本编辑器支持内容控件

众所周知内容控件是交互式UI元素(文本字段、下拉列表、日期选择器),用于在屏幕上输入和管理信息。内容控件通常在模板/表单中使用,以标准化文档格式和简化数据输入。DevExpress文字处理产品库(Word Processing Document API、WinForm和WPF富文…

图像分类——综合车辆数据集

一、重要性及意义 智能交通管理:车辆图像分类是智能交通系统(ITS)中的关键组成部分。通过对监控摄像头捕捉到的车辆图像进行自动分类,系统能够实时识别车辆类型、颜色、品牌等信息,进而实现交通流量监控、违章行为检测…

10万字208道Java经典面试题总结(2024修订版)- SSM篇

🍅 作者简介:哪吒,CSDN2021博客之星亚军🏆、新星计划导师✌、博客专家💪 🍅 哪吒多年工作总结:Java学习路线总结,搬砖工逆袭Java架构师 🍅 技术交流:定期更新…

AI2 项目合并工具:轻松合并多个项目的屏幕、素材及拓展

有时我们需要把App Inventor做好的多个.aia项目中的一部分抽取出来,做一个新的项目,由于界面的直接Ctrl C/V复制粘贴可能会导致布局不能100%还原,还会有部分代码块丢失;并且涉及多个项目很难进行拷贝,从来开始弄又费时…

RoguelikeGenerator Pro - Procedural Level Generator

Roguelike Generator Pro是一款功能丰富、高度可定制的关卡和地牢生成器,允许您使用GamObjects、Tilemaps或自定义解决方案按程序创建3D/2D/2.5D关卡 这是怎么一回事? Roguelike Generator Pro是一款强大而简单的关卡和地牢生成器。该资源允许您使用GamObjects、Tilemaps或自…

手写商城项目学习/复习到的知识

1.在windowr创建项目可以选择自定义/vue2/vue3,但尝试在vscode不能选择. 2.vant vant是组件库,可导入结构等.vant2用于vue2,vant3,vant\4用于vue3 vant2的使用 官网: Vant 2 - 轻量、可靠的移动端组件库 (gitee.io) 全部导入:将vant所有的组件放到了所有组件内component使…

SpringBoot启动流程分析之准备应用上下文refreshContext()

文章目录 源码入口1、准备刷新1.1、子类prepareRefresh()方法1.2 父类prepareRefresh()方法 2、通知子类刷新内部bean工厂3、准备bean工厂4、允许上下文子类对bean工厂进行后置处理 源码入口 org.springframework.boot.SpringApplication#run(java.lang…