在Qt creator5.14中使用QSS 美化Qt界面

2024-01-20 07:32
文章标签 使用 qt 界面 qss 美化 creator5.14

本文主要是介绍在Qt creator5.14中使用QSS 美化Qt界面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

QSS简介

QSS称为Qt Style Sheets也就是Qt样式表，它是Qt提供的一种用来自定义控件外观的机制，它有着与css3相似的语法，或者在某种意义上它可以说是对css3进行某些特化后的子集。
Qt控件自身的外观有时很难满足我们的需要，这时候一般会有两种常见的解决方案，第一种是通过重写paintEvent来实现控件的自绘，这种方式最灵活，然而学习和使用成本也是最高的；另一种则是使用qss，通过qss控制widgets的外观表达。而qss的强大之处在于它不仅简单易学，而且功能强大，对自定义组件也能提供良好的支持。

基本选择器

在这里插入图片描述

伪状态选择器

在这里插入图片描述

示例

说明

通过一个基本的示例演示qss的基本使用，对于有css基础的人来说很容易上手

新建项目

新建一个Qt Widgets Application项目，在窗体上添加一个tabWidget控件，然后修改mainwindow.cpp代码在窗体上添加一下组件。
在这里插入图片描述
mainwindow.cpp代码如下:

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>
#include <QRadioButton>
#include <QCheckBox>
#include <QStandardItemModel>
#include <QTableView>
#include <QVBoxLayout>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);ui->tabWidget->clear();//清空选项卡
setCentralWidget(ui->tabWidget);QWidget *tab1=new QWidget(this);QWidget *tab2=new QWidget(this);//--------------------------------------------------QTableView  *tableView = new QTableView;//提供了用于存储自定义数据的通用模型QStandardItemModel *model = new QStandardItemModel(5,4);model->setHeaderData(0,Qt::Horizontal,tr("第一季度"));model->setHeaderData(1,Qt::Horizontal,tr("第二季度"));model->setHeaderData(2,Qt::Horizontal,tr("第三季度"));model->setHeaderData(3,Qt::Horizontal,tr("第四季度"));//循环插入数据for(int row=0;row<5;row++){model->insertRows(row,1); //插入一行model->setData(model->index(row,0), qrand()%1000+1000); //插入第一列 插入一个1000-2000的随机数model->setData(model->index(row,1), qrand()%1000+1000);model->setData(model->index(row,2), qrand()%1000+1000);model->setData(model->index(row,3), qrand()%1000+1000);}tableView->setAutoScroll(true);//自动滚动条tableView->resizeColumnsToContents(); //根据内容调整大小tableView->setModel(model); //使用QVBoxLayout *vLayout = new QVBoxLayout();vLayout->addWidget(tableView);tab1->setLayout(vLayout);//--------------------------------------------------QGridLayout *layout = new QGridLayout;layout->addWidget( new QPushButton("我的按钮"), 0, 0);layout->addWidget( new QPushButton("我的按钮"), 0, 1);layout->addWidget( new QPushButton("我的按钮"), 0, 2);layout->addWidget( new QPushButton("我的按钮"), 0, 3);layout->addWidget( new QRadioButton("程序员"), 1, 0);layout->addWidget( new QRadioButton("设计"), 1, 1);layout->addWidget( new QRadioButton("测试"), 1, 2);layout->addWidget( new QRadioButton("文档"), 1, 3);layout->addWidget( new QCheckBox("音乐"), 2, 0);layout->addWidget( new QCheckBox("电影"), 2, 1);layout->addWidget( new QCheckBox("游戏"), 2, 2);layout->addWidget( new QCheckBox("睡觉"), 2, 3);for (int i = 3; i < 7; ++i) {QLabel *label = new QLabel(tr("第 %1 行:").arg(i + 1));QLineEdit *lineEdit = new QLineEdit;layout->addWidget(label , i + 1, 0);layout->addWidget(lineEdit, i + 1, 1);}tab2->setLayout(layout);//--------------------------------------------------------ui->tabWidget->setTabPosition(QTabWidget::North);//设置选项卡的位置东南西北，默认在北ui->tabWidget->addTab(tab1,tr("销售"));//在后面添加选项卡ui->tabWidget->insertTab(1,tab2,QIcon(":/images/present.ico"),tr("其他控件"));//插入带图标的选项卡ui->tabWidget->setTabIcon(0,QIcon(":/images/hot.ico"));//设置选项卡图标ui->tabWidget->setMovable(true);    ui->tabWidget->setTabToolTip(1,tr("一些组件"));//鼠标悬停弹出提示ui->tabWidget->usesScrollButtons();//选项卡滚动
}
MainWindow::~MainWindow()
{delete ui;
}

添加QSS资源

1.在项目目录下创建名称为“resource”文件夹
2.在Qt creater中新建资源文件Qt Resource File，可以点击“浏览”按钮，打开工程所在的目录下，选择“resource”文件夹。输入资源名称可为“qss”点击“下一步”->点击“完成”。
在这里插入图片描述
3. 添加.qss文件。
右键“*.qrc”—>选择“add prefix”—>在弹出的窗口中输入“/Qss”。操作完成后，到对应的“resource”目录下创建“Qss”文件夹，并在文件夹内创建扩展名称为".qss"。
在这里插入图片描述
在这里插入图片描述
4. 对应的“resource”目录下创建“Qss”文件夹，并在文件夹内创建扩展名称为”style.qss"的文件。

在这里插入图片描述

style.qss代码如下:

/* 控件的背景 */
.QWidget {background-color: beige;
}QToolBar {background-color: beige;
}QDialog, QFileDialog {background-color: beige;
}QTabWidget::pane { /* 选项卡小部件框架 */border-top: 2px solid #C2C7CB;
}QTabWidget::tab-bar {left: 5px; /* 向右移动 5px */
}QTabBar, QTabWidget {background-color: beige;
}
QTabBar::tab {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);border: 1px solid darkkhaki;border-bottom-color: #C2C7CB; /*与窗格颜色相同 */border-top-left-radius: 4px;border-top-right-radius: 4px;min-width: 8ex;padding: 2px;}
QTabBar::tab:selected, QTabBar::tab:hover {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #fafafa, stop: 0.4 #f4f4f4,stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}QTabBar::tab:selected {border-color: #9B9B9B;border-bottom-color: #C2C7CB; /* 与窗格颜色相同 */
}QTabBar::tab:!selected {margin-top: 2px; /* 使未选定的选项卡看起来更小 */
}/* 不错的Windows XP风格的密码字符. */
QLineEdit[echoMode="2"] {lineedit-password-character: 9679;
}QHeaderView::section {background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 #616161, stop: 0.5 #505050,stop: 0.6 #434343, stop:1 #656565);color: white;padding-left: 4px;border: 1px solid #6c6c6c;}QHeaderView::section:checked{background-color: red;}/* 我们为按钮提供最小宽度和最小高度
使它们看起来优雅，不受文本宽度的影响。 */
QPushButton {background-color: palegoldenrod;border-width: 2px;border-color: darkkhaki;border-style: solid;border-radius: 5;padding: 3px;min-width: 9ex;min-height: 2.5ex;
}QPushButton:hover {background-color: khaki;
}/* 增加填充，这样当按下按钮时文本会移动。 */
QPushButton:pressed {padding-left: 5px;padding-top: 5px;background-color: #d0d67c;
}QLabel, QAbstractButton {font: bold;
}/* 用棕色标记强制字段。 */
.mandatory {color: brown;
}/* 状态栏上的粗体文本看起来很糟糕。 */
QStatusBar QLabel {font: normal;
}QStatusBar::item {border-width: 1;border-color: darkkhaki;border-style: solid;border-radius: 2;
}QStackedWidget, QComboBox, QLineEdit, QSpinBox, QTextEdit, QListView, QWebView, QTreeView, QHeaderView {background-color: cornsilk;selection-color: #0a214c;selection-background-color: #C19A6B;
}QListView {show-decoration-selected: 1;
}QListView::item:hover {background-color: wheat;
}/* 在填充中保留1个像素空间。当得到焦点时，就消除填充并扩大边界。看起来像物品在发光。 */
QLineEdit, QFrame {border-width: 1px;padding: 1px;border-style: solid;border-color: darkkhaki;border-radius: 5px;
}/* 消除填充并增加边框。 */
QLineEdit:focus, QFrame:focus {border-width: 3px;padding: 0px;
}/* QLabel控件  */
QLabel {border: none;padding: 0;background: none;
}/*  QLabel 上的 QToolTip提示  */
QToolTip {border: 2px solid darkkhaki;padding: 5px;border-radius: 3px;opacity: 200;
}/* 悬停时背景颜色改变*/
QRadioButton:hover, QCheckBox:hover {background-color: wheat;
}/* 对话框的按钮遵循Windows样式 */
QDialogButtonBox {button-layout: 0;
}

在窗体上应用qss样式

修改main.cpp

#include "mainwindow.h"#include <QApplication>
#include <QFile>
#include <QDebug>int main(int argc, char *argv[])
{QApplication a(argc, argv);//加载qss文件QFile qssFile(":/Qss/style.qss");qssFile.open(QFile::ReadOnly); //以只读方式打开if(qssFile.isOpen()){QString qss = QLatin1String(qssFile.readAll());qApp->setStyleSheet(qss);qssFile.close();}else{qDebug() << "无法打开文件";}MainWindow w;w.show();return a.exec();
}

运行结果对比

没有使用样式之前
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

这篇关于在Qt creator5.14中使用QSS 美化Qt界面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/625228。

相关文章

Swagger2与Springdoc集成与使用详解

Swagger2与Springdoc集成与使用详解

《Swagger2与Springdoc集成与使用详解》：本文主要介绍Swagger2与Springdoc集成与使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录1. 依赖配置2. 基础配置2.1 启用 Springdoc2.2 自定义 OpenAPI 信息3.
阅读更多...
Golang interface{}的具体使用

Golang interface{}的具体使用

《Golanginterface{}的具体使用》interface{}是Go中可以表示任意类型的空接口,本文主要介绍了Golanginterface{}的具体使用,具有一定的参考价值,感兴趣的可以了... 目录一、什么是 interface{}？定义形China编程式：二、interface{} 有什么特别的？✅
阅读更多...
使用Python实现调用API获取图片存储到本地的方法

使用Python实现调用API获取图片存储到本地的方法

《使用Python实现调用API获取图片存储到本地的方法》开发一个自动化工具,用于从JSON数据源中提取图像ID,通过调用指定API获取未经压缩的原始图像文件,并确保下载结果与Postman等工具直接... 目录使用python实现调用API获取图片存储到本地1、项目概述2、核心功能3、环境准备4、代码实现
阅读更多...
windows和Linux安装Jmeter与简单使用方式

windows和Linux安装Jmeter与简单使用方式

《windows和Linux安装Jmeter与简单使用方式》：本文主要介绍windows和Linux安装Jmeter与简单使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录Windows和linux安装Jmeter与简单使用一、下载安装包二、JDK安装1.windows设
阅读更多...
Spring 缓存在项目中的使用详解

Spring 缓存在项目中的使用详解

《Spring缓存在项目中的使用详解》Spring缓存机制,Cache接口为缓存的组件规范定义,包扩缓存的各种操作（添加缓存、删除缓存、修改缓存等）,本文给大家介绍Spring缓存在项目中的使用... 目录1.Spring 缓存机制介绍2.Spring 缓存用到的概念Ⅰ.两个接口Ⅱ.三个注解(方法层次)Ⅲ.
阅读更多...
PyTorch中cdist和sum函数使用示例详解

PyTorch中cdist和sum函数使用示例详解

《PyTorch中cdist和sum函数使用示例详解》torch.cdist是PyTorch中用于计算**两个张量之间的成对距离（pairwisedistance）**的函数,常用于点云处理、图神经网... 目录基本语法输出示例1. 简单的 2D 欧几里得距离2. 批量形式（3D Tensor）3. 使用不
阅读更多...
C#使用MQTTnet实现服务端与客户端的通讯的示例

C#使用MQTTnet实现服务端与客户端的通讯的示例

《C#使用MQTTnet实现服务端与客户端的通讯的示例》本文主要介绍了C#使用MQTTnet实现服务端与客户端的通讯的示例,包括协议特性、连接管理、QoS机制和安全策略,具有一定的参考价值,感兴趣的可... 目录一、MQTT 协议简介二、MQTT 协议核心特性三、MQTTNET 库的核心功能四、服务端（BR
阅读更多...
使用@Cacheable注解Redis时Redis宕机或其他原因连不上继续调用原方法的解决方案

使用@Cacheable注解Redis时Redis宕机或其他原因连不上继续调用原方法的解决方案

《使用@Cacheable注解Redis时Redis宕机或其他原因连不上继续调用原方法的解决方案》在SpringBoot应用中,我们经常使用​​@Cacheable​​注解来缓存数据,以提高应用的性能... 目录@Cacheable注解Redis时，Redis宕机或其他原因连不上，继续调用原方法的解决方案1
阅读更多...
java中XML的使用全过程

java中XML的使用全过程

《java中XML的使用全过程》：本文主要介绍java中XML的使用全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录什么是XML特点XML作用XML的编写语法基本语法特殊字符编写约束XML的书写格式DTD文档schema文档解析XML的方法​​DOM解析XM
阅读更多...
使用Java实现Navicat密码的加密与解密的代码解析

使用Java实现Navicat密码的加密与解密的代码解析

《使用Java实现Navicat密码的加密与解密的代码解析》：本文主要介绍使用Java实现Navicat密码的加密与解密,通过本文,我们了解了如何利用Java语言实现对Navicat保存的数据库密... 目录一、背景介绍二、环境准备三、代码解析四、核心代码展示五、总结在日常开发过程中，我们有时需要处理各种软
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2