Qt+qss动态属性改变控件状态切换的样式

先说点基础的吧,qt的样式实现,常见的主要有三种方式,分别为:
1.ui界面中右键样式表直接添加
2.代码中对控件设置样式setStyleSheet
3.外部预设好qss文件,代码中加载后设置样式
实际工作开发中,我推荐使用优先级为3>2>1,理由如下:
在ui界面中直接添加样式,优点是可以实时看到基本的ui效果,但对于某些需要切换状态的ui,会比较麻烦。例如我预设了一个标签“没信号”的效果,当我的设备有信号时,我需要在代码中进行“有信号”效果的设置,这样一来,我们难免会在代码中进行重复的setStyleSheet,1和2搭配起来可以正常使用,只是难以管理我们的样式。
另外插一嘴,如果我们在ui界面中设置好了控件的布局,那后续我们在代码中想要改变布局,是极其麻烦的,比如我有四个按钮,原本是上下左右排列的,结果来了一个甲方需求,需要变成从左到右的排列。这样一来,我只能在ui界面中拖拽按钮进行布局,来满足甲方的需求。要命的来了,甲方突然又说,我需要两个版本,上下左右和从左到右都要。你就很头疼了,每次编译发布的时候都需要去修改ui界面,麻烦至极,你甚至一气之下想要拷贝多份代码……这种思路显然是不对的。遇到这种情况,我们应该通过代码来灵活布局,由代码中创建好四个控件,然后新建布局类进行布局。同样,这里的控件样式也只能由代码来进行设置。
然而,我们一旦在多处代码中使用了setStyleSheet,就会让我们的样式设置变得凌厉,特别对于状态切换,比如一个按钮点击了之后,需要切换成其他状态,这部分样式设置一般放在信号槽当中。针对这种情况,我们期望对所有样式表进行有效的管理,于是qss文件这种方式就应运而生了。
简单来说,就是将所有样式表放进qss文件中,通过文件读取来进行统一设置(具体实现就不赘述了。)
然而到了这里,还没有解释控件状态切换需要怎么做。别急,现在就来。

Qt+qss动态属性改变控件状态切换的样式
一个QPushbutton按钮,一般来说会存在三态(常态、鼠标悬浮、鼠标点击按下),复杂的还会有选中和取消使能的状态。这种情况,我们的样式表会这样写:

QPushButton#btn_xxx{
border-image: url(:/image/xxx.png);
color: #000000;
font-size: 18px;
font-family: 黑体;
min-width:110;
max-width:110px;
min-height:40px;
max-height:40px;
}
QPushButton#btn_xxx:hover{
border-image: url(:/image/xxx_over.png);
}
QPushButton#btn_xxx:pressed{
color: #ffffff;
border-image: url(:/image/xxx_down.png);
}
QPushButton#btn_xxx:checked{
color: #ffffff;
border-image: url(:/image/xxx_checked.png);
}
QPushButton#btn_xxx:disabled{
color: #ffffff;
border-image: url(:/image/xxx_disabled.png);
}

以QPushButton#btn_xxx:pressed为例,分别为类名,对象名和控件状态,btn_xxx是这个按钮(这类按钮)的名称,记得要setObjectName,样式表才会生效哦。而pressed是QPushButton自带的一种控件状态,其他控件可不一定有。
然而,这一套样式表只针对于按钮的一种“状态”,这里的状态指的是不同的样式,比如绿色的按钮和红色的按钮,两种颜色的按钮分别都有以上的五种控件状态。
如何进行不同颜色样式的状态切换呢?我们需要添加控件的属性setProperty
首先,样式表的QPushButton#btn_xxx:pressed要进行改造,变为QPushButton#btn_xxx:pressed[State=‘Green’],这样该条样式就具有了属性,即当该控件的属性State为Green时,才会应用这条样式。
于是我们的样式表可以改成:

//green
QPushButton#btn_xxx[State='Green']{
border-image: url(:/image/xxx.png);
color: #000000;
font-size: 18px;
font-family: 黑体;
min-width:110;
max-width:110px;
min-height:40px;
max-height:40px;
}
QPushButton#btn_xxx:hover[State='Green']{
border-image: url(:/image/xxx_over.png);
}
QPushButton#btn_xxx:pressed[State='Green']{
color: #ffffff;
border-image: url(:/image/xxx_down.png);
}
QPushButton#btn_xxx:checked[State='Green']{
color: #ffffff;
border-image: url(:/image/xxx_checked.png);
}
QPushButton#btn_xxx:disabled[State='Green']{
color: #ffffff;
border-image: url(:/image/xxx_disabled.png);
}//red
QPushButton#btn_xxx[State='Red']{
border-image: url(:/image/xxx.png);
color: #000000;
font-size: 18px;
font-family: 黑体;
min-width:110;
max-width:110px;
min-height:40px;
max-height:40px;
}
QPushButton#btn_xxx:hover[State='Red']{
border-image: url(:/image/xxx_over.png);
}
QPushButton#btn_xxx:pressed[State='Red']{
color: #ffffff;
border-image: url(:/image/xxx_down.png);
}
QPushButton#btn_xxx:checked[State='Red']{
color: #ffffff;
border-image: url(:/image/xxx_checked.png);
}
QPushButton#btn_xxx:disabled[State='Red']{
color: #ffffff;
border-image: url(:/image/xxx_disabled.png);
}

哎,没错,样式表的代码量确实多了一倍,但如此一来,我们就能通过代码来切换状态啦,记得setProperty之后要调用unpolish和polish,不然样式可能无法成功修改

void xxx::slot_xxx(bool b_flag)
{if(b_flag){btn_xxx->setProperty("State","Green");btn_xxx->style()->unpolish(btn_video_lock); //清除旧的样式btn_xxx->style()->polish(btn_video_lock);   //更新为新的样式}else{btn_xxx->setProperty("State","Red");btn_xxx->style()->unpolish(btn_video_lock); //清除旧的样式btn_xxx->style()->polish(btn_video_lock);   //更新为新的样式}
}

到了这里,我们基本上就可以用qss一种方式,来实现我所需要的全部需求了。
另外,如果甲方需要整体更换ui,类似换肤这种需求的话,我们直接拷贝一份qss进行修改,由代码来加载不同的qss文件即可。

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

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

相关文章

停止一个正在运行的线程

暴力停止方法 stop 该方法是不安全的,已经过时的方法,在其方法描述上 This method is inherently unsafe,这个方法实际上是不安全的 package com.alibaba.fescar.core.protocol.test;public class TestThreadStop {public static void main(S…

基于STM32开发的智能水族箱管理系统

目录 引言环境准备智能水族箱管理系统基础代码实现:实现智能水族箱管理系统 4.1 温度传感器数据读取4.2 水泵与加热器控制4.3 水位传感器数据读取4.4 用户界面与显示应用场景:水族箱管理与优化问题解决方案与优化收尾与总结 1. 引言 智能水族箱管理系…

day51 动态规划 121. 买卖股票的最佳时机 122.买卖股票的最佳时机II

121. 买卖股票的最佳时机 动态规划 1.确定dp数组(dp table)以及下标的含义 dp[i][0] 表示第i天持有股票所得最多现金 ,这里可能有同学疑惑,本题中只能买卖一次,持有股票之后哪还有现金呢? 其实一开始现…

web学习笔记(六十五)

目录 1. Hash模式和History模式 2. 导航守卫 3. 路由元信息 1. Hash模式和History模式 Hash模式(历史模式)和History模式(哈希模式)是匹配路由的两种模式,一般默认配置Hash模式,可以在index.js页面中将路…

几种在ARM MCU上控制流水灯的方法

对于初学者,在ARM单片机上控制流水灯的亮灭是必经之路。控制流水灯的亮灭有很多方法,比如8个LED,可以控制8灯同时亮、灭;可以控制8灯依次亮、灭;可以控制8灯依次亮、灭,然后反方向再依次亮、灭;…

python-NLP常用数据集0.1.012

XNLI数据集 用户语言翻译和跨语言分类的语料库 官网地址:https://github.com/facebookresearch/XNLI下载地址:https://dl.fbaipublicfiles.com/XNLI/XNLI-1.0.zip注意事项:数据集有json格式的,和txt格式的数据格式 txt格式 la…

我们正迈向万物互联

物联网(Internet of Things,IoT)是近年来信息技术领域最引人注目的创新之一。它通过将物理世界与数字世界紧密相连,为我们的日常生活、工业生产、城市管理等多个领域带来了前所未有的变革。本文将深入探讨物联网的基本概念、技术原…

Java 18 新功能概述

Java 18 在 2022 年 3 月 22 日正式发布,Java 18 不是一个长期支持版本。 包含多项新特性和改进,如文件系统链接、文本块、表达式求值API、ForkJoinPool优化、Optional新方法等。 亮点还包括预览特性:Record Pattern Matching for Switch和增…

FMEA与8D间之动态化及关联性——SunFMEA软件

企业做好全面质量管理,需要具备:以事先预防、系统化、动态化、创新性四大理念为核心。 为实现质量管理目标,通常采用不同工具和方法,我们会发现,每种工具都有其特定的对象,很多问题的解决都需要多种工具的…

Android - RadioGroup中多个radiobutton同时被选中问题

问题描述: 动态创建radio button, 并将多个button添加到radio group中。但是实际运行时多个radiobutton会被同时选中: 代码如下: mRadioGroup findViewById(R.id.radioGroup);mDevButtons new RadioButton[device_count];for(int i0;i<device_count;i) {mDevButtons[i] …

C++ - 查找算法 和 其他 算法

目录 一. 查找算法&#xff1a; 1.顺序查找&#xff1a; 2.二分查找&#xff1a; 二. 其他算法&#xff1a; 1.遍历算法&#xff1a; 2.求和、求平均值等聚合算法。 a.求和算法&#xff1a; b.求平均值算法&#xff1a; 一. 查找算法&#xff1a; 1.顺序查找&#xff1…

Python深度学习基于Tensorflow(15)OCR验证码 文本检测与识别实例

文章目录 文本检测文本识别CTC层生成验证码并制作数据集建立模型模型推理 参考 文本检测 文本检测和目标检测类似&#xff0c;其不同之处在于文本目标具有序列特征&#xff0c;有连续性&#xff0c;可以通过结合 Faster R-CNN 和 LSTM 的方式进行文本检测&#xff0c;如 CTPN …

学习请求接口

axios的方法 方法一 方法二 方式三 方式四 ajax请求 fetch请求 学习一下

告别冗长代码:Java Lambda 表达式如何简化你的编程

在现代软件开发中&#xff0c;高效和简洁的代码变得越来越重要。Java作为一门成熟而广泛使用的编程语言&#xff0c;一直在不断进化&#xff0c;以满足开发者的需求。Java 8的推出标志着一次重要的飞跃&#xff0c;其中最引人注目的特性之一便是Lambda表达式。 Lambda表达式为J…

RK3588推理RetinaFace出现问题

RK3588推理RetinaFace出现问题 在RK3588上测试RockChip提供的RetinaFace模型时&#xff0c;出现下面的问题 $ python RetinaFace_pic.py done --> Init runtime environment I RKNN: [02:27:16.501] RKNN Runtime Information: librknnrt version: 1.5.2 (c6b7b351a2023…

【区分vue2和vue3下的element UI Cascader 级联选择器组件,分别详细介绍属性,事件,方法如何使用,并举例】

在Vue 2的Element UI和Vue 3的Element Plus中&#xff0c;el-cascader&#xff08;级联选择器&#xff09;组件用于从嵌套的数据中进行选择。以下是对这两个版本下el-cascader组件的属性、事件和方法的详细介绍&#xff0c;并附带示例。 Vue 2的Element UI el-cascader 属性…

Windows11下Docker使用记录(五)

目录 准备1. WSL安装cuda container toolkit2. win11 Docker Desktop 设置3. WSL创建docker container并连接cuda4. container安装miniconda&#xff08;可选&#xff09; Docker容器可以从底层虚拟化&#xff0c;使我们能够在 不降级 CUDA驱动程序的情况下使用 任何版本的CU…

ES6中的class类 及 递归

es6 中的 class可以把它看成是 es5 中构造函数的语法糖&#xff0c;它简化了构造函数的写法&#xff0c;类的共有属性放到 constructor 里面 1. 通过 class 关键字创建类&#xff0c;类名需要定义首字母大写 2.类里面有个 constructor 函数&#xff0c;可以接受传递过来的参数…

音视频开发19 FFmpeg 视频解码- 将 h264 转化成 yuv

视频解码过程 视频解码过程如下图所示&#xff1a; ⼀般解出来的是420p FFmpeg流程 这里的流程是和音频的解码过程一样的&#xff0c;不同的只有在存储YUV数据的时候的形式 存储YUV 数据 如果知道YUV 数据的格式 前提&#xff1a;这里我们打开的h264文件&#xff0c;默认是YU…

储能逆变器测试负载箱是如何实现的

储能逆变器测试负载箱是专门用于模拟各种负载条件的设备&#xff0c;主要用于对储能逆变器进行性能测试和评估。它可以根据实际需求&#xff0c;模拟不同的负载类型、负载大小和负载变化率&#xff0c;从而为储能逆变器的设计和优化提供准确的数据支持。那么&#xff0c;储能逆…