Qt_QSS介绍与使用

news2024/12/24 8:23:09

目录

1、QSS的语法介绍

2、QSS的基本使用

3、QSS的全局设置

4、样式的叠加特性 

5、样式的优先级

6、使用Qt Designer设置样式 

7、选择器种类介绍 

7.1 类选择器

7.2 ID选择器 

7.3 并集选择器

8、子控件选择器 

9、伪类选择器 

10、盒子模型

10.1 设置边框和内边距

结语 

前言：

        Qt中的QSS（Qt Style Sheets）作用是美化界面，他可以对控件的样式进行设计，比如控件的颜色、字体、位置、边框等属性。QSS是依照CSS而来的，而CSS是网页前端开发中最重要的一个工具，不过QSS只支持部分CSS属性，因此QSS会比CSS更简单⼀些。值得注意的是：当通过QSS设置样式和通过C++代码设置样式冲突时，QSS的优先级会更高。

1、QSS的语法介绍

        QSS的基本语法非常简单，由选择器，属性名，属性值构成，如下：

选择器 {
 属性名: 属性值; 
}

         其中，选择器表示要设置样式的控件，属性名表示具体设计哪些样式，属性值表示设置样式的方式。举个例子，比如：

QPushButton {
 color: red;
}

        上述代码表示，将当前界面下的所有QPushButton（选择器）的文本颜色（属性名）变为红色（属性值）。

2、QSS的基本使用

        在ui文件中创建一个QPushButton，让该控件调用setStyleSheet函数，并将QSS作为该函数的参数。设计如下图：

        在widget.cpp中进行样式设计，代码如下：

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    ui->pushButton1->setStyleSheet("QPushButton{color:red;}");
}

Widget::~Widget()
{
    delete ui;
}

        运行结果：

        解释：上述代码表示对按钮1这个控件内所有名为QPushButton的控件的文本颜色设为红色，注意这里调用setStyleSheet函数的控件是按钮1而不是widget，因此不会更改按钮2的样式，如果调用者是widget，则会更改按钮1以及按钮2的样式。

3、QSS的全局设置

        通过QApplication的对象调用setStyleSheet，从而设置整个程序的全局样式，全局样式优点: 1、使同⼀个样式针对多个控件生效, 代码更简洁，2、所有控件样式内聚在⼀起, 便于维护和问题排查。界面设计如下：

        代码如下（注意是在main.cpp文件中）： 

#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    a.setStyleSheet("QPushButton{color:blue;}");//全局设置
    Widget w;
    w.show();
    return a.exec();
}

        运行结果：

4、样式的叠加特性 

        通过QSS设置的样式是可以叠加的，比如在全局设置的样式可以和局部设置的样式叠加，并且调用setStyleSheet时可以叠加设置多个样式，依照上述例子的界面，测试如下。

        局部设置样式的代码：

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //设置字体尺寸
    ui->pushButton1->setStyleSheet("QPushButton{font-size:80px};");
}

Widget::~Widget()
{
    delete ui;
}

        全局设置样式的代码：

#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    a.setStyleSheet("QPushButton{color:blue;background:red}");//设置多项属性
    Widget w;
    w.show();
    return a.exec();
}

        运行结果：

        从结果可以发现设置的样式可以进行叠加。 

5、样式的优先级

        对一个控件的同一个属性先进行局部设置样式，再进行全局设置样式，则该控件的属性最终为局部设置的样式，即局部优先于全局，测试代码如下。

        widget.cpp代码：

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->pushButton->setStyleSheet("QPushButton{color:red;}");
}

Widget::~Widget()
{
    delete ui;
}

        main.cpp代码：

#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    Widget w;

    w.show();
    a.setStyleSheet("QPushButton{color:blue;}");
    return a.exec();
}

        运行结果：

        可以看到，即使全局设置的代码在局部设置之后，最终的样式依然是局部代码设置的样式。所以通常使用全局设置“奠定基调”，然后使用局部设置进行“微调”。 

6、使用Qt Designer设置样式 

        上述设置样式都是用代码的形式进行设置的，除了代码的形式，还可以在ui文件中（即Qt Designer）设置样式，步骤如下。

        1、先进入ui文件，右键点击控件，点击改变样式表：

        2、在输入框中直接输入QSS，点击OK即可完成样式的设置，如下图：

7、选择器种类介绍 

         QSS中的选择器表示要设置的控件，但是他可以有多种种类，常用的种类介绍如下（以QPushButton为例）：

选择器种类示例说明
全局选择器
*
选择当前控件下的所有控件
类型选择器
QPushButton
选择当前控件下QPushButton控件，以及其子类
类选择器
.QPushButton选择当前控件下QPushButton控件，不会选择其子类
ID 选择器
#pushButton_1
指定选择名 为 pushButton_2 的控件
并集选择器
xx，yy，zz选择xx，yy，zz三种控件
属性选择器
QPushButton[flat="false"]
选择所有PushButton中，flat属性为false的控件

        上文例子中的选择器都是类型选择器，下面测试一些其他的常用选择器种类。

7.1 类选择器

         先自定义一个继承QPushButton的类，然后将该类实例化到界面上，观察在全局中使用类型选择器和类选择器对该控件属性的影响。

        自定义类的mypushbutton.h文件代码如下：

#ifndef MYPUSHBUTTON_H
#define MYPUSHBUTTON_H

#include <QWidget>
#include <QPushButton>

class mypushbutton : public QPushButton
{
    Q_OBJECT
public:
    mypushbutton(QWidget *parent = nullptr);
};

#endif // MYPUSHBUTTON_H

         widget.cpp代码如下：

#include "widget.h"
#include "ui_widget.h"
#include "mypushbutton.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    
    //创建自定义按钮
    mypushbutton* myQpush = new mypushbutton(this);
    myQpush->setText("自定义按钮");
    myQpush->move(100,200);
    
    //创建Qt系统按钮
    QPushButton* Qpush = new QPushButton("Qt按钮",this);
    Qpush->move(200,200);
}

Widget::~Widget()
{
    delete ui;
}

        先运行上述代码，观看结果：

        此时可以看到界面中已有两个按钮，但是一个按钮是用我们自定义的类（mypushbutton）生成的，另一个按钮是用系统提供的QPushButton类生成的。

        使用全局设置，选择器的种类选择类选择器，main.cpp代码如下：

#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    a.setStyleSheet(".QPushButton{color:blue;}");//类选择器
    Widget w;
    w.show();
    return a.exec();
}

        运行结果：

        发现系统原始按钮的样式发生了改变，但是我们自定义的类样式却没有改变，原因就是类选择器不会选择QPushButton的子类，而我们自定义的类刚好是QPushButton的子类，所以我们自定义的按钮样式不会受到改变。如果采用的是类型选择器，则运行结果如下：

7.2 ID选择器 

         ID选择器就是指定控件ID对其精准的进行样式修改，界面设计如下：

        全局设置的代码如下： 

#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    a.setStyleSheet("#pushButton{color:red;} "
                    "#pushButton_2{color:blue;} #pushButton_3{color:green;}");
    Widget w;
    w.show();
    return a.exec();
}

        运行结果：

7.3 并集选择器

        创建一个QLabel、QPushButton、QLineEdit。采用并集选择器对这些控件进行样式修改，界面设计如下：

        代码如下：

#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    a.setStyleSheet("QLabel,QPushButton,QLineEdit{color:red;}");
    Widget w;
    w.show();
    return a.exec();
}

         运行结果：

        从结果可以看到，使用并集选择器可以用简易的代码给多个控件设置样式，是一种很好的代码复用行为。

8、子控件选择器 

        有些控件本身自带子控件，比如QComboBox的下拉按钮，以及QSpinBox的上下按钮等。即使是子控件，仍然可以使用QSS对其修改样式，使用子控件选择器”::“即可，比如：QComboBox::down-arrow表示选中了QComboBox的下拉按钮。测试步骤如下。

        1、先建立一个Qt虚拟目录（qrc），将图片资源放入到该目录下（关于虚拟目录-qrc见：Qt_控件的QWidget属性介绍-第五点），如下图：

        2、在main.cpp中使用全局设置更改该子控件的图标，代码如下：

#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    a.setStyleSheet("QComboBox::down-arrow{image:url(:/down.png);}");
    Widget w;
    w.show();
    return a.exec();
}

        运行结果：

9、伪类选择器 

        伪类选择器表示控件处于某一状态，比如控件被按下，控件获取到焦点，⿏标移动到某个控件上等，可以使用伪类选择器捕获到这一时刻，然后实现各种效果。与子控件选择器的写法有些相似，伪类选择器用“:”表示，常用的伪类选择器介绍如下：

:hover
⿏标放到控件上
:pressed
⿏标左键按下时
:focus
获取输⼊焦点时
:enabled
元素处于可⽤状态时
:checked
被勾选时
:read-only
元素为只读状态时

        测试代码如下：

#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    a.setStyleSheet("QPushButton{color:red;}"
                    "QPushButton:hover{color:blue;}"
                    "QPushButton:pressed{color:green;}");
    Widget w;
    w.show();
    return a.exec();
}

        运行结果：

        另外，上述在伪类选择器可以用“!”来表示取反，比如：!hover表示鼠标离开控件时，:!pressed 表示⿏标松开时。

10、盒子模型

        盒子模型是一个控件的基础框架，表示一个框架由四个部分构成：

1、内容：指的是控件的文本或者图标。

2、内边距：指的是内容与边框之间的距离。

3、边框：指的是控件周围的边框。

4、外边距：指的是控件与其他控件的距离。

        盒子模型示意图如下：

        QSS中与边框和边距相关的常用属性名如下：

margin
设置四个方向的外边距
padding
设置四个方向的内边距
border-style
设置边框样式
border-width
边框的粗细
border-color
边框的颜⾊
border
边框属性的复合用法：border-width+border-style+border-color
border-radius边框四个角的圆滑度，数值设置的越⼤，⻆就 "越圆"

10.1 设置边框和内边距

        测试给一个QLabel设置边框和内边距，首先在界面上创建一个QLabel，如下图：

        代码如下： 

#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    //设置边框宽5px，边框样式固体，边框颜色蓝色。内左边距50px,边角圆滑50px
    a.setStyleSheet("QLabel{border:5px solid blue;padding-left:50px;"
                    "border-radius:30px;}");
    Widget w;
    w.show();
    return a.exec();
}

        运行结果：

结语 

        以上就是关于Qt中QSS的使用与介绍，QSS所能设置的样式形式非常多，其中控件的属性名远不止上文介绍的那些，控件与控件之间即存在相同的属性名也存在独特的属性名，当然这些属性名不需要都背下来，重要的是掌握QSS的使用，当使用到这些属性名时再去查阅手册。

        最后如果本文有遗漏或者有误的地方欢迎大家在评论区补充，谢谢大家！！ 

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

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

相关文章

开源链动2+1模式、AI智能名片与S2B2C商城小程序在精准选品与定位决策中的应用

开源链动2+1模式、AI智能名片与S2B2C商城小程序在精准选品与定位决策中的应用

摘要&#xff1a;在当今竞争激烈的商业环境中&#xff0c;精准把握顾客偏好&#xff0c;实现有效选品与定位决策&#xff0c;已成为企业持续发展的关键。本文旨在探讨如何通过引入开源链动21模式、AI智能名片及S2B2C商城小程序等创新工具&#xff0c;来深度观测销售报表中的销量…
阅读更多...
你还在为教学资料转换烦恼吗？4款神器安利给你，PDF转JPG一键搞定

你还在为教学资料转换烦恼吗？4款神器安利给你，PDF转JPG一键搞定

工作或者学习的时候&#xff0c;我们经常得把PDF文件转换成JPG图片。可能是因为在手机上看起来方便&#xff0c;或者是想放到PPT里展示&#xff0c;反正把PDF转JPG的情况挺多的。那有什么好用的软件能做这个转换呢&#xff1f;今天我就给你们介绍几个好用的。 1. 福昕PDF高质量…
阅读更多...
目标检测与图像分类：有什么区别？各自的使用场景是什么？

目标检测与图像分类：有什么区别？各自的使用场景是什么？

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…
阅读更多...
思维+数论，CF 922C - Cave Painting

思维+数论，CF 922C - Cave Painting

目录 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 二、解题报告 1、思路分析 2、复杂度 3、代码详解 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 922C - Cave Painting 二、解题报告 1、思路分析 诈骗题 我们发现 n mo…
阅读更多...
配置MySQL8.0允许远程连接

配置MySQL8.0允许远程连接

一&#xff1a;打开MySQL 指令控制台 二.设置Mysql远程登陆 输入密码&#xff1a;123456 第一步&#xff1a;登进MySQL 输入指令&#xff1a;use mysql 第二步&#xff1a;更新域属性&#xff0c;%表示允许任意IP地址访问&#xff1a; 输入指令&#xff1a;update user set…
阅读更多...
微信小程序开发-调试及配置文件介绍

微信小程序开发-调试及配置文件介绍

一&#xff0c;隐藏控制台系统日志 在小程序开发中&#xff0c;如果你想要隐藏控制台中的系统日志&#xff0c;可以通过以下步骤进行操作&#xff1a; 打开小程序的开发工具。在开发工具的控制台(Console)中&#xff0c;找到你想要隐藏的系统日志。右键点击该系统日志条目。在…
阅读更多...
who命令：显示当前登录用户名

who命令：显示当前登录用户名

一、命令简介 ​who​ 命令是一个常用的 Linux 命令&#xff0c;用于显示当前登录到系统上的用户信息。 例如 who它会列出当前登录用户的&#xff1a; 用户名终端登录时间远程主机&#xff08;如果是远程登录的话&#xff09; user1 tty1 Oct 7 08:30 soulio …
阅读更多...
深度学习：基于MindSpore实现ResNet50中药分拣

深度学习：基于MindSpore实现ResNet50中药分拣

ResNet基本介绍 ResNet&#xff08;Residual Network&#xff09;是一种深度神经网络架构&#xff0c;由微软研究院的Kaiming He等人在2015年提出&#xff0c;并且在ILSVRC 2015竞赛中取得了很好的成绩。ResNet主要解决了随着网络深度增加而出现的退化问题&#xff0c;即当网络…
阅读更多...
域名劫持怎么处理?如何判断dns是否被劫持

域名劫持怎么处理?如何判断dns是否被劫持

随着网络环境的日益复杂&#xff0c;网站安全问题也日益凸显。域名劫持怎么处理&#xff1f;域名劫持是网站运营中不容忽视的安全威胁&#xff0c;在遇到域名劫持的时候应该学会应急响应、加强安全防护措施以及持续的安全维护&#xff0c;我们可以有效降低其带来的风险。 域名劫…
阅读更多...
AOP 能够取代依赖注入吗？

AOP 能够取代依赖注入吗？

AOP&#xff08;面向方面编程&#xff09;和依赖注入&#xff08;DI&#xff09;都是面向对象编程中非常重要的设计概念&#xff0c;它们在软件开发中扮演着不同的角色&#xff0c;但常常被用于解决相似的问题&#xff0c;如解耦、提高代码的可维护性和灵活性等。那么&#xff…
阅读更多...
双碳平台-企业EMS -能源管理系统-能源在线监测平台

双碳平台-企业EMS -能源管理系统-能源在线监测平台

一、介绍 基于SpringCloud的能管管理系统-能源管理平台源码-能源在线监测平台-双碳平台源码-SpringCloud全家桶-能管管理系统源码 二、软件架构 二、功能介绍 三、数字大屏展示 四、数据采集原理 五、软件截图
阅读更多...
面试问我LLM中的RAG，秒过!!!

面试问我LLM中的RAG，秒过!!!

本篇文章涉及了 RAG 流程中的数据拆分、向量化、查询重写、查询路由等等&#xff0c;在做 RAG 的小伙伴一定知道这些技巧的重要性。推荐仔细阅读&#xff0c;建议收藏&#xff0c;多读几遍&#xff0c;好好实践。 本文是对检索增强生成&#xff08;Retrieval Augmented Genera…
阅读更多...
matlab碳交易机制下考虑需求响应的综合能源系统优化运行

matlab碳交易机制下考虑需求响应的综合能源系统优化运行

目录 1 主要内容 架构模型&#xff1a; 需求响应模型&#xff1a; 目标函数&#xff1a; 对比算例设计&#xff1a; 2 部分程序 3 程序结果 4 下载链接 1 主要内容 该程序复现文献《碳交易机制下考虑需求响应的综合能源系统优化运行》&#xff0c;解决碳交易机制下考虑…
阅读更多...
大数据新视界 --大数据大厂之 Alluxio 数据缓存系统在大数据中的应用与配置

大数据新视界 --大数据大厂之 Alluxio 数据缓存系统在大数据中的应用与配置

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…
阅读更多...
时间序列顶会一网打尽！时间序列基础模型的最新进展！

时间序列顶会一网打尽！时间序列基础模型的最新进展！

前言 最近时间序列基础模型领域&#xff0c;迎来了里程碑式的突破。 TimeGPT作为首个原生基础模型&#xff0c;于去年八月问世&#xff0c;一发布就震撼了预测领域。 众多其他基础模型也相继发布&#xff0c;包括但不限于&#xff1a; TimesFM MOIRAI Tiny Time Mixers&am…
阅读更多...
Vue83 引入elementUI

Vue83 引入elementUI

笔记 安装插件 安装按需引入插件 代码 ### App.vue <template><div><button>原生的按钮</button><input type"text"><atguigu-row><atguigu-button>默认按钮</atguigu-button><atguigu-button type"pr…
阅读更多...
Pikachu-Sql-Inject -基于boolian的盲注

Pikachu-Sql-Inject -基于boolian的盲注

基于boolean的盲注: 1、没有报错信息显示&#xff1b; 2、不管是正确的输入&#xff0c;还是错误的输入&#xff0c;都只显示两种情况&#xff0c;true or false&#xff1b; 3、在正确的输入下&#xff0c;输入and 1 1/and 1 2发现可以判断&#xff1b; 布尔盲注常用函数&…
阅读更多...
MySQL连接查询：外连接

MySQL连接查询：外连接

先看我的表结构 dept表 emp表 外连接分为 1.左外连接 2.右外连接 1.左外连接 基本语法 select 字段列表 FORM 表1 LEFT [OUTER] JOIN 表2 ON 条件;例子&#xff1a;查询emp表的所有数据&#xff0c;和对应部门的员工信息&#xff08;左外连接&#xff09; select e.*, d.n…
阅读更多...
全网最详细大语言模型(LLM)入门学习路线图

全网最详细大语言模型(LLM)入门学习路线图

Github项目上有一个大语言模型学习路线笔记&#xff0c;它全面涵盖了大语言模型的所需的基础知识学习&#xff0c;LLM前沿算法和架构&#xff0c;以及如何将大语言模型进行工程化实践。这份资料是初学者或有一定基础的开发/算法人员入门活深入大型语言模型学习的优秀参考。这份…
阅读更多...
假期顺便测试了一下高德POI的准确度及对景区地图的一些感想

假期顺便测试了一下高德POI的准确度及对景区地图的一些感想

所使用的测试工具: GIS 移动端工具 1.山西大同乌龙峡 2.山西大同昊天寺 3.山西大同火山地质公园 4.山西大同忘忧农场 总的来说高德精度还是不错的&#xff0c;测试的几个位置都比较准确&#xff01;但景区内部的目标不是很全&#xff0c;内部小的位置完全没有标记&#xff01…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023