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

2024-06-02 13:44

本文主要是介绍【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-leftmargin-rightmargin-topmargin-bottom
margin: 10px; 四个方向都是 10px 的外边距
margin: 10px 20px; 上下是 10px, 左右是 20px
margin: 10px 20px 30px 40px; 上右下左(顺时针)
同样, padding 也是可以拆成 4 个属性:padding-leftpadding-rightpadding-toppadding-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来提升应用程序的界面设计,增强用户体验。

这篇关于【Qt】Qt Style Sheets (QSS) 指南:打造个性化用户界面的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

OpenCV在Java中的完整集成指南分享

《OpenCV在Java中的完整集成指南分享》本文详解了在Java中集成OpenCV的方法,涵盖jar包导入、dll配置、JNI路径设置及跨平台兼容性处理,提供了图像处理、特征检测、实时视频分析等应用... 目录1. OpenCV简介与应用领域1.1 OpenCV的诞生与发展1.2 OpenCV的应用领域2

MyBatis-Plus 自动赋值实体字段最佳实践指南

《MyBatis-Plus自动赋值实体字段最佳实践指南》MyBatis-Plus通过@TableField注解与填充策略,实现时间戳、用户信息、逻辑删除等字段的自动填充,减少手动赋值,提升开发效率与... 目录1. MyBATis-Plus 自动赋值概述1.1 适用场景1.2 自动填充的原理1.3 填充策略

Python实现PDF按页分割的技术指南

《Python实现PDF按页分割的技术指南》PDF文件处理是日常工作中的常见需求,特别是当我们需要将大型PDF文档拆分为多个部分时,下面我们就来看看如何使用Python创建一个灵活的PDF分割工具吧... 目录需求分析技术方案工具选择安装依赖完整代码实现使用说明基本用法示例命令输出示例技术亮点实际应用场景扩

小白也能轻松上手! 路由器设置优化指南

《小白也能轻松上手!路由器设置优化指南》在日常生活中,我们常常会遇到WiFi网速慢的问题,这主要受到三个方面的影响,首要原因是WiFi产品的配置优化不合理,其次是硬件性能的不足,以及宽带线路本身的质... 在数字化时代,网络已成为生活必需品,追剧、游戏、办公、学习都离不开稳定高速的网络。但很多人面对新路由器

C#解析JSON数据全攻略指南

《C#解析JSON数据全攻略指南》这篇文章主要为大家详细介绍了使用C#解析JSON数据全攻略指南,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、为什么jsON是C#开发必修课?二、四步搞定网络JSON数据1. 获取数据 - HttpClient最佳实践2. 动态解析 - 快速

SpringBoot集成MyBatis实现SQL拦截器的实战指南

《SpringBoot集成MyBatis实现SQL拦截器的实战指南》这篇文章主要为大家详细介绍了SpringBoot集成MyBatis实现SQL拦截器的相关知识,文中的示例代码讲解详细,有需要的小伙伴... 目录一、为什么需要SQL拦截器?二、MyBATis拦截器基础2.1 核心接口:Interceptor

从入门到进阶讲解Python自动化Playwright实战指南

《从入门到进阶讲解Python自动化Playwright实战指南》Playwright是针对Python语言的纯自动化工具,它可以通过单个API自动执行Chromium,Firefox和WebKit... 目录Playwright 简介核心优势安装步骤观点与案例结合Playwright 核心功能从零开始学习

Java堆转储文件之1.6G大文件处理完整指南

《Java堆转储文件之1.6G大文件处理完整指南》堆转储文件是优化、分析内存消耗的重要工具,:本文主要介绍Java堆转储文件之1.6G大文件处理的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言文件为什么这么大?如何处理这个文件?分析文件内容(推荐)删除文件(如果不需要)查看错误来源如何避

Java docx4j高效处理Word文档的实战指南

《Javadocx4j高效处理Word文档的实战指南》对于需要在Java应用程序中生成、修改或处理Word文档的开发者来说,docx4j是一个强大而专业的选择,下面我们就来看看docx4j的具体使用... 目录引言一、环境准备与基础配置1.1 Maven依赖配置1.2 初始化测试类二、增强版文档操作示例2.

PostgreSQL中rank()窗口函数实用指南与示例

《PostgreSQL中rank()窗口函数实用指南与示例》在数据分析和数据库管理中,经常需要对数据进行排名操作,PostgreSQL提供了强大的窗口函数rank(),可以方便地对结果集中的行进行排名... 目录一、rank()函数简介二、基础示例:部门内员工薪资排名示例数据排名查询三、高级应用示例1. 每