鸿蒙开发:走进stateStyles多态样式

 

前言

一个组件,多种状态下,我们如何实现呢?举一个很简单的案例,一个按钮,默认状态下是黑色背景,点击后是红色,手指放开后还原黑色。

我们自然而然的就会想到利用手势的按下和抬起,改变其背景颜色即可,代码如下:

Button("点击").backgroundColor(this.clickBackgroundColor).onTouch((event: TouchEvent) => {if (event.type == TouchType.Down) {this.clickBackgroundColor = Color.Red} else if (event.type == TouchType.Up) {this.clickBackgroundColor = Color.Black}})

除了onTouch之外,gesture也可以实现其效果,无论哪种实现,我们都是要定义变量,改变某一个属性,有没有一种方式,直接更改属性呢?当然是有的,这就是stateStyles。

同样是上一个案例,我们使用stateStyles来实现一下,代码如下:

Button("点击").stateStyles({pressed: { //按压.backgroundColor(Color.Red)},normal: { //正常态.backgroundColor(Color.Black)}})

可以发现,效果是和上述一模一样的。

简单概述

stateStyles为多态样式,可以依据组件的内部状态的不同,快速设置不同样式,比如背景颜色,颜色、大小等等常见的通用属性,此种行为,很类似于css中的伪类,但语法稍有不同,目前支持的有以下五种状态:

状态

概述

focused

获焦态

normal

正常态

pressed

按压态

disabled

不可用态

selected

选中态

实际场景

具体的场景主要适用于多状态的切换,比如前言中的案例,当然了,它是支持多个属性的,比如,我们再增加宽高属性:

Button("点击").stateStyles({pressed: { //按压.backgroundColor(Color.Red).width(200).height(100)},normal: { //正常态.backgroundColor(Color.Black).width(100).height(50)}})

除了多个属性之外,另外也可以直接传递样式:

定义Styles:

@StylesnormalStyle() {.backgroundColor(Color.Black).width(100).height(50)}@StylespressedStyle() {.backgroundColor(Color.Red).width(200).height(100)}

使用Styles:

Button("点击").stateStyles({pressed: this.pressedStyle,normal: this.normalStyle})

总结

selected状态一般用于可选择的组件,比如Checkbox,比如Radio,目前支持的组件如下:

支持组件

支持的参数/属性

起始API版本

Checkbox

select

10

CheckboxGroup

selectAll

10

Radio

checked

10

Toggle

isOn

10

ListItem

selected

10

GridItem

selected

10

MenuItem

selected

10

简单案例:

Radio({ value: 'Radio1', group: 'radioGroup1' }).checked(this.value).height(50).width(50).borderRadius(50).radioStyle({ checkedBackgroundColor: Color.Red }).onClick(() => {this.value = !this.value}).stateStyles({normal: {.backgroundColor(Color.Black)},selected: {.backgroundColor(Color.Red)},})

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

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

相关文章

Python小游戏11——扑克牌消消看小游戏

首先,你需要确保已经安装了pygame库。如果还没有安装,可以使用以下命令进行 安装: bash pip install pygame 代码示例: python import pygame import random import sys # 初始化pygame pygame.init() # 设置屏幕尺寸 SCREEN_WIDT…

美课+, 一个公司老项目,一段程序猿的技术回忆

前言 "美课"项目从2018年3月26号开始启动到2018年6月8号结束,总计两个月多的时间,项目的时间节点比较紧张.虽然最后没有上线很遗憾,但是,不管是在流程和项目上,对自己都是一次不错的尝试.下面我就对这次项目做一下iOS端的整体总结. #### 技术难点 *** 在iOS端,我感到…

鸿蒙应用开发:数据持久化

最近在搞公司项目用到了鸿蒙端的数据持久化,特来跟大家分享一下。 在鸿蒙开发中,可以使用以下几个包来实现数据的持久化处理: Data Ability 通过数据能力组件,开发者可以实现复杂的数据操作,包括增、删、改、查等功…

【国潮来袭】华为原生鸿蒙 HarmonyOS NEXT(5.0)正式发布:鸿蒙诞生以来最大升级,碰一碰、小艺圈选重磅上线

在昨日晚间的原生鸿蒙之夜暨华为全场景新品发布会上,华为原生鸿蒙 HarmonyOS NEXT(5.0)正式发布。 华为官方透露,截至目前,鸿蒙操作系统在中国市场份额占据 Top2 的领先地位,拥有超过 1.1 亿 的代码行和 6…

中间件详解与应用场景

1. 引言 随着信息技术的飞速发展,应用系统变得日益复杂,软件架构逐步从单体应用演变为分布式系统。在这种复杂的环境中,如何使各个系统、服务和组件之间顺畅地通信、协作,成为了软件开发中的关键问题。中间件(Middlew…

Linux如何安装“ServerAgent“并使用?

1、cd /home/ 2、上传文件到项目文件下 3、解压 unzip ServerAgent-2.2.3.zip 4、打开文件 cd ServerAgent-2.2.3/ 5、赋权(测试环境) chmod -R 777 *6、启动 ./startAgent.sh

笔记整理—linux网络部分(3)socket接口

首先,send()函数和write()可以用于发送,而recv()和read()k可用于接收文件,其本质就是因为linux中,一切皆是文件。 int socket(int domain, int type, int protocol); domain是指域,是ipv4还是ipv6;type是s…

Prompt-Tuning方法学习

文章目录 一、背景1.1 Pre-training1.2 Fine-Tuning1.3 高效微调(SOTA PEFT)1.4 基于强化学习的进阶微调方法(RLHF) 二、Prompt-Tuning技术2.1 发展历程2.2 Prompt模板构建方式 三、基于连续提示的Prompt Tuning四、Q&A 一、背…

程序员节日的日期是10月24日‌程序员日

‌程序员节日的日期是10月24日。‌ 这一天被称为‌中国程序员日或‌1024程序员节,由‌博客园、‌CSDN等自发组织设立,旨在纪念程序员对科技世界的贡献。 程序员节日的由来和意义 1024程序员节的由来可以追溯到2010年,最初由网友提出设立一个…

如何制作一个自己的网站?

在今天的互联网时代,网站展示已经是一个很基础的营销工具。不管是企业、还是个人,如何制作一个自己的网站?本文将会提供一个全面的基础制作网页教程,教你如何从零开始制作网页。 网页制作的基础知识:HTML、CSS和JavaS…

RocketMQ消息处理详解!

文章目录 引言同步发送原理分析优缺点优点缺点 使用场景 异步发送原理分析优缺点优点缺点使用场景 单向发送原理分析优缺点优点缺点 使用场景 三种方式对比如何选择同步发送异步发送单向发送 总结 引言 在 RocketMQ 中,有 3种简单的消息发送方式:同步发…

R语言绘图——坐标轴及图例

掌握坐标轴与图例的设置与调整,对于提升数据可视化的清晰度和可读性至关重要。通过这些工具,可以有效地传达数据背后的故事,提高图表的表现力。 0x01 坐标轴 一、坐标轴的设置 1、修改坐标轴的标签 在ggplot2中,坐标轴是根据数…

计算服务器:开启科学计算新变革的强大引擎

1983 年,著名数学家 Lax 为首的调研小组指出,大型科学计算对国家安全、科技进步与经济发展至关重要,从美国国家利益出发,大型计算的绝对优势不容动摇。 科学计算是什么?为何在 20 世纪 80 年代就被提升到美国国家利益层…

Pytest日志收集器配置

前言 在pytest框架中,日志记录(logging)是一个强大的功能,它允许我们在测试期间记录信息、警告、错误等,从而帮助调试和监控测试进度。 pytest与Python标准库中的logging模块完美集成,因此你可以很容易地在…

vmware虚拟机linux系统安装

一、下载linux镜像安装包 步骤1---网址地址下载镜像 地址:Index of /ubuntu-releases/22.04/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 步骤2---下载linux版本号 步骤3---查看下载的linuxiso linux镜像操作系统 二、vmware新建安装linux操作系统…

边缘计算技术的优势与挑战

如今,随着5G快速无线网络的到来,将计算存储和物联网(IoT)分析的部署放在靠近数据产生的地方,使得边缘计算成为可能。 物联网设备和新应用的扩展需要实时计算能力。5G无线正在考虑边缘系统,以快速跟踪支持实…

基于SpringBoot+Vue的厨艺交流系统的设计与实现(源码+定制开发)厨艺知识与美食交流系统开发、在线厨艺分享与交流平台开发、智能厨艺交流与分享系统开发

博主介绍: ✌我是阿龙,一名专注于Java技术领域的程序员,全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师,我在计算机毕业设计开发方面积累了丰富的经验。同时,我也是掘金、华为云、阿里云、InfoQ等平台…

爬虫中代理ip选择和使用实战

一、爬虫中的反爬问题 爬虫技术不仅是一种工具,更像是一门捕捉信息的艺术。通过它,我们能够从浩瀚的互联网中,精确获取到所需的有价值数据。对于那些需要进行数据分析或模型训练的人来说,爬虫技术几乎是必备的技能。虽然网上公开…

MyBatis 如何映射 Enum(使用 EnumTypeHandler、自定义 TypeHandler)

文章目录 1. MyBatis 中的 Enum 映射概述2. 使用 EnumTypeHandler2.1 代码示例:将 Enum 映射为字符串2.2 代码示例:将 Enum 映射为整数2.3 如何配置 EnumTypeHandler 3. 自定义 TypeHandler3.1 为什么需要自定义 TypeHandler3.2 自定义 TypeHandler 的实…

git提交到github个人记录

windows下git下载 1.进入git官网https://git-scm.com/downloads/win 一直默认选项即可 2.在settings中SSH and GPG keys中Add SSH key 3.选择git cmd git使用 1.配置用户名,和邮箱 git config --global user.email "youexample.com" git config --g…