Qt界面优化——QSS

文章目录

    • QSS基本语法
    • 使用示例
    • 样式和代码分离
    • 选择器用法
    • 子控件选择器
    • 伪类选择器
    • 盒子模型
    • 控件样式示例
      • 按钮
      • 复选框
      • 输入框
      • 列表框
      • 菜单
    • 登录界面

QSS基本语法

Qt对界面进行优化，主要采用的是QSS。

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

选择器：先选择某个/类控件，然后对其属性进行设置

键值对：针对某些样式的具体设置

例如：

QPushButton
{color: red;
}

使用示例

默认样式：

image-20241001123200098

设置字体颜色：

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

这种是针对当前控件及它的子控件生效

image-20241001123705340

设置全局样式：

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

全局样式的设置，需要在main.cpp文件当中编写

#include "widget.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);a.setStyleSheet("QPushButton { color: green; }");Widget w;w.show();return a.exec();
}

image-20241001124038800

如果设置了全局样式，然后在某个控件里面又设置了其他的样式，两者会叠加起来：

#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->pushButton->setStyleSheet("QPushButton { font-size: 10px; }");
}Widget::~Widget()
{delete ui;
}

image-20241001124356682

如果设置了全局样式，在某个控件里设置的样式和全局样式冲突了，局部优先级更高：

#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->pushButton_2->setStyleSheet("QPushButton { color: yellow; }");
}Widget::~Widget()
{delete ui;
}

image-20241001124600913

样式和代码分离

上述代码都是样式代码和C++代码混合在一起的。如果QSS代码比较复杂，代码维护成本就较高了。

我们可以将样式代码分离出来，放在单独的文件当中。后续让C++代码来读取。

  1. 创建qrc文件，通过qrc管理文件
  2. 创建单独QSS文件，将文件放入qrc当中
  3. 让C++代码读取qrc文件

image-20241001162140782

Qt Creator当中并没有提供直接创建qss的选项，这里我们是直接右键文本文档，然后更改名字和后缀

image-20241001162352703

让代码加载文件内容，在main.cpp当中：

#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();
}

上述方法仅供参考，还有更加简便的方法

Qt Designer集成了这样的功能，允许将样式直接写到.ui文件当中。

image-20241001163112980

这里的修改都会记录到ui文件当中，并在程序运行时自动生效，而且还能进行预览。

此时ui文件里面就多了一段这样的代码：

image-20241001163143367

也可以单独给控件进行设置。

但由于设置样式太灵活了，当某个控件样式不符合预期的时候，排查就比较麻烦：

  1. 全局样式
  2. 指定控件样式
  3. 指定控件的父控件样式
  4. qss文件样式
  5. 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选择器：

#include "widget.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);QString style = "QPushButton { color: red; }";style += "#pushButton_2 {color: yellow; }";style += "#pushButton_3 {color: green; }";Widget w;w.show();return a.exec();
}

image-20241001164802979

如果ID选择器和类型选择器冲突，ID优先级较高，如果不冲突，则堆叠显示

并集选择器：

#include "widget.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);//    QString style = "QPushButton { color: red; }";
//    style += "#pushButton_2 {color: yellow; }";
//    style += "#pushButton_3 {color: green; }";QString style = "QPushButton, QLineEdit, QLabel { color: green; }";a.setStyleSheet(style);Widget w;w.show();return a.exec();
}

image-20241001165041275

子控件选择器

这些就是Qt当中的子控件

image-20241001165617423

QComboBox下拉框子控件样式：

image-20241001165851325

qrc导入图标：

image-20241001170005902

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

image-20241001170218654

伪类选择器

上面的选择器，选中的都是“控件”。而伪类选择器选中的是控件的“状态”。

伪类选择器说明
:hover鼠标放到控件上
:pressed鼠标左键按下时
:focus获取输入焦点时
:enabled元素处于可以状态时
:checked被勾选时
:read-only元素为只读状态时

image-20241001183132916

#include "widget.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);QString style = "QPushButton { color: red; }";style += "QPushButton:hover { color: green; }";style += "QPushButton:pressed { color: blue; }";a.setStyleSheet(style);Widget w;w.show();return a.exec();
}

GIF 2024-10-1 18-35-08

也可以通过事件的方式进行实现

void mousePressEvent(QMouseEvent* e);
void mouseReleaseEvent(QMouseEvent* e);
void enterEvent(QEvent* e);
void leaveEvent(QEvent* e);

盒子模型

QSS中的样式很多，使用的时候，及时查阅即可。

Qt中的每一个widget都是矩形

image-20241001184405606

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

**复合属性：**由多个属性构成。

例如margin可以拆分为4个属性：

  1. margin-left
  2. margin-right
  3. margin-top
  4. margin-bottom
margin: 10px;	//四个方向都是10px的外边距
margin: 10px 20px;	//上下10px, 左右20px
margin: 10px 20px 30px 40px;	//上右下左(顺时针)

image-20241001185356322

#include "widget.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);//边框5像素	绿色虚线//内边距50像素QString style = "QLabel { border: 5px dashed green; padding-left: 50px; }";a.setStyleSheet(style);Widget w;w.show();return a.exec();
}

image-20241001185857986

外边距：

#include "widget.h"
#include "ui_widget.h"
#include<QPushButton>
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QPushButton* button = new QPushButton(this);button->setGeometry(0, 0, 100, 100);    //指定具体位置button->setText("按钮");button->setStyleSheet("QPushButton { border: 5px solid green; margin: 20px;}"); //指定边框和外边距}Widget::~Widget()
{delete ui;
}

image-20241001190321680

此时看着像小了一圈，但实际上矩形的尺寸和位置都是没变的。

控件样式示例

按钮

  • font-size设置字体大小
  • border-radius设置圆角矩形
  • background-color设置背景色
  • color设置文章颜色

image-20241001191244563

GIF 2024-10-1 19-12-23

复选框

要点说明
::indicator子控件选择器.
选中 checkbox 中的对钩部分
::hover伪类选择器
选中鼠标移动上去的状态
::pressed伪类选择器
选中鼠标按下的状态
::checked伪类选择器
选中 checkbox 被选中的状态
::unchecked伪类选择器
选中 checkbox 未被选中的状态
width设置子控件宽度
对于普通控件无效 (普通控件使用 geometry 方式设定尺寸）
height设置子控件高度
对于普通控件无效 (普通控件使用 geometry 方式设定尺寸).
image设置子控件的图片
像 QSpinBox, QComboBox 等可以使用这个属性来设置子控件的图片

更改样式表：

QCheckBox {font-size: 20px;
}QCheckBox::indicator {width: 20px;height: 20px;
}QCheckBox::indicator::unchecked {image: url(:/checkbox-unchecked.png);
}QCheckBox::indicator::unchecked::hover {image: url(:/checkbox--unchecked_hover.png);
}QCheckBox::indicator::unchecked::pressed {image: url(:/checkbox-unchecked_pressed.png);
}QCheckBox::indicator::checked {image: url(:/checkbox-checked.png);
}QCheckBox::indicator::checked::hover {image: url(:/checkbox-checked_hover.png);
}QCheckBox::indicator::checked::pressed {image: url(:/checkbox-checked_pressed.png);
}

GIF 2024-10-1 19-44-36

输入框

更改样式表：

QLineEdit {border-width: 2px;border-color: rgb(170, 170, 255);border-style: solid;border-radius: 20px;padding-left: 10px;color: rgb(170, 85, 127);font-size: 24px;background-color: rgb(220, 220, 220);selection-color: rgb(0, 180, 0);selection-background-color: rgb(180, 0, 0);
}

GIF 2024-10-1 19-58-58

属性说明
border-width设置边框宽度
border-radius设置边框圆角
border-color设置边框颜色
border-style设置边框风格
padding设置内边距
color设置文章颜色
background设置背景颜色
selection-background-color设置选中文字的背景颜色
selection-color设置选中文字的文本颜色

列表框

qlineargradient设置渐变色，此处填写6个参数：

  • x1：起点横坐标

    y1：起点纵坐标（非零即一）

  • x2：终点横坐标
    y2：终点纵坐标

  • 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 {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6a6ea9, stop: 1 #888dd9);
}

GIF 2024-10-1 20-14-36

菜单

QMenuBar {background-color:rgb(255, 230, 255)
}QMenuBar::item {border-radius: 10px;padding: 3px 10px;background-color: rgb(255, 255, 219);
}QMenuBar::item::selected {background-color: rgb(170, 85, 0);
}QMenu::item {border: 2px solid transparent;padding: 2px 10px;
}QMenu::item::selected {border: 2px solid blue;
}QMenu::separator {height: 2px;background-color: green;margin 0 2px;	
}

GIF 2024-10-1 20-54-56

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

登录界面

image-20241001210442128

Qt存在限制，给顶层窗口设置背景图会失效

通过给当前控件外层再套一层和窗口一样大小的QFrame控件，然后讲这些控件放入QFrame当中。

image-20241001210701538

Qt中设置背景图，除了background-image，还有border-image。

Qt官方推荐border-image，因为这个会跟随控件大小自动变化

QFrame {border-image:url(:/ts.jpg);
}QLineEdit {color: #8d98a1;background-color: #405361;padding: 0 5px;font-size: 20px;border: none;border-radius: 10px;
}QCheckBox {color: rgb(255, 184, 85);font-size: 18px;
}QPushButton {font-size: 20px;
}

GIF 2024-10-1 21-21-46

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

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

相关文章

2022年6月 Frontier 获得性能第一的论文翻译

2022年6月 Frontier 获得性能第一的论文翻译

为百万兆级加速架构做高性能 Linpack 优化 摘要 我们详细叙述了在 rocHPL 中做的性能优化&#xff0c;rocHPL 是 AMD 对 HPL 基准的开源实现&#xff0c;主要是针对节点进行优化的架构&#xff0c;是为百万兆级系统而设计的&#xff0c;比如&#xff1a;Frontier suppercomput…
阅读更多...
K8S部署流程

K8S部署流程

一、war打包镜像(survey,analytics,trac系统) 代码打包成war准备tomcat的server.xml文件&#xff0c;修改connector中8080端口为项目的端口 修改前&#xff1a; <Connector port"8080" protocol"HTTP/1.1"connectionTimeout"20000"redirect…
阅读更多...
你的虚拟猫娘女友，快来领取！--文心智能体平台

你的虚拟猫娘女友，快来领取！--文心智能体平台

文章目录 一、引言二、赛事介绍2.1 简介2.2 比赛时间2.3 大赛具体链接2.4 第一期赛题 三、智能体创建流程3.1 进入文心智能体平台3.1 创建智能体3.1 虚拟猫娘女友特性3.1 智能体调优 四、引言智能体测试五、结语 一、引言 我是热爱生活的通信汪&#xff0c;今天这篇博文记录一…
阅读更多...
【STM32单片机_(HAL库)】4-2-1【定时器TIM】定时器输出PWM实现呼吸灯实验

【STM32单片机_(HAL库)】4-2-1【定时器TIM】定时器输出PWM实现呼吸灯实验

1.硬件 STM32单片机最小系统LED灯模块 2.软件 pwm驱动文件添加定时器HAL驱动层文件添加GPIO常用函数定时器输出PWM配置步骤main.c程序 #include "sys.h" #include "delay.h" #include "led.h" #include "pwm.h"int main(void) {HA…
阅读更多...
疾风大模型气象,基于气象数据打造可视化平台

疾风大模型气象,基于气象数据打造可视化平台

引言 随着气象数据的广泛应用&#xff0c;越来越多的行业依赖天气预报与气候分析来做出决策。从农业、航空、能源到物流&#xff0c;气象信息无时不刻影响着各行各业的运作。然而&#xff0c;气象数据本身复杂且多样&#xff0c;如何将这些数据转化为直观、易于理解的图形和信…
阅读更多...
TypeScript 算法手册【插入排序】

TypeScript 算法手册【插入排序】

文章目录 TypeScript 算法手册 - 插入排序1. 插入排序简介1.1 插入排序定义1.2 插入排序特点 2. 插入排序步骤过程拆解2.1 选择当前元素2.2 寻找插入位置2.3 插入元素 3. 插入排序的优化3.1 二分查找插入排序案例代码和动态图 4. 插入排序的优点5. 插入排序的缺点总结 【 已更新…
阅读更多...
每日OJ题_牛客_JZ61扑克牌顺子_排序_C++_Java

每日OJ题_牛客_JZ61扑克牌顺子_排序_C++_Java

目录 牛客_JZ61扑克牌顺子_排序 题目解析 C代码 Java代码 牛客_JZ61扑克牌顺子_排序 扑克牌顺子_牛客题霸_牛客网 描述&#xff1a; 现在有2副扑克牌&#xff0c;从扑克牌中随机五张扑克牌&#xff0c;我们需要来判断一下是不是顺子。 有如下规则&#xff1a; 1. A为1&a…
阅读更多...
带徒实训项目实战讲义分享：ApiFirst文档对比功能页面开发2

带徒实训项目实战讲义分享：ApiFirst文档对比功能页面开发2

前一篇&#xff1a;带徒实训项目实战讲义分享&#xff1a;ApiFirst文档对比功能页面开发 亲爱的学员朋友们好&#xff0c;本小节跟小卷一起来学习用thymeleaf模板技术来渲染数据模型到表格中&#xff0c;通过本小节的学习&#xff0c;你会真正将thymeleaf模板技术应用到实处&a…
阅读更多...
红黑树操作图文详解，包学会

红黑树操作图文详解，包学会

RB-tree(红黑树) 1、概要 红黑树是一种自平衡的二叉搜索树&#xff0c;它在插入、删除和查找通过一定的规则可以把时间复杂度控制在O(log n)内。红黑树广泛应用域各种场景&#xff0c;如C的map和set底层实现等。 红黑树不仅是个二叉搜索树&#xff0c;而且必须满足以下性质&…
阅读更多...
【Xcode Command Line Tools】安装指南

【Xcode Command Line Tools】安装指南

安装指令 xcode-select --install安装 完成安装 验证 $ xcode-select -p /Library/Developer/CommandLineTools
阅读更多...
沂机管理系统存在存储型XSS漏洞

沂机管理系统存在存储型XSS漏洞

漏洞描述 沂机管理系统存在存储型XSS漏洞&#xff0c;窃取用户Cookie获取用户信息 漏洞复现 body"后台管理系统演示版" POC GET /data/Ajax.aspx?methoduser_save&frandom0.15233733802978144&FCloud_OrgID1&FCloud_UserID167636&FCloud_EmpID1…
阅读更多...
数据分析-29-基于pandas的窗口操作和对JSON格式数据的处理

数据分析-29-基于pandas的窗口操作和对JSON格式数据的处理

文章目录 1 窗口操作1.1 滑动窗口思想1.2 函数df.rolling2 JSON格式数据2.1 处理简单JSON对象和JSON列表2.1.1 处理简单的JSON结构2.1.2 处理空字段2.1.3 获取部分字段2.2 处理多级json2.2.1 展开所有级别(默认)2.2.2 自定义展开层级2.3 处理嵌套列表JSON3 参考附录1 窗口操作 …
阅读更多...
仪器数码管数字识别系统源码分享

仪器数码管数字识别系统源码分享

仪器数码管数字识别检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Comput…
阅读更多...
【STM32单片机_(HAL库)】4-3-1【定时器TIM】串口打印功能打开

【STM32单片机_(HAL库)】4-3-1【定时器TIM】串口打印功能打开

1.硬件 STM32单片机最小系统CH340模块 2.软件 main.c程序 #include "sys.h" #include "delay.h" #include "led.h" #include "uart1.h"int main(void) {HAL_Init(); /* 初始化HAL库 */stm32_clock_init(R…
阅读更多...
共模电感工作原理：【图文讲解】

共模电感工作原理：【图文讲解】

共模电感&#xff0c;相信做电源较多的朋友用的比较多&#xff0c;而做消费级产品的朋友或许用的不是那么的多。但是还是有必要了解了解。 先上图&#xff0c;看看它长什么样子&#xff1a; &#xff08;实物图&#xff09; &#xff08;结构图&#xff09; 很显然&#xff0…
阅读更多...
python和r语言的区别是什么

python和r语言的区别是什么

在从事数据分析行业中&#xff0c;我们都会从R与Python当中进行选择&#xff0c;但是&#xff0c;从这两个异常强大、灵活好用的数据分析语中选择&#xff0c;却是非常难以选择的。 为了让大家能选择出更适合自己的语言&#xff0c;我们将两种语言进行简单的对比。 Stack Ove…
阅读更多...
【EXCEL数据处理】000010 案列 EXCEL文本型和常规型转换。使用的软件是微软的Excel操作的。处理数据的目的是让数据更直观的显示出来，方便查看。

【EXCEL数据处理】000010 案列 EXCEL文本型和常规型转换。使用的软件是微软的Excel操作的。处理数据的目的是让数据更直观的显示出来，方便查看。

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 【EXCEL数据处理】000010 案列 EXCEL单元格格式。EXCEL文本型和常规型转…
阅读更多...
Azure DevOps Server：不能指派新增的用户

Azure DevOps Server：不能指派新增的用户

Contents 1. 概述2. 解决方案 1. 概述 近期和微软Azure DevOps项目组解决了一个“无法指派开发人员”的问题&#xff0c;在此分享给大家。问题描述&#xff1a; 在一个数据量比较大的Azure DevOps Server的部署环境中&#xff0c;用户发现将新用户的AD域账户添加到Azure DevOps…
阅读更多...
cf 975 div2 C（结论）E (树+思维)

cf 975 div2 C（结论）E (树+思维)

C n 的范围小于 1e5 ,考虑枚举每组物品数量的上限&#xff0c;并算出根据已有的物品按照该限制至少分多少组M&#xff0c;之后可以求出补齐M组所需要的最少额外数量。 经典结论&#xff1a; 将N 种颜色的物品按每组上限c 个分组&#xff0c;保证每组物品颜色不同。最少的分组数…
阅读更多...
全站最详细的Python环境配置步骤

全站最详细的Python环境配置步骤

1、官网下载IDE JetBrains下载 2、IDE下载、安装步骤 这里展示的是如何在Windows上下载、安装Pycharm工具&#xff0c;Linux的步骤类似。 2.1、选择开发者工具 选择开发者工具 2.2、选择Pycharm 选择Pycharm 2.3、选择下载 选择下载 2.4、选择社区版 一般而言&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023