QT第六课------QT界面优化------QSS

news2025/4/5 0:29:55

作者前言

🎂 ✨✨✨✨✨✨🍧🍧🍧🍧🍧🍧🍧🎂
​🎂 作者介绍: 🎂🎂
🎂 🎉🎉🎉🎉🎉🎉🎉 🎂
🎂作者id:老秦包你会, 🎂
简单介绍:🎂🎂🎂🎂🎂🎂🎂🎂🎂🎂🎂🎂🎂🎂🎂
喜欢学习C语言、C++和python等编程语言,是一位爱分享的博主,有兴趣的小可爱可以来互讨 🎂🎂🎂🎂🎂🎂🎂🎂
🎂个人主页::小小页面🎂
🎂gitee页面:秦大大🎂
🎂🎂🎂🎂🎂🎂🎂🎂
🎂 一个爱分享的小博主 欢迎小可爱们前来借鉴🎂


界面优化

  • **作者前言**
  • QSS
    • 全局样式
    • 全局样式和局部样式的示例
    • QSS的代码文件
      • 注意
    • 选择器
      • 全局选择器
      • 类型选择器
      • 类选择器
      • Id选择器
      • 并集选择器
      • 子控件选择器
      • 伪类选择器
  • box model
  • 按钮和复选框的样式属性
    • 按钮
    • 复选框
    • 单选框
    • 输入框
    • 列表
    • 菜单
    • QWidget的背景

QSS

Qt 仿照 CSS 的模式, 引⼊了 QSS, 来对 Qt 中的控件做出样式上的设定, 从⽽允许程序猿写出界⾯更好看的代码.当然, 由于 Qt 本⾝的设计理念和⽹⻚前端还是存在⼀定差异的, 因此 QSS 中只能⽀持部分 CSS 属性.
整体来说 QSS 要⽐ CSS 更简单⼀些

格式

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

选择器: 描述了 “哪个 widget 要应⽤样式规则”.
属性: 则是⼀个键值对, 属性名表⽰要设置哪种样式, 属性值表⽰了设置的样式的值
下面我们以按钮为例

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

}

效果:
在这里插入图片描述
第一个按钮只是在当前的按钮对象中设置了样式,而第二个按钮是在整个界面(指的是Widget创建的对象里面的QPushButton以及里面的子控件)设置的样式

全局样式

这个全局样式的设置并不是在widget这个类里面进行设置的,而是在主函数main里面创建的QApplication这个对象设置的
在这里插入图片描述
代码如下:

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    a.setStyleSheet("QPushButton{font-size:30px;}");
    Widget w;
    w.show();
    return a.exec();
}

效果:
在这里插入图片描述
可以看到样式改变了

全局样式和局部样式的示例

(1)当在全局样式设置后, 在某些控件中设置其他的样式会叠加

(2)当设置全局样式, 全局样式和局部样式冲突时,局部样式优先级高

QSS的代码文件

上面的使用setstyleShett这个函数来设置样式是可以的,只适合代码量小的QSS代码,如果有多行多页,这样设置就会很不方便,所以更趋向于把QSS代码另写他处,然后让C++读取里面的内容

方法1
1.创建一个qrc的资源文件
在这里插入图片描述

  1. 创建一个qss文件,然后存放到qrc资源文件里面取

在这里插入图片描述

  1. 写C++代码读取里面的内容
QString Widget::readFile(const QString path)
{
    QFile* file = new QFile(path);
    assert(file->open(QIODevice::ReadOnly));
    QString content = file->readAll();
    file->close();
    return content;
    
}
//*****widget.cpp***/
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
//    ui->pushButton->setStyleSheet("QPushButton{color: red}");
//    this->setStyleSheet("QPushButton{color:rgb(146, 189, 108)}");
    //读取文件内容
    QString content = readFile(":/new/prefix/myQSS.qss");
    qDebug()<< content;
    ui->pushButton->setStyleSheet(content);

}

方法2
这样的的写法虽然方便很多,但是有时候却是不提倡的,进而又出现了更加方便的方式, 就是在项目的ui文件中写入,如图
在这里插入图片描述
当我们进行修改的时候就会演示出来,这样就会很明亮很多了

注意

虽然添加的样式有很多中,但是一旦出现了样式不符合,就需要一步步的进行排查
1.全局样式
2.控件样式
3.继承了父类样式的子类
4.qss文件的样式
5.ui文件的样式

选择器

上面的代码中我们简单的知道了QSS的大致情况,但是对于选择器这个我们还需要进行学习
常见的选择器如下:
在这里插入图片描述
注意:子类并不是指的是写入到窗口里面的控件,而是指继承于某个类的类

全局选择器

关键点
影响范围:全局选择器会影响应用程序中的所有控件,因此应谨慎使用,以免意外覆盖特定控件的样式。
优先级:全局选择器的优先级较低,如果后续定义了更具体的选择器,它们会覆盖全局选择器的样式。

this->setStyleSheet("*{color:red;}");

效果:
在这里插入图片描述
可以看出全局选择器作用于全部控件.

类型选择器

this->setStyleSheet(" QWidget{color: rgb(146, 189, 108);}  QPushButton{color:red;}");

效果:
在这里插入图片描述
可以看清,类型选择器会连带子类都会进行样式化.

类选择器

this->setStyleSheet(".QWidget{color: rgb(146, 189, 108);}");

效果:

在这里插入图片描述
和类型选择器相比,类选择器只是针对当前类,不针对子类,以及孙子类

Id选择器

这个选择器的写法是#开头的写法,然后再写对象名称,因为每个对象的名字都是唯一的.

QPushButton* button_1 = new QPushButton("按钮",this);
 button_1->setObjectName("button_1"); // 设置对象名称
 this->setStyleSheet("QPushButton{color:rgb(146, 189, 108);}#button_1{color:red;}");

效果:
在这里插入图片描述

注意:如果直接设置ID选择器 #button_1 并不会生效,因为您并没有为 button_1 设置一个对象名称。要使 ID选择器生效,您需要为按钮设置一个对象名称。

这也就是为啥ui文件有个这个的函数
在这里插入图片描述

当某个控件⾝上, 通过类型选择器和 ID 选择器设置了冲突的样式时, ID 选择器样式优先级更
⾼.同理, 如果是其他的多种选择器作⽤同⼀个控件时出现冲突的样式, 也会涉及到优先级问题.
Qt ⽂档上有具体的优先级规则介绍 (参⻅ The Style Sheet Syntax 的 Conflict Resolution 章
节).这⾥的规则计算起来⾮常复杂(CSS 中也存在类似的设定), 咱们此处对于优先级不做进⼀步讨论.实践中我们可以简单的认为, 选择器描述的范围越精准, 则优先级越⾼. ⼀般来说, ID 选择器优先级是最⾼的.

并集选择器

his->setStyleSheet("QPushButton,QLabel{color:red;}");

效果:
在这里插入图片描述
这个并集选择器相当于是类型选择器、类选择器…等的集合体,也是为了方便我们可以多个选择器在希望有相同的样式的一种方法。

子控件选择器

有些控件内部包含了多个 “⼦控件” . ⽐如 QComboBox 的下拉后的⾯板, ⽐如 QSpinBox 的上下按钮等.
这个选择器和前面的不太一样,需要我们在Qt助手里面搜索Qt Style Sheets Reference,然后找到List of Sub-Controls,如图:
在这里插入图片描述
图上的就是对应的拥有子控件的控件,下面写一个QComboBox的子控件选择器

  this->setStyleSheet("QComboBox::drop-down{image:url(:/new/prefix/ice cream.png);}QComboBox::down-arrow{image:url(:/new/prefix/sushi.png);}");

效果:
在这里插入图片描述

伪类选择器

伪类选择器, 是根据控件所处的某个状态被选择的. 例如按钮被按下, 输⼊框获取到焦点, ⿏标移动到某个控件上等.前面的选择器基本就是针对的是控件,而这个伪类选择器针对的是控件的状态
一般表现为当状态具备时, 控件被选中, 样式⽣效.当状态不具备时, 控件不被选中, 样式失效
写法:使⽤ : 的⽅式定义伪类选择器

在这里插入图片描述
除了上面的选择器,还可以有:这些状态可以使⽤ ! 来取反. ⽐如 :!hover 就是⿏标离开控件时, :!pressed 就是⿏标松开时,
等等.

 this->setStyleSheet("QPushButton:hover{color:rgb(146, 189, 108);}QPushButton:pressed{color:red;}");

效果:
在这里插入图片描述
除了上面的,我们还可以使用事件来进行处理,如下:

void PushButton::enterEvent(QEvent *event)
{
    this->setStyleSheet("QPushButton{color:red;}");
}

void PushButton::leaveEvent(QEvent *event)
{
    this->setStyleSheet("QPushButton{color:rgb(146, 189, 108);}");
}

void PushButton::mouseReleaseEvent(QMouseEvent *e)
{
    this->setStyleSheet("QPushButton{color:rgb(236, 188, 29);}");
}

void PushButton::mousePressEvent(QMouseEvent *e)
{
    this->setStyleSheet("QPushButton{color:rgb(192, 106, 21);}");
}

效果:
在这里插入图片描述
通过进入按钮、离开按钮、按下按钮、释放按钮等设置控件的文字颜色。

box model

在Qt助手的在⽂档的 Customizing Qt Widgets Using Style Sheets 的 The Box Model 章节介
绍了盒模型.
在这里插入图片描述
在Qt中,每个widget都是矩形。
⼀个遵守盒模型的控件, 由上述⼏个部分构成.
• Content 矩形区域: 存放控件内容. ⽐如包含的⽂本/图标等.
• Border 矩形区域: 控件的边框.
• Padding 矩形区域: 内边距. 边框和内容之间的距离.
• Margin 矩形区域: 外边距. 边框到控件 geometry 返回的矩形边界的距离
默认情况下, 外边距, 内边距, 边框宽度都是 0

下面介绍一些对应的内容:
些QSS 属性来设置上述的边距和边框的样式
在这里插入图片描述
一般情况下margin的属性有 -left、-rigth、-top、-botton等四个属性,同理padding也是一样的,边距分四个方向,而边框主要就是颜色加边框的粗细。

下面我通过QLabel控件来设置对应的内边距以及框的粗细和颜色

按钮和复选框的样式属性

下面介绍一些对应控件的样式属性

按钮

在这里插入图片描述

复选框

选择器:
在这里插入图片描述
样式:
width 设置⼦控件宽度.对于普通控件⽆效 (普通控件使⽤ geometry ⽅式设定尺⼨).
height 设置⼦控件⾼度.对于普通控件⽆效 (普通控件使⽤ geometry ⽅式设定尺⼨).
image 设置⼦控件的图⽚.像 QSpinBox, QComboBox 等可以使⽤这个属性来设置⼦控件的图⽚

单选框

选择器:
在这里插入图片描述
属性:
width 设置⼦控件宽度.对于普通控件⽆效 (普通控件使⽤ geometry ⽅式设定尺⼨).
height 设置⼦控件⾼度.对于普通控件⽆效 (普通控件使⽤ geometry ⽅式设定尺⼨).
image 设置⼦控件的图⽚.像 QSpinBox, QComboBox 等可以使⽤这个属性来设置⼦控件的图⽚.

输入框

属性:
在这里插入图片描述
有时候会遇见这样的写法

QRadioButton::indicator:unchecked

也不需要害怕,我们知道::主要指的是子类控件,上面的代码的意思就是在QRadioButton控件中的子控件在没有点击的情况下

列表

属性:
::item 选中 QListView 中的具体条⽬.
:hover 选中⿏标悬停的条⽬
:selected 选中某个被选中的条⽬.
background 设置背景颜⾊
border 设置边框.
qlineargradient 设置渐变⾊,在 QSS (Qt 样式表) 中,QLinearGradient 不是直接使用的属性,而是可以通过 background 或 border 属性来实现渐变效果。具体来说,你可以使用 background 属性结合 qlineargradient 来设置控件的背景渐变。需要注意的是这个属性值有6个例如

background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop: 0 #fff, 
stop: 1 #000);

表示的是从坐标(0,0)到坐标(0,1)进行从#fff到#000的颜色渐变。这个坐标的取值要么是0要么是1.在stop中你还可以在 0 和 1 之间添加其他 stop,如 stop(0.5, yellow),这表示在渐变的中间位置(50%)使用黄色,从而形成更复杂的渐变效果。

菜单

选择器:
在这里插入图片描述

QWidget的背景

注意:顶层窗⼝的 QWidget ⽆法设置背景图⽚. 因此我们需要再套上⼀层 QFrame. 背景图⽚就设置到 QFrame 上即可
如图:
在这里插入图片描述

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

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

相关文章

C++ STL常用算法之常用算术生成算法

常用算术生成算法 学习目标: 掌握常用的算术生成算法 注意: 算术生成算法属于小型算法&#xff0c;使用时包含的头文件为 #include <numeric> 算法简介: accumulate // 计算容器元素累计总和 fill // 向容器中添加元素 accumulate 功能描述: 计算区间内容器元素…

Tof 深度相机原理

深度相机(TOF)的工作原理_tof相机原理-CSDN博客 深度剖析 ToF 技术&#xff1a;原理、优劣、数据纠错与工业应用全解析_tof技术-CSDN博客 飞行时间技术TOF_tof计算公式-CSDN博客 深度相机&#xff08;二&#xff09;——飞行时间&#xff08;TOF&#xff09;_飞行时间技术-C…

【Linux篇】进程入门指南:操作系统中的第一步

步入进程世界&#xff1a;初学者必懂的操作系统概念 一. 冯诺依曼体系结构1.1 背景与历史1.2 组成部分1.3 意义 二. 进程2.1 进程概念2.1.1 PCB&#xff08;进程控制块&#xff09; 2.2 查看进程2.2.1 使用系统文件查看2.2.2 使⽤top和ps这些⽤⼾级⼯具来获取2.2.3 通过系统调用…

SpringBean模块(一)定义如何创建生命周期

一、介绍 1、简介 在 Spring 框架中&#xff0c;Bean 是指由 Spring 容器 管理的 Java 对象。Spring 负责创建、配置和管理这些对象&#xff0c;并在应用程序运行时对它们进行依赖注入&#xff08;Dependency Injection&#xff0c;DI&#xff09;。 通俗地讲&#xff0c;Sp…

Redis-04.Redis常用命令-字符串常用命令

一.字符串操作命令 set name jack 点击左侧name&#xff0c;显示出值。 get name get abc&#xff1a;null setex key seconds value&#xff1a;设置过期时间&#xff0c;过期后该键值对将会被删除。 然后再get&#xff0c;在过期时间内可以get到&#xff0c;过期get不到。…

Epub转PDF软件Calibre电子书管理软件

Epub转PDF软件&#xff1a;Calibre电子书管理软件 https://download.csdn.net/download/hu5566798/90549599 一款好用的电子书管理软件&#xff0c;可快速导入电脑里的电子书并进行管理&#xff0c;支持多种格式&#xff0c;阅读起来非常方便。同时也有电子书格式转换功能。 …

FAST-LIVO2 Fast, Direct LiDAR-Inertial-Visual Odometry论文阅读

FAST-LIVO2 Fast, Direct LiDAR-Inertial-Visual Odometry论文阅读 论文下载论文翻译FAST-LIVO2: 快速、直接的LiDAR-惯性-视觉里程计摘要I 引言II 相关工作_直接方法__LiDAR-视觉&#xff08;-惯性&#xff09;SLAM_ III 系统概述IV 具有顺序状态更新的误差状态迭代卡尔曼滤波…

【Git】--- Git远程操作 标签管理

Welcome to 9ilks Code World (๑•́ ₃ •̀๑) 个人主页: 9ilk (๑•́ ₃ •̀๑) 文章专栏&#xff1a; Git 前面我们学习的操作都是在本地仓库进行了&#xff0c;如果团队内多人协作都在本地仓库操作是不行的&#xff0c;此时需要新的解决方案 --- 远程仓库。…

论文阅读笔记——ST-4DGS,WideRange4D

ST-4DGS ST-4DGS 论文 在 4DGS 中&#xff0c;变形场 F \mathcal{F} F 与运动参数 X 和形状参数 ( S , R ) (S,R) (S,R) 高度耦合&#xff0c;导致训练时高斯表示紧凑型退化&#xff0c;影响动态渲染质量。由此&#xff0c;本文提出两种方法解耦运动与形状参数&#xff0c;保…

[python]基于yolov8实现热力图可视化支持图像视频和摄像头检测

YOLOv8 Grad-CAM 可视化工具 本工具基于YOLOv8模型&#xff0c;结合Grad-CAM技术实现目标检测的可视化分析&#xff0c;支持图像、视频和实时摄像头处理。 功能特性 支持多种Grad-CAM方法实时摄像头处理视频文件处理图像文件处理调用简单 环境要求 Python 3.8需要电脑带有…

豪越科技消防一体化平台:打通消防管理“任督二脉”

在城市的车水马龙间&#xff0c;火灾隐患如潜藏的暗礁&#xff0c;威胁着人们的生命财产安全。传统消防管理模式在现代社会的复杂环境下&#xff0c;逐渐显露出诸多弊端。内部管理分散混乱&#xff0c;人员、装备、物资管理缺乏统一标准和高效流程&#xff1b;外部监管困难重重…

【Matlab】-- 基于MATLAB的美赛常用多种算法

文章目录 文章目录 01 内容概要02 各种算法基本原理03 部分代码04 代码下载 01 内容概要 本资料集合了多种数学建模和优化算法的常用代码资源&#xff0c;旨在为参与美国大学生数学建模竞赛&#xff08;MCM/ICM&#xff0c;简称美赛&#xff09;的参赛者提供实用的编程工具和…

机器学习课程

前言 课程代码和数据文件&#xff1a; 一、机器学习概述 1.1.人工智能概述 机器学习和人工智能&#xff0c;深度学习的关系 机器学习是人工智能的一个实现途径深度学习是机器学习的一个方法发展而来 达特茅斯会议-人工智能的起点 1956年8月&#xff0c;在美国汉诺斯小镇宁静…

AIGC(生成式AI)试用 28 -- 跟着清华教程学习 - AIGC发展研究 3.0

目标&#xff1a;继续学习 - 信息不对称、不平等、隐私泄露和数据滥用 - 问、改、创、优 - “概率预测&#xff08;快速反应&#xff09;”模型和“链式推理&#xff08;慢速思考&#xff09;”模型 - 思维滞环现象解决思路&#xff1a;1.调整提问&#xff1a;改变问题方式&…

问题:md文档转换word,html,图片,excel,csv

文章目录 问题&#xff1a;md文档转换word&#xff0c;html&#xff0c;图片&#xff0c;excel&#xff0c;csv&#xff0c;ppt**主要职责****技能要求****发展方向****学习建议****薪资水平** 方案一&#xff1a;AI Markdown内容转换工具打开网站md文档转换wordmd文档转换pdfm…

【Java】面向对象之static

用static关键字修饰成员变量 有static修饰成员变量&#xff0c;说明这个成员变量是属于类的&#xff0c;这个成员变量称为类变量或者静态成员变量。 直接用 类名访问即可。因为类只有一个&#xff0c;所以静态成员变量在内存区域中也只存在一份。所有的对象都可以共享这个变量…

Anaconda安装-Ubuntu-Linux

1、进入Anaconda官网&#xff0c;以下载最新版本&#xff0c;根据自己的操作系统选择适配的版本。 2、跳过注册&#xff1a; 3、选择适配的版本&#xff1a; 4、cd ~/anaconda_download 5、bash Anaconda3-2024.10-1-Linux-x86_64.sh 6、按Enter或PgDn键滚动查看协议&…

Linux 配置NFS服务器

1. 开放/nfs/shared目录&#xff0c;供所有用户查阅资料 服务端 &#xff08;1&#xff09;安装nfs服务&#xff0c;nfs-utils包中包含rpcbind&#xff08;rpc守护进程&#xff09; [rootnode1-server ~]# yum install -y nfs-utils # nfs-utils包中包含rpcbind [rootnode…

塔能科技:用精准节能撬动社会效益的行业杠杆

在全球积极践行可持续发展理念的当下&#xff0c;能源高效利用与节能减排&#xff0c;已然成为各行各业实现高质量发展绕不开的关键命题。对企业来说&#xff0c;节能早已不是一道可做可不做的选择题&#xff0c;而是关乎生存与发展、社会责任与竞争力的必答题。塔能科技推出的…

Java 大视界 -- Java 大数据在自动驾驶高精度地图数据更新与优化中的技术应用(157)

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…