当前位置: 首页 > news >正文

【QT】qss

目录

基本语法

设置全局样式 

问题

分离样式代码 

方案1

方案2

选择器

概况

子控件选择器

伪类选择器 

盒子模型

修改控件样式示例

按钮

属性小结

复选框

属性小结

输入框

属性小结 

列表框

属性小结

渐变色

示例:

菜单栏

设置菜单栏的背景色和各个菜单之间的间距

设置菜单的背景颜色和内边距

 设置选中菜单/点击菜单时背景颜色修改

设置菜单项之间的分割线样式

属性小结 

登录界面设计

最终效果

设置背景

设置输入框样式 

设置按钮样式

完整代码


基本语法

选择器{

        属性名:属性值;

}

选择器:先选择某个/某一类控件,接下来进行的各种属性设置,都是针对选中的控件生效的

设置全局样式 

界面上所有的样式都集中到一起来组织

在main.cpp中

int main(int argc, char *argv[])

{

    QApplication a(argc, argv);

    a.setStyleSheet("QPushButton {color:blue;}");

    Widget w;

    w.show();

    return a.exec();

}

问题

如果设置了全局样式,然后在某个控件里又设置了 其他样式,会怎么样?

如果全局样式与局部样式不冲突的话,两者的样式效果会叠加起来 ,也就是层叠性

如果设置了全局样式,在某个控件里设置的样式和全局样式冲突了,会怎么样?

如果全局样式与局部样式冲突的话,局部样式的优先级是更高的,覆盖了对应的全局样式。

分离样式代码 

方案1

  1. 创建qrc文件,通过qrc管理样式文件
  2. 创建单独的qss文件,把这样的文件放到qrc中
  3. 编写c++代码,读取qss文件中的内容,并设置样式

代码如下:

#include "widget.h"#include <QApplication>
#include <QFile>QString loadQSS()
{QFile file(":/style.qss");file.open(QFile::ReadOnly);QString style = file.readAll();file.close();return style;
}
int main(int argc, char *argv[])
{QApplication a(argc, argv);a.setStyleSheet(loadQSS());Widget w;w.show();return a.exec();
}

方案2

在Qt Designer 中集成了这样的功能,允许我们把样式直接写到.ui文件中。

通过点击如下所示的“改变样式表”,在这里设置样式还能实时预览效果。

 综上所述,由于设置样式的方式太灵活了,有很多地方都能设置,就导致当某个控件样式不符合预期的时候,排查起来就比较麻烦。在实际开发中,建议统一使用某一种方式来设置样式。

选择器

概况

qss的选择器支持以下几种:

选择器示例说明
全局选择器
*
选择所有的 widget.
类型选择器 (type
selector)
QPushButton
选择所有的 QPushButton 和 其子类 的控件.
类选择器 (class selector)
.QPushButton
选择所有的 QPushButton 的控件. 不会选择子类.
ID 选择器
#pushButton_2
选择 objectName pushButton_2 的控 件.
后代选择器
QDialog QPushButton
选择 QDialog 的所有后代(⼦控件, 孙⼦控件等等) 中的 QPushButton.
⼦选择器
QDialog > QPushButton
选择 QDialog 的所有⼦控件中的QPushButton
并集选择器
QPushButton, QLineEdit,
QComboBox
选择 QPushButton, QLineEdit, QComboBox 这三种控件. (即接下来的样式会针对这三种控件都⽣效)
属性选择器
QPushButton[flat="false"
选择所有 QPushButton 中, flat 属性为 false 的控件.
  • 这里要区分类型选择器和类选择器,一个会包含其子类,一个不包含。
  • id选择器中的id为控件的ObjectName

  • 当 类型选择器和id选择器选中同一控件,并且设置的样式是冲突的,此时id选择器的优先级更高。

子控件选择器

        有些控件内部包含了多个 "子控件" . ⽐如 QComboBox 的下拉后的⾯板, 比如 QSpinBox 的上下按钮等。

可以通过子控件选择器 :: , 针对上述子控件进⾏样式设置.

首先我们可以通过qt帮助文档,来查看有哪些子控件,和他们属于哪个控件

示例:修改下拉框的下拉按钮样式

#include "widget.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);QString style = "QComboBox::down-arrow{image:url(:/down_row.png);}";a.setStyleSheet(style);Widget w;w.show();return a.exec();
}

效果如下:

伪类选择器 

伪类选择器,选中的是控件的“状态”,“符合一定状态条件”的控件。

也就是说

  • 当状态具备时,控件被选中,样式生效
  • 当状态不具备时,控件不被选中,样式失效

使用  :的方式定义伪类选择器

常用的伪类选择器

伪类选择器说明
:hover
⿏标放到控件上
:pressed
⿏标左键按下时
:focus
获取输⼊焦点时
:enabled
元素处于可⽤状态时
:checked
被勾选时
:read-only
元素为只读状态时
        这些状态可以使用 ! 来取反. 比如 :!hover 就是⿏标离开控件时, :!pressed 就是⿏标松开时,
等等。
        更多的伪类选择器,可以查看qt助手

示例:鼠标悬停字体变红,点击变蓝

    QString style = "QPushButton:hover{color:red;}";style+="QPushButton:pressed{color:blue;}";a.setStyleSheet(style);

盒子模型

box model

⼀个遵守盒模型的控件, 由上述⼏个部分构成.

  • Content 矩形区域: 存放控件内容. ⽐如包含的⽂本/图标等.
  • Border 矩形区域: 控件的边框.
  • Padding 矩形区域: 内边距. 边框和内容之间的距离.
  • Margin 矩形区域: 外边距. 边框到控件 geometry 返回的矩形边界的距离

默认情况下, 外边距, 内边距, 边框宽度都是 0,这与css中的盒模型基本类似

属性说明
margin
设置四个方向的外边距. 复合属性.
padding
设置四个方向的内边距. 复合属性.
border-style
设置边框样式
border-width
边框的粗细
border-color
边框的颜⾊
border
复合属性, 相当于 border-style + border-width + border-color

修改控件样式示例

按钮

        这里区分color和background-color属性,color设置的是字体的属性,background-color设置的是背景颜色。

QPushButton{font-size:20px;boder:2px solid rgb(171, 165, 255);boder-radius:15px;background-color:rgb(237, 213, 255);color:white;
}
QPushButton:pressed{background-color:rgb(156, 110, 255);
}

属性小结

属性说明
font-size
设置文字大小
border-radius
设置圆⻆矩形
数值设置的越大, 角就 "越圆"
background-color
设置背景颜色

复选框

这里设置复选框未选中、未选中鼠标悬停、勾选时的图标

QCheckBox{font-size:20px;
}
QCheckBox::indicator{width:20px;height:20px;
}
QCheckBox::indicator:unchecked{image:url(:/checkbox_uncheck.png);
}
QCheckBox::indicator:unchecked:hover{image:url(:/checkbox.png);
}
QCheckBox::indicator:checked{image:url(:/checkbox_check.png)
}

属性小结

要点说明
::indicator
⼦控件选择器.
选中 checkbox 中的对钩部分.
:hover

伪类选择器.

中⿏标移动上去的状态.

:pressed
伪类选择器.
选中⿏标按下的状态.
:checked
伪类选择器.
选中 checkbox 被选中的状态.
:unchecked
伪类选择器.
选中 checkbox 未被选中的状态.
width
设置⼦控件宽度.
对于普通控件⽆效 (普通控件使⽤ geometry 方式设定尺⼨).
height
设置⼦控件⾼度.
对于普通控件⽆效 (普通控件使⽤ geometry 方式设定尺⼨)
image
设置⼦控件的图⽚.
像 QSpinBox, QComboBox 等可以使⽤这个属性来设置⼦控件的图⽚

单选框的设置与复选框类似,两者涉及属性基本上一样,这里就不再介绍。

输入框

QLineEdit{border-width:1px;border-radius:10px;border-color:rgb(148, 255, 252);border-style:inset;padding:0 8px;color:rgb(255, 255, 255);background:rgb(100, 100, 100);selection-background-color:rgb(255, 255, 0);selection-color:rgb(121, 121, 121);	
}

属性小结 

属性说明
border-width
设置边框宽度
border-radius
设置边框圆⻆
border-color
设置边框颜⾊
border-style
设置边框⻛格
padding
设置内边距
color
设置⽂字颜⾊
background
设置背景颜⾊
selection-background-color
设置选中⽂字的背景颜⾊
selection-color
设置选中⽂字的⽂本颜⾊

列表框

属性小结

属性说明
::item
选中 QListView 中的具体条⽬
:hover
选中⿏标悬停的条⽬
:selected
选中某个被选中的条⽬
background
设置背景颜⾊
border
设置边框
qlineargradient
设置渐变⾊

渐变色

qlineargradient 设置渐变色(线性渐变)

此处要填写六个参数:

  • x1:起点的横坐标
  • y1:起点的纵坐标
  • x2:终点的横坐标
  • y2:终点的纵坐标

这里的取值非常有限,要么是0,要么是1

  • 起点为(0,0)终点是(1,0)就是横向的渐变、
  • 起点为(0,0)终点是(0,1)就是竖向的渐变、
  • 起点为(0,0)终点是(1,1)就是对角线的渐变

如下图所示:

另外两个参数就是

  • stop:0 起始颜色
  • stop:1 结束颜色 
示例:
QListWidget::item:hover{background:qlineargradient(x1:0,y1:0,x2:0,y2:1,stop:0 #FAFBFE,stop:1 #DCDEF1);
}
QListWidget::item:selected{boder:1px solid #6a6ea9;background:qlineargradient(x1:0,y1:0,x2:0,y2:1);
}

效果如下:

菜单栏

设置菜单栏的背景色和各个菜单之间的间距

QMenuBar{background-color:qlineargradient(x1:0,y1:0,x2:0,y2:1,stop:0 lightgray,stop:1 darkgray );spacing:3px;
}

设置菜单的背景颜色和内边距

QMenuBar::item{padding:1px 4px;background:transparent;border-radius:4px;
}

 设置选中菜单/点击菜单时背景颜色修改

QMenuBar::item:selected{background:#a8a8a8;
}
QMenuBar::item:pressed{background:#888888;
}

设置菜单项之间的分割线样式

QMenu::separator{height:2px;background:lightblue;margin-left:10px;margin-right:5px;
}

完整代码:

QMenuBar{background-color:qlineargradient(x1:0,y1:0,x2:0,y2:1,stop:0 lightgray,stop:1 darkgray );spacing:3px;
}
QMenuBar::item{padding:1px 4px;background:transparent;border-radius:4px;
}
QMenuBar::item:selected{background:#a8a8a8;
}
QMenuBar::item:pressed{background:#888888;
}QMenu{background-color:white;	margin:0 2px
}
QMenu::item{padding:2px 25px 2px 20px;border:3px solid transparent;
}
QMenu::item:selected{border-color:darkblue;background:rgba(100, 100, 100, 150)
}QMenu::separator{height:2px;background:lightblue;margin-left:10px;margin-right:5px;
}

效果如下

属性小结 

属性说明
QMenuBar::item
选中菜单栏中的元素.
QMenuBar::item:selected
选中菜单来中的被选中的元素.
QMenuBar::item:pressed
选中菜单栏中的⿏标点击的元素
QMenu::item
选中菜单中的元素
QMenu::item:selected
选中菜单中的被选中的元素
QMenu::separator
选中菜单中的分割线.

登录界面设计

最终效果

设置背景

在qt中直接给QWidget顶层窗口设置背景图会失效,因此我们可以给上述控件外头套上一个和窗口一样大小的QFrame控件,用来设置背景图。

qt中设置背景图除了background-image之外,还有border-image属性,两者的区别:

  • background-image:设计的背景图片固定大小
  • border-image:设置的背景图片跟随控件的大小变化
QFrame{border-image:url(:/background.jpg)
}

使用QVBoxLayout来管理两个输入框和勾选框、按钮;再将这个QVBoxLayout放到一个QFrame中

设置输入框样式 

QLineEdit{color:#8d98a1;background-color:#405361;padding:0 5px;font-size:20px;border-style:none;border-radius:10px;
}

设置按钮样式

QPushButton{font-size:20px;color:white;background-color:#555;border-style:outset;border-radius:10px;
}
QPushButton:pressed{color:black;background-color:#ce1db;border-style:inset;
}

完整代码

QFrame{border-image:url(:/background.jpg)
}QLineEdit{color:#8d98a1;background-color:#405361;padding:0 5px;font-size:20px;border-style:none;border-radius:10px;
}QCheckBox{color:white;background-color:transparent;
}
QPushButton{font-size:20px;color:white;background-color:#555;border-style:outset;border-radius:10px;
}
QPushButton:pressed{color:black;background-color:#ce1db;border-style:inset;
}

相关文章:

【QT】qss

目录 基本语法 设置全局样式 问题 分离样式代码 方案1 方案2 选择器 概况 子控件选择器 伪类选择器 盒子模型 修改控件样式示例 按钮 属性小结 复选框 属性小结 输入框 属性小结 列表框 属性小结 渐变色 示例&#xff1a; 菜单栏 设置菜单栏的背景…...

Java处理大数据的技巧

大数据处理是现代计算机科学中的一个重要领域&#xff0c;通过高效的算法和工具&#xff0c;我们可以从大量数据中提取有价值的信息。本文将介绍一些处理大数据的技巧和策略&#xff0c;并讨论如何通过Java与MySQL实现高效的大数据处理。 一、什么是大数据处理&#xff1f; 大…...

JavaScript基础——JavaScript常见语句(判断语句、循环语句、控制流语句)

JavaScript提供了丰富的语句来控制程序的执行流程&#xff0c;包括用于条件判断的if、switch和三元运算符&#xff0c;以及用于循环的for、while、do...while、for...in和for...of。此外&#xff0c;还有控制流语句如break、continue和return。 判断语句 if 语句 if 语句&…...

材质球向shader传值失败

unity中导入spine模型&#xff0c;当模型挂载SkeletonMecanim组件后&#xff0c;发现材质球向shader传值失败&#xff0c;改为SetPropertyBlock后可行。 //spine模型使用材质球传参数&#xff0c;当spine模型上挂载有SkeletonMecanim的情况下&#xff0c;会传值失败!!!!// for…...

【TDH社区版大事件】图分析、全文检索、小文件治理、数据开发工具通通都有!

星环科技大数据基础平台TDH社区版&#xff0c;在保留了商业版核心技术优势的基础上最大程度地降低了用户使用大数据技术的门槛与成本&#xff0c;具有更轻量、更简单、更易用等特性。 此次TDH社区开发版、社区版、社区订阅版均发布了新版本&#xff0c;带来新的产品组件和新的…...

【反序列化漏洞】serial靶机详解

一、安装靶机 首先创建新的虚拟机。 然后选择客户机版本为Ubuntu 64位。 然后选择使用现有磁盘&#xff0c;选择下载的vmdk磁盘文件即可。剩下的都是默认 二、信息收集 发现主机192.168.204.143 访问 扫描端口nmap -A 192.168.204.143 -p-&#xff0c;发现只有ssh:22和http:8…...

C#列表按照日期进行从大到小排序

C#列表按照日期进行从大到小排序...

rt-thread每个线程状态切换方法

线程状态 RT-Thread 中线程的状态定义在 rt_thread.h 头文件中&#xff0c;通常包括以下几种状态&#xff1a; RT_THREAD_INIT&#xff1a;线程初始化状态。RT_THREAD_READY&#xff1a;线程就绪状态。RT_THREAD_SUSPEND&#xff1a;线程挂起状态。RT_THREAD_RUNNING&#xf…...

visual studio跳转到上一个/下一个光标处的快捷键设置

vscode能通过Alt左右箭头跳转到上/下一个光标处&#xff0c;这对于“点进函数看源码&#xff0c;看完后跳转到原来位置”是非常方便的。 在Visual Studio中&#xff0c;有2种方法实现这样的功能。 第一种&#xff0c;直接点击这两个按钮&#xff1a;&#xff08;缺点是每次要用…...

网络基础命令配置复习 (基础华为设备)

目录 一.前言 二.Telnet远程登陆 2.1telnet介绍 2.2telnet的配置 三.交换机基础配置 四.致谢 一.前言 网络基础不仅是IT从业者的必备知识&#xff0c;也是日常生活中使用网络的人们应该了解的内容。通过学习和掌握这些基础知识&#xff0c;你将能更好地理解和利用现…...

在AspNetCoreRateLimit中,ClientRateLimiting 和 IpRateLimiting 都有的时候按谁的来

在AspNetCoreRateLimit中&#xff0c;当同时配置了ClientRateLimiting&#xff08;基于客户端ID的速率限制&#xff09;和IpRateLimiting&#xff08;基于IP地址的速率限制&#xff09;时&#xff0c;它们的应用方式主要取决于请求的特性和配置的设置。以下是对这两种速率限制方…...

PEP 8 – Python 代码风格指南中文版(五)

强制性&#xff1a;命名约定 应避免的命名 永远不要使用字符‘l’&#xff08;小写字母el&#xff09;、‘O’&#xff08;大写字母oh&#xff09;或‘I’&#xff08;大写字母eye&#xff09;作为单字符变量名。在某些字体中&#xff0c;这些字符与数字1和0难以区分。当想使…...

Spring中是如何实现IoC和DI的?

前言&#xff1a;在前一篇文章中对于IoC的核心思想进行了讲解&#xff0c;而本篇文章则从Spring的角度入手&#xff0c;体会Spring对于IoC是如何实现的。 如果对IoC还有不太了解的可以阅读上一篇文章&#xff0c;相信一定会带来全新的收获&#xff1a;什么是IoC&#xff08;控制…...

Excel第33享:借助易用宝将多个表格合并到一个表格

1、需求描述 现有3个销售数据的Excel表格&#xff0c;希望将其整合到一个表格里&#xff0c;如下图所示。 2、具体操作 &#xff08;1&#xff09;下载一个插件“易用宝”。 下载地址&#xff1a;最新版下载 | Excel易用宝 如果本地址失效&#xff0c;可以直接百度搜索“易…...

opencascade AIS_TrihedronOwner源码学习对象的实体所有者用于选择管理

opencascade AIS_TrihedronOwner 前言 AIS_Trihedron对象的实体所有者用于选择管理。 在OpenCascade的AIS&#xff08;交互对象框架&#xff09;中&#xff0c;管理类似AIS_Trihedron的对象的选择涉及理解如何处理实体&#xff08;或所有者&#xff09;以进行选择。 方法 1…...

面试经典算法150题系列-跳跃游戏||

跳跃游戏|| 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j < nums[i] i j < n 返回到达 num…...

uniapp h5支付(支付宝和微信支付)

支付宝和微信支付 支付宝 创建一个页面&#xff0c;复制下面即可 <template><view><div class"body" v-html"formUrl"></div></view> </template><script>export default {data() {return {formUrl: // 用于…...

Radamsa:一款高性能通用模糊测试工具

关于Radamsa Radamsa是一款高性能的通用模糊测试工具&#xff0c;广大研究人员可以将其当作一个应用程序稳定性测试的测试用例生成工具。 工具运行机制 该工具使用简单&#xff0c;支持自定义脚本开发&#xff0c;可以用于测试程序对格式错误和潜在恶意输入的承受能力。它的工…...

css中使用data中的变量

一、定义变量 data() {return {myColor:"#2a9efb",}; },二、在templete中激活 说明&#xff1a;这里其实类似于设置 document.documentElement.style.setProperty(--myColor, myColor),而我们现在只是给div设置了变量属性&#xff0c;并且是在当前页面设置的&#x…...

Java 设计模式之策略模式 (Strategy Pattern) 详解

Java 设计模式之策略模式 (Strategy Pattern) 详解 策略模式&#xff08;Strategy Pattern&#xff09;是一种行为型设计模式&#xff0c;旨在定义一系列算法&#xff0c;将每个算法封装起来&#xff0c;并使它们可以互相替换&#xff0c;从而使得算法的变化不会影响使用算法的…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

阿里云Ubuntu 22.04 64位搭建Flask流程(亲测)

cd /home 进入home盘 安装虚拟环境&#xff1a; 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境&#xff1a; virtualenv myenv 3、激活虚拟环境&#xff08;激活环境可以在当前环境下安装包&#xff09; source myenv/bin/activate 此时&#xff0c;终端…...

大数据治理的常见方式

大数据治理的常见方式 大数据治理是确保数据质量、安全性和可用性的系统性方法&#xff0c;以下是几种常见的治理方式&#xff1a; 1. 数据质量管理 核心方法&#xff1a; 数据校验&#xff1a;建立数据校验规则&#xff08;格式、范围、一致性等&#xff09;数据清洗&…...

boost::filesystem::path文件路径使用详解和示例

boost::filesystem::path 是 Boost 库中用于跨平台操作文件路径的类&#xff0c;封装了路径的拼接、分割、提取、判断等常用功能。下面是对它的使用详解&#xff0c;包括常用接口与完整示例。 1. 引入头文件与命名空间 #include <boost/filesystem.hpp> namespace fs b…...