【Qt】Qt Style Sheets (QSS) 指南：打造个性化用户界面

文章目录

  • 前言：
  • 1. QSS 选择器
  • 2. 子控件选择器（Sub-Controls）
    • 2.1. 示例：给 QComboBox 给下拉按钮加上图标
    • 2.2. 示例：修改进度条颜色
  • 3. 伪类选择器
    • 3.1. 代码示例: 设置按钮的伪类样式.
    • 3.2. 代码示例: 使用事件方式实现同样效果
  • 4. 样式属性
    • 4.1. 代码示例: 设置边框和内边距
    • 4.2. 代码示例: 设置外边距
  • 5. 控件样式示例
    • 5.1. 按钮
    • 5.2. 复选框
    • 5.3.输入框
    • 5.4. 列表
    • 5.5 菜单栏
  • 6. 登录界面
  • 总结：

前言：

在现代软件开发中，用户界面的美观性和交互性是至关重要的。Qt Style Sheets（QSS）作为一种强大的样式定制工具，为开发者提供了类似于CSS的样式设置机制，使得界面设计更加灵活和多样化。通过QSS，开发者可以轻松地为Qt应用程序中的控件定义外观和行为，从而创建出既美观又具有良好用户体验的界面。本文将详细介绍QSS的选择器、样式属性以及如何利用这些工具来定制各种控件的样式，最终通过一个登录界面的设计示例，展示QSS在实际开发中的应用。

1. QSS 选择器

QSS 的选择器支持以下几种：
在这里插入图片描述

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

这段代码中 QPushButton 就是 类型选择器了，QPushButton 也是 QWidget 的子类。

a.setStyleSheet(".QWidget { color : red; }");

这段代码中 .QWidget 是 类选择器，不会选中子类。

在开发中，期望不同的控件的样式不同，此时就需要使用 id 选择器了，因为 id 是唯一的。

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

在这里插入图片描述
此时当类型选择器 和 id选择器 选中同一个控件的时候，并且设置的样式是冲突的，此时，id选择器的优先级更高。

并集选择器：

QString style = "#pushButton_2, QLineEdit, QLabel{ color: red; }";a.setStyleSheet(style);

在这里插入图片描述

2. 子控件选择器（Sub-Controls）

在这里插入图片描述

在这里插入图片描述

2.1. 示例：给 QComboBox 给下拉按钮加上图标

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

在这里插入图片描述

2.2. 示例：修改进度条颜色

 QProgressBar::chunk {background-color: #FF0000;

3. 伪类选择器

前面介绍的选择器，都是选中“控件”，伪类选择器，选中的控件的“状态”，“符合一定条件”的控件。
在这里插入图片描述
这些状态可以使用! 来取反. 比如 :!hover 就是鼠标离开控件时, :!pressed 就是鼠标松开时,
等等。
在这里插入图片描述

3.1. 代码示例: 设置按钮的伪类样式.

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

在这里插入图片描述
上述代码也可以使用事件的方式来实现.

3.2. 代码示例: 使用事件方式实现同样效果

  1. 创建 MyPushButton 类, 继承自 QPushButton
    在这里插入图片描述
  2. 把生成代码中的构造函数改成带参数 QWidget* 版本的构造函数. (否则无法和 Qt Designer 生成的代码适配).
// mypushbutton.h
#include <QWidget>
#include <QPushButton>class MyPushButton : public QPushButton
{Q_OBJECT
public:MyPushButton(QWidget* parent);
};

// mypushbutton.cpp
#include "mypushbutton.h"MyPushButton::MyPushButton(QWidget* parent) : QPushButton(parent)
{}
  1. 在界面上创建按钮, 并提升为 MyPushButton 类型
    在这里插入图片描述
  2. 重写 MyPushButton 的四个事件处理函数
// mypushbutton.h
class MyPushButton : public QPushButton
{Q_OBJECT
public:MyPushButton(QWidget* parent);void mousePressEvent(QMouseEvent* e);void mouseReleaseEvent(QMouseEvent* e);void enterEvent(QEvent* e);void leaveEvent(QEvent* e);};

// mypushbutton.cpp
#include "mypushbutton.h"MyPushButton::MyPushButton(QWidget* parent) : QPushButton(parent)
{this->setStyleSheet("QPushButton { color: red; }"); // 初始化值设为红色
}void MyPushButton::mousePressEvent(QMouseEvent *e)  // 鼠标按下时设为蓝色
{this->setStyleSheet("QPushButton { color: blue; }");
}void MyPushButton::mouseReleaseEvent(QMouseEvent *e) // 鼠标放开时还原为绿色
{this->setStyleSheet("QPushButton { color: green; }");
}void MyPushButton::enterEvent(QEvent *e) // 鼠标进入时设为绿色
{this->setStyleSheet("QPushButton { color: green; }");
}void MyPushButton::leaveEvent(QEvent *e) // 鼠标离开时还原为蓝色
{this->setStyleSheet("QPushButton {color: red; }");
}

4. 样式属性

QSS 中的样式属性非常多，不需要都记住，核心原则还是用到了就区查，大部分的属性和CSS是非常相似的。
box model 盒子模型， 来自于 CSS
在这里插入图片描述
Qt 中每个 widget 都是一个矩形
在这里插入图片描述
复合属性，比方说，margin 可以拆分成 4 个属性: margin-left、margin-right、margin-top、margin-bottom
margin: 10px; 四个方向都是 10px 的外边距
margin: 10px 20px; 上下是 10px, 左右是 20px
margin: 10px 20px 30px 40px; 上右下左(顺时针)
同样， padding 也是可以拆成 4 个属性：padding-left、padding-right、padding-top、padding-bottom

4.1. 代码示例: 设置边框和内边距

int main(int argc, char *argv[])
{QApplication a(argc, argv);QString style = "QLabel { border: 5px solid red; padding-left: 10px;}";a.setStyleSheet(style);Widget w;w.show();return a.exec();
}

在这里插入图片描述

4.2. 代码示例: 设置外边距

#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 red; margin: 20px;}");}Widget::~Widget()
{delete ui;
}

在这里插入图片描述

5. 控件样式示例

5.1. 按钮

代码示例: 自定义按钮

QPushButton {font-size: 20px;  /*设置字体大小*/border: 2px solid rgb(138, 156, 255); /*设置边框*/border-radius: 10px;  /*设置圆角*/background-color: rgb(63, 127, 191); /*设置背景色*/color: rgb(255, 255, 255); /*设置字体颜色*/
}QPushButton:pressed {background-color: rgb(255, 170, 0);
}

在这里插入图片描述

5.2. 复选框

代码示例：自定义复选框
在这里插入图片描述

QCheckBox {font-size: 30px;
}QCheckBox::indicator { /*::indicator 子控件选择器，选中checkbox中的勾选的部分*/width: 30px;  /*设置子控件宽度，对于普通控件无效（普通控件使用geometry方式设定尺寸）*/height: 30px; /*设置子控件高度*/
}QCheckBox::indicator:unchecked { /*:unchecked 伪类选择器，选中checkbox 未被选中的状态*/image:url(:/checkbox_unchecked.png);
}QCheckBox::indicator:unchecked:hover { /*:hover 伪类选择器，选中鼠标移动上去的状态*/image:url(:/checkbox_unchecked_hover.png);
}QCheckBox::indicator:unchecked:pressed { /*:pressed 伪类选择器，选中鼠标按下的状态*/image:url(:/checkbox_unchecked_pressed.png)
}QCheckBox::indicator:checked { /*:checked 伪类选择器，选中checkbox被选中的状态*/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)
}

在这里插入图片描述

5.3.输入框

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

在这里插入图片描述

5.4. 列表

qlineargradient 设置渐变色(线性渐变)，此处要填写6个参数。
在这里插入图片描述

x1: 起点的横坐标
y1: 起点的纵坐标
这里的取值，是非常有限的，要么是0，要么是1
x2: 终点的横坐标
y2: 终点的纵坐标
从左到右的渐变： x1: 0、y1: 0、x2: 1、y2: 0
从上到下的渐变： x1: 0、y1: 0、x2: 0、y2: 1
对角线方向从左上到右下的渐变： x1: 0、y1: 0、x2: 1、y2: 1

QListView::item:hover {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #FAFBFE, stop: 1 #DCDEF1);
}
QListView::item:selected {border: 1px solid #6a6ea9;background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #6a6ea9, stop: 1 #888dd9);
}

在这里插入图片描述

5.5 菜单栏

QMenuBar {background-color: #EDEDED; /* 背景颜色 */border: 1px solid #CCCCCC; /* 边框 */border-radius: 6px; /* 设置菜单栏圆角 */spacing: 3px; /*菜单项的间隔*/
}QMenuBar::item {background-color: #dfdfdf; /* 每个菜单项的背景颜色 */padding: 4px 10px; /* 调整内边距 */margin: 0px;border-radius: 6px; /* 设置菜单项圆角 */border: 1px solid transparent; /* 清除边框，还可以保证文字不会错位 */
}QMenuBar::item:selected {border: 1px solid #6a6a6a; /* 边框 */background-color: #D3D3D3; /* 选中菜单项的背景颜色 */
}QMenu {background-color: #EDEDED; /* 下拉菜单背景颜色 */border: 1px solid #CCCCCC; /* 下拉菜单边框 */border-radius: 6px; /* 设置下拉菜单栏圆角 */
}QMenu::item {background-color: transparent; /* 清除下拉菜单项的背景色 */border: 1px solid transparent; /* 清除边框，还可以保证文字不会错位 */padding: 4px 20px; /* 调整内边距 */border-radius: 6px; /* 设置下拉菜单项圆角 */
}QMenu::item:selected {background-color: #D3D3D3; /* 选中下拉菜单项的背景颜色 */border: 1px solid #6a6a6a; /* 边框 */border-radius: 6px; /* 设置菜单项圆角 */
}QMenu::separator {height: 2px;background-color: rgb(98, 98, 98);margin:2 5px;
}

在这里插入图片描述

6. 登录界面

基于上述学习过的 QSS 样式，制作一个美化板本的登录界面，

调整输入框高度
在这里插入图片描述
居中对齐
在这里插入图片描述
在这里插入图片描述
让一个窗口变的好看，其中最明显的一点就是设置背景。
直观想法，是直接给 QWidget 顶层窗口设置背景图，但是 Qt 中存在限制，直接给顶层窗口设置背景会失效。（原因暂时不可考）
可以给上述控件外头套上套一个和窗口一样大小的 QFrame 控件。也是 QWidget 的一个子类。

Qt 中设置背景图，除了background-image 之外,还有border-image 属性。
background-image ：固定大小。
border-image:通过这种方式设置的背景，会自动跟随控件的大小变化。

在这里插入图片描述
在这里插入图片描述

QFrame {border-image: url(:/background.jpg);
}QLineEdit {border: 1px solid transparent;color: rgb(221, 221, 221);background-color: #405361;padding: 0 5px;font-size: 20px;border-style: none;border-radius: 10px;
}QLineEdit:focus {border: 1px solid rgb(85, 170, 255); /* 获取焦点时的边框颜色 */
}QCheckBox {color: white;font-size: 18px
}QPushButton {font-size: 20px;  /*设置字体大小*/border: 1px solid rgb(0, 170, 255); /*设置边框*/border-radius: 10px;  /*设置圆角*/background-color: rgb(63, 127, 191); /*设置背景色*/color: rgb(255, 255, 255); /*设置字体颜色*/
}QPushButton:pressed {background-color:rgb(0, 121, 181);
}

在这里插入图片描述

总结：

  1. QSS 是什么，类似于 CSS 这样的一种设置样式的机制，
  2. QSS 基本用法
  3. 选择器的使用
  4. 子控件选择器
  5. 伪类选择器
  6. 盒子模型
  7. 代码例子，QSS 支持的样式属性值是很多的

通过本文的学习，我们了解到QSS是一种类似于CSS的样式设置机制，它允许开发者通过选择器来指定控件的样式，并使用丰富的样式属性来定制界面。本文首先介绍了QSS的基本选择器，包括类型选择器、类选择器、ID选择器和并集选择器，然后详细探讨了子控件选择器和伪类选择器的使用，这些选择器能够帮助开发者对控件的特定部分或状态进行精确的样式设置。接着，文章通过多个代码示例展示了如何使用QSS来设置边框、内边距、外边距等样式属性，以及如何为按钮、复选框、输入框、列表和菜单栏等常见控件定制样式。最后，通过一个登录界面的设计示例，我们看到了QSS在实际开发中的综合应用，如何通过背景设置、控件样式定制以及布局调整来创建一个既美观又实用的用户界面。通过本文的学习，开发者可以更加熟练地运用QSS来提升应用程序的界面设计，增强用户体验。

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

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

相关文章

数模混合芯片设计中的修调技术是什么？

数模混合芯片设计中的修调技术是什么？

一、修调目的 数模混合芯片需要修调技术主要是因为以下几个原因&#xff1a; 工艺偏差&#xff08;Process Variations&#xff09;&#xff1a; 半导体制造过程中存在不可避免的工艺偏差&#xff0c;如晶体管尺寸、阈值电压、电阻和电容值等&#xff0c;这些参数的实际值与…
阅读更多...
【学习Day5】操作系统

【学习Day5】操作系统

✍&#x1f3fb;记录学习过程中的输出&#xff0c;坚持每天学习一点点~ ❤️希望能给大家提供帮助~欢迎点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;指点&#x1f64f; 学习编辑文章的时间不太够用&#xff0c;先放思维导图&#xff0c;后续复习完善细节。
阅读更多...
基于jeecgboot-vue3的Flowable流程-我的任务（三）

基于jeecgboot-vue3的Flowable流程-我的任务（三）

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 这一部分主要讲我的任务里的详情&#xff0c;看流程情况 1、主要调用record/index.vue&#xff0c;调用参数如下&#xff1a; /*** 详情*/function handleDetail(record: Recordable) {c…
阅读更多...
构建一个文字冒险游戏：Python 编程实战

构建一个文字冒险游戏：Python 编程实战

在本文中&#xff0c;我们将探索如何使用 Python 创建一个简单的文字冒险游戏。通过这个项目&#xff0c;你将了解到基础的编程技术&#xff0c;包括条件语句、函数和基本的用户输入处理&#xff0c;同时也能体会到文本游戏的魅力和设计的挑战。 项目概述 文字冒险游戏是一种…
阅读更多...
python-最接近target的值

python-最接近target的值

【问题描述】&#xff1a;给定一个数组&#xff0c;在数组中找到两个数&#xff0c;使它们的和最接近目标值的值但不超过目标值&#xff0c;然后返回它们的和。 【问题示例】&#xff1a;输入target15,array[1,3,5,11,7],输出14&#xff0c;31114。 完整代码如下&#xff1a; …
阅读更多...
童梦奇缘，味你而来 —— 蒙自源六一儿童节特别活动

童梦奇缘，味你而来 —— 蒙自源六一儿童节特别活动

在六月的暖阳下&#xff0c;孩子们的欢笑声如同最美妙的乐章&#xff0c;奏响了夏日的序曲。在这个充满童真与梦想的季节&#xff0c;蒙自源精心策划了一场别开生面的六一儿童节特别活动&#xff0c;邀请每一位小朋友和大朋友&#xff0c;一同踏上一段奇妙的味蕾之旅。 从5月25…
阅读更多...
【深入学习Redis丨第二篇】Redis集群部署详解

【深入学习Redis丨第二篇】Redis集群部署详解

文章目录 Redis集群部署Redis4 Cluster部署 Redis集群部署 1 Redis各节点部署 使用源码安装各节点&#xff0c;不过与非cluster方式不同的是&#xff0c;配置文件中需启动cluster相关的配置。 因本次为伪分布式部署&#xff0c;生产环境部署时建议至少3台机器部署&#xff0…
阅读更多...
列表和列表项

列表和列表项

一、列表和列表项简介 列表是 FreeRTOS 中的一个数据结构&#xff0c;列表被用来跟踪 FreeRTOS中的任务&#xff08;任务当前的状态&#xff09;&#xff0c;列表项就是存放在列表中的项目 列表相当于链表&#xff0c;列表项相当于节点&#xff0c;FreeRTOS 中的列表是一个双向…
阅读更多...
Gigapixel AI 安装和使用教程

Gigapixel AI 安装和使用教程

简介 Topaz Gigapixel AI 是一款功能强大的图像放大软件&#xff0c;它可以帮助用户将低分辨率的图像放大到更高的分辨率&#xff0c;而不会损失细节。该软件利用人工智能技术&#xff0c;能够智能分析图像并重建丢失的细节&#xff0c;从而生成高质量的放大图像。 安装 下载…
阅读更多...
系统架构设计师 - 操作系统(1)

系统架构设计师 - 操作系统(1)

操作系统 操作系统&#xff08;5-6分&#xff09;操作系统概述进程管理进程和线程的基本概念进程的状态 ★前趋图 ★★★★信号量与 PV 操作 ★★★★死锁及银行家算法 ★ 大家好呀&#xff01;我是小笙&#xff0c;本章我主要分享系统架构设计师 - 操作系统(1)知识&#xff0c…
阅读更多...
2024.6.1 学习记录

2024.6.1 学习记录

1、面经复习 2、项目使用guthub action 完成CI/CD&#xff0c;使用rollup打包为es格式 3、代码随想录刷题复习
阅读更多...
Go语言-切片底层探索 —— 补充篇：切片和底层数组到底是什么关系？

Go语言-切片底层探索 —— 补充篇：切片和底层数组到底是什么关系？

之前的切片探索中&#xff0c;上篇通过一道算法题目&#xff0c;了解到切片的两大特性&#xff1a;一是&#xff1a;切片是引用类型&#xff0c;指向底层数组&#xff0c;修改其底层数组的时候&#xff0c;会影响切片中的值。二是&#xff1a;向切片中添加元素的时候&#xff0…
阅读更多...
半导体光子电学期末笔记1: 电磁光学基本理论

半导体光子电学期末笔记1: 电磁光学基本理论

Chapter 2: 电磁光学基本理论 电磁光学理论概述 真空中麦克斯韦方程组[p9] 在自由空间中&#xff0c;麦克斯韦方程组可以写成如下形式&#xff1a; { ∇ H ϵ 0 ∂ E ∂ t (1) ∇ E − μ 0 ∂ H ∂ t (2) ∇ ⋅ E 0 (3) ∇ ⋅ H 0 (4) \begin{cases} \nabla \times \…
阅读更多...
Java——异常详解

Java——异常详解

异常五个主要关键字&#xff1a;throw、try、catch、finally、throws 1. 异常的概念与体系结构 1.1 异常的概念 在Java中&#xff0c;程序执行过程中发生的不正常行为被称为异常&#xff0c;如&#xff1a; 1. 算数异常 public static void main(String[] args) {System.ou…
阅读更多...
基于MingGW64 GCC编译Windows平台上的 libuvc

基于MingGW64 GCC编译Windows平台上的 libuvc

安装cmake 打开cmake官网 https://cmake.org/download/&#xff0c;下载安装包&#xff1a; 安装时选择将cmake加到系统环境变量里。安装完成后在新的CMD命令窗口执行cmake --version可看到输出&#xff1a; D:\>cmake --version cmake version 3.29.3 CMake suite mainta…
阅读更多...
牛客网刷题 | BC108 反斜线形图案

牛客网刷题 | BC108 反斜线形图案

目前主要分为三个专栏&#xff0c;后续还会添加&#xff1a; 专栏如下&#xff1a; C语言刷题解析 C语言系列文章 我的成长经历 感谢阅读&#xff01; 初来乍到&#xff0c;如有错误请指出&#xff0c;感谢&#xff01; 描述 KiKi学习了循环&am…
阅读更多...
社交媒体数据恢复：Voxer

社交媒体数据恢复：Voxer

一、Voxer数据恢复教程 了解Voxer应用 Voxer是一款专门为iPhone和Android智能手机设计的免费对讲机应用&#xff0c;为用户提供即时的语音、文本、照片等信息发送和接收服务。该应用有点类似短信服务&#xff0c;但用声音代替文本。当你下载之后&#xff0c;如果不邀请朋友&a…
阅读更多...
重复文件怎么查找并清理？电脑重复文件清理工具分享：4个

重复文件怎么查找并清理？电脑重复文件清理工具分享：4个

在日常使用电脑的过程中&#xff0c;我们不可避免地会遇到各种重复文件的问题。这些重复文件不仅占据了宝贵的存储空间&#xff0c;还可能导致系统性能下降&#xff0c;甚至引发一些不必要的问题。因此&#xff0c;如何有效地查找并清理这些重复文件成为了许多用户关注的焦点。…
阅读更多...
计算 x 的二进制表示中 1 的个数

计算 x 的二进制表示中 1 的个数

计算 x 的二进制表示中 1 的个数 代码如下&#xff1a; int func(int x){int countx 0;while (x>0){countx;x x & (x - 1);}return countx;} 完整代码&#xff1a; using System; using System.Collections.Generic; using System.ComponentModel; using System.Dat…
阅读更多...
STM32基于HAL库的HC-SR04模块超声波测距

STM32基于HAL库的HC-SR04模块超声波测距

文章目录 一、HC-SR04模块介绍二、创建工程1.选择芯片2.配置RCC、SY![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/9d2a5b883f0e409eabb804e6da861277.png)3.配置串口14.配置定时器5.配置GPIO 三、Keil代码1.勾选Use MicroLIB2.创建SR04.c和SR04.h文件3.其他代码 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023