Qt样式(qss)使用小结(软件换肤,比如暗黑模式)

news2025/2/24 6:28:40

1.背景:

Qt style sheet(qss)跟前端技术一样,就是为了美化界面。关键是,太好用了。之前还为此写过一篇博客。

Qt样式(qss)手册小结_大橘的博客-CSDN博客

其中主要是记录如何获取手册细节。

现在很多软件都有换肤功能,比如暗黑模式。有了qss就简单太多了。学过前端的朋友一看就会。跟css大同小异。

2.使用:

Style Sheet最主要就是生效范围问题,按照面向对象编程的思维,可以认为它像继承。按照平面设计的思维,可以认为跟画画一样,先画轮廓,再勾细节。

在一个项目中,qss可以统一定义一份,在主窗体加载构造的时候,执行setStyleSheet一下,在这个窗体内部就会全局生效,实现快速换肤。

具体用法手册和网络中有太多,不用赘述。就拿最近我写的qss为例记录一下。

/*background*/
*,QTabBar::tab{background-color:rgb(30, 30, 30);color:rgb(0, 255, 0);}

/*disabled*/
*:disabled{color:rgb(200, 200, 200);}

/*selected*/
QTabBar::tab:selected,QTableView::item:selected{background-color:rgb(0, 80, 0);}

/*hover*/
QComboBox,QDateTimeEdit:hover,QTabBar::tab:hover,QTableView::item:hover,QToolButton:hover,QMenuBar::item:selected,QMenu::item:selected,QPushButton:hover,QLineEdit:hover{background-color:rgb(0, 150, 0);}

/*border*/
QTabWidget:pane,QLabel,QMenuBar::item{border: none;}
QComboBox,QDateTimeEdit,QGroupBox,QLineEdit,QTextEdit,QListView,QListView,QTextBrowser,QTableView,QTableView::item{border: 1px solid green;}
QComboBox,QDateTimeEdit,QGroupBox,QLineEdit,QTextEdit,QListView,QListView,QTextBrowser,QTableView{border-radius: 6px;}

/*QPushButton*/
QPushButton{background-color:rgb(0, 100, 0);}
QPushButton:pressed{background-color:rgb(0, 100, 0);}

/*QScrollBar*/
QScrollBar::handle{background-color:rgb(0, 100, 0);}
QScrollBar::add-page,QScrollBar::sub-page{background-color:rgb(50, 50, 50);}

/*QToolTip*/
QToolTip{color:black;}

/*QGroupBox*/
QGroupBox{padding-top: 12px;}

/*QTableView*/
QTableCornerButton::section,QHeaderView::section,QTableView::item{background-color:rgb(30, 30, 30);border: 1px solid green;}

上面的qss,我先定义了最常用的几个特征:背景、字体、disable、选中、鼠标停留、边框,然后定义了针对每一类控件的特征:按钮、滚动条、提示框、组合框、表格。

先定义常用特征,就好像定义基类,或者画一下轮廓。

后针对控件描述特征,就好像写子类,或者勾画细节。

其实也可以使用“#”号针对具体的控件对象来定义,就好像类的实例化,或者作画的具体细节。

3.问题:

在使用过程中遇到了几个典型问题,这里需要记录一下。

3.1.按钮QPushButton:

目前我还没研究透。控件一般都继承QWidget类,所以一旦定义了QWidget样式,就会间接影响到按钮。按钮最讨厌就是边框问题,一旦定义了border相关属性,只要是没有拉伸的地方,按钮就会变成自适应文本大小。一般界面中可以人为控制还好,就怕QMessageBox这类,一旦变成自适应,就成了这样:

6644f1eeb64e4debaf0679e3ae83dffa.png

像右下角那俩按钮的德行,什么玩意?

而我尝试的原则,不要试图样式和界面中的各种属性结合控制,很不好,应该尽量把界面做的“通用”,让它随时可以通过定义qss来改变显示风格。

所以目前我都是尽量规避对按钮边框样式的定义,取而代之的,是利用颜色的变化来做显示效果。 

所以正常情况下,我希望按钮是这样的:

e9e3f4463aa545ad9449a881c6650f63.png

3.2.QTabWidget

这东西让不少人头疼,主要是边框问题。

比如右边和下边这个大白边,网上说需要设置界面中的属性documentModel=true,是可以直接实现,但会造成在最上面多一个小白边。所以放弃!

在我的努力下,通过qss实现:

QTabWidget:pane{border: none;}

 这样就可以了,直接去掉了它所有的边框,其它看着玩就行了。

比如做个颜色试试:

QTabWidget:pane{border: 1px solid blue;}

010bfbe110114d77be700dffa9521d89.png

如果要定义页签部分,则需要这样:

QTabBar::tab{background-color:rgb(30, 30, 30);color:rgb(0, 255, 0);}
QTabBar::tab:selected{background-color:rgb(0, 80, 0);}
QTabBar::tab:hover{background-color:rgb(0, 150, 0);}

 8ad54edd929e4f22a4ceaa95fa50e22d.png

这里我没有使用更高级的用法。其实上面的页签可以定义为圆边,也可以改变位置到左边、右边、下边。还可以用画笔画成其它形状的。

 3.2.3.表格QTableWidget/QTableView

因为QTableWidget继承于QTableView,所以只需要定义QTableView就行了。也就是说,定义了父类,子类也会继承过来样式并生效的。QListWidget&QListView也是一样道理。

 比如上面用到的有关表格的部分:

/*QTableView*/
QTableView{background-color:rgb(30, 30, 30);color:rgb(0, 255, 0);}
QTableCornerButton::section,QHeaderView::section,QTableView::item{background-color:rgb(30, 30, 30);border: 1px solid green;}
QTableView{border-radius: 6px;}
QTableView,QTableView::item{border: 1px solid green;}
QTableView::item:selected{background-color:rgb(0, 80, 0);}
QTableView::item:hover{background-color:rgb(0, 150, 0);}

/*QScrollBar*/
QScrollBar::handle{background-color:rgb(0, 100, 0);}
QScrollBar::add-page,QScrollBar::sub-page{background-color:rgb(50, 50, 50);}

2fd3537cf7e343b49de888a016f841cf.png

 就实现了上图的效果。

3.2.4.菜单和工具栏QMenuBar/QMenu/QToolButton

QMainWindow上面的菜单实际上是两部分组成的,最上面那一条叫菜单栏QMenuBar,每一个主菜单项是它的item,比如:文件、编辑、帮助等,也就是一级菜单。

按一下一级菜单弹出来的才叫菜单QMenu,而其中每一个项也是它的item,比如文件-退出,编辑-剪切,帮助-关于等。

所以要定义一级菜单需要使用QMenuBar::item,定义子菜单项需要使用QMenu::item。比如我需要让鼠标停留的菜单项高亮,就这样写:

QMenuBar::item:selected,QMenu::item:selected{background-color:rgb(0, 150, 0);}

b0f25712c18c473e9ea6ae4f21e69a1f.png

 3.2.5.与QStyle或QPaint生效优先级

按照前端css的说法,样式优先级比属性高。但是qt当中如果使用了画笔绘制,qss是无法生效的,这是我实验的结果。

我认为,qt有点像c#的wpf,说白了特别像html这些前端脚本技术,默认它是透明的,都是用样式在描述它的特征,如果后期自定义了样式,就以后定义的为准。就好像一个变量,先赋值为1,再赋值为2,显然它等于2。

但是画笔是另外一套体系,直接从本质上赋予它颜色,那就不是样式能解决的了。

也许是我还没找到跟权威的说法。

4.小结

先总结这么多,目前为止,我已经用qss实现了换肤机制。

我感觉qtcreator的界面很可能本身就是这么做出来的,只要能掌握方法,ui可玩性很高。

 

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

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

相关文章

6、GPIO输入按键检测(轮询检测)

目录 0x01、简介 0x02、硬件设计 0x03、编写函数 0x001、按键初始化 0x002、按键检测 0x003、按键led翻转 0x04、源程序下载地址 0x01、简介 本次实验主要实现按键控制LED灯。 由于机械按键在按下和抬起的时候会产生按键抖动,所以在设计的时候需要考虑如何消除抖…

Pytorch可视化特征图(代码 亲测可用)

2013年Zeiler和Fergus发表的《Visualizing and Understanding Convolutional Networks》 早期LeCun 1998年的文章《Gradient-Based Learning Applied to Document Recognition》中的一张图也非常精彩,个人觉得比Zeiler 2013年的文章更能给人以启发。从下图的F6特征&…

会议OA项目-首页

目录一、Flex布局简介什么是flex布局?flex属性学习地址:案例演示二、轮播图组件及mockjs三、会议OA小程序首页布局一、Flex布局简介 布局的传统解决方案,基于盒状模型,依赖 display属性 position属性 float属性 什么是flex布局…

简单有效的Mac内存清理方法,不用收藏也能记住

Mac电脑使用的时间越久,系统的运行就会变的越卡顿,这是Mac os会出现的正常现象,卡顿的原因主要是系统缓存文件占用了较多的磁盘空间,或者Mac的内存空间已满。如果你的Mac运行速度变慢,很有可能是因为磁盘内存被过度占用…

如何理解并记忆DataFrame中的Axis参数

当我们遇到有axis参数的方法时,脑子里的第一反应应该是:这个方法一定是沿着某一方向进行某种“聚合”或者“过滤”操作。在此场景下,Axis参数就是用来设定操作方向的:是垂直方向还是水平方向? axis0: 一行一行推进&…

【微服务架构实战】第1篇之API网关概述

1.网关概述 采用分布式、微服务的架构模式开发系统时,API 网关是整个系统中必不可少的一环。 1.1 没有网关会有什么问题? 在微服务架构模式下,1个系统会被拆分成多个微服务,如果每个微服务都直接暴露给调用方,会有以…

MySQL主键和唯一键的区别

主键和唯一键基本知识参考这篇文章 MySQL表的约束 ,本篇文章主要是谈一谈主键和唯一键的区别从而更好的理解唯一键和主键。 在上篇文章中已经提到 主键: primary key 用来唯一的约束该字段里面的数据,不能重复,不能为空&#x…

vue父页面调用子页面及方法及传参,鼠标光标定位

项目场景: vue父页面调用子页面及方法 问题描述 vue中父界面调用子界面及方法时界面可以调用,但是调用方法的时候第一次报错,但是关掉界面再次重新打开就没问题了 原因分析: 在我之前添加鼠标指针定位的时候,如果在…

记录scoped属性的使用和引发的问题

背景 在对表格数据进行样式处理时,通过业务逻辑判断,进行对符合要求的表格填充背景色,没有符合预期的效果。反复排查校验代码和判断逻辑,都没有什么问题,可能还是样式上出现问题。再通过F12 选取元素对表格设置背景色时…

获取树形结构中,父节点下所有子/孙节点(递归方式)

获取树形结构中,父节点下所有子/孙节点(递归方式)1 树形结构(TreeItem类)2 测试代码(main函数)3 运行效果1 树形结构(TreeItem类) 这里通用型树形结构为TreeItem类&…

初学Java web(七)RequestResponse

Request&Response Request:获取请求数据 Response:设置响应数据 一.Request对象 1.Request继承体系 Tomcat需要解析请求数据,封装为requestx对象并且创建requestx对象传递到service方法中 使用request对象,查阅JavaEE API文档的HttpServletReque…

rocketMq架构原理精华分析(一)

rocketMq架构原理精华分析是我们这篇文章的核心,从消息中间件的对比、架构模型、消息模型、常见问题等逐一分析: 一、中间件对比: RabbitMq 集群效果不太好,底层不是java 语言,研究原理比较困难; Kafka是…

前端面试题之计算机网络篇 OSI七层网络参考模型

互联网数据传输原理 |OSI七层网络参考模型 OSI七层网络参考模型 应用层:产生网络流量的程序表示层:传输之前是否进行加密或者压缩处理会话层:查看会话,查木马 netstat-n传输层:可靠传输、流量控制、不可…

亿级流量的互联网项目如何快速构建?手把手教你构建思路

一. 大流量的互联网项目 1.项目背景 索尔老师之前负责的一个项目,业务背景是这样的。城市的基础设施建设是每个城市和地区都会涉及到的,如何在基建工地中实现人性化管理,是当前项目的主要诉求。该项目要实现如下目标: 工地工人的…

C语言实现http下载器(附代码)

C语言实现http的下载器。 例:做OTA升级功能时,我们能直接拿到的往往只是升级包的链接,需要我们自己去下载,这时候就需要用到http下载器。 这里分享一个: 功能: 1、支持chunked方式传输的下载 2、被重定…

Apollo开放平台8.0发布:多维升级“为开发者而生”

Apollo开放平台8.0重磅发布:多维升级“为开发者而生” Apollo开放平台迎来8.0版本,百度自动驾驶开放平台迈向易用性时代 百度Apollo EDU计划进展公布:已覆盖自动驾驶技术人才33.5万、700多所院校 Apollo Studio学习实践社区上线,新…

剑指offer----C语言版----第一天

目录 1. 数组中重复的数字Ⅰ 1.1 题目描述 1.2 思路一 1.3 思路二 1.4 思路三(最优解) 1. 数组中重复的数字Ⅰ 原题:剑指 Offer 03. 数组中重复的数字 - 力扣(LeetCode)https://leetcode.cn/problems/shu-zu-zhong-…

Python语言快速入门上

目录 1、前言 2、变量和常量 1)Python对象模型 2)Python变量 二、运算符和表达式 【运算符和表达式】 【位运算符】 【逻辑运算符】 【成员运算符】 【身份运算符】 【常用内置函数】 【基本输入输出】 【模块导入与使用】 【Python代码编…

【PCB专题】Allegro导出3D文件

在PCB布局时,已经决定了大部分器件要放置的位置。如接口、主要的芯片、模块等。因为放置好器件后可能与结构干涉,如果没有发现,那么不得不在Layout的后期调整器件位置,增加工作量。所以前期布局基本确定后就需要导出3D文件给结构工程师,由他查看是否有器件与结构、螺丝孔等…

全志Tina Linux Display 开发指南支持百问网T113 D1-H哪吒DongshanPI-D1s V853-Pro等开发板

1 概述 让显示应用开发人员了解显示驱动的接口及使用流程,快速上手,进行开发;让新人接手工作时能快速地了解驱动接口,进行调试排查问题。sunxi 平台DE1.0/DE2.0。与显示相关的应用开发人员,及与显示相关的其他模块的开…