QT上位机开发（QSS美化）

news2025/2/25 7:39:56

我们早期学习过web开发的同学都知道，web开发有三个部分，分别是html、css和java script。其中html负责控件生成和布局，css负责美化，java script负责和web后端的数据交互。今天我们说的这个qss美化，完全可以类比成web的css来看。整体上，designer处理的ui文件就类似于html，qss类似于css，c++编程则类似于javascript脚本开发，这样一来，所有的概念就能都对上了。

为了说明qss美化怎么使用，我们用上一期文章的进度条来举例说明。

1、准备style.qss

style.qss文件，本身和css的语法也非常像。如果我们对qt默认的控件外观不是很满意，那就可以通过自己编写style.qss文件的方式，来进行调整和补充。当然，过程中大家也可以换成其他的文件名字，不一定非要是style.qss。这种qss的修改完全是通过脚本来完成的，哪怕qt的程序已经生成好了，我们还是可以通过修改style.qss来继续美化和升级，根本不需要重新编译、链接，这对我们程序员来说还是很方便的。

QPushButton:enabled{
	font-family: "Microsoft YaHei";
    font-size: 15px;
	background-color:#172349;
	border-radius:5px;
	color:white;
}

QPushButton:disabled{
	font-family: "Microsoft YaHei";
    font-size: 15px;
    background-color:#D3D3D3;
	border-radius:5px;
	color:white;
}

QProgressBar {
    border: 1px solid #ccc; 
    border-radius: 5px; 
    background-color: #f0f0f0; 
	text-align: center;
}

QProgressBar::chunk {
   background-color: #83E800;
}

修改的内容就有两部分。一个是按钮的美化，一个是进度条的美化。按钮的美化这块，又分成了按钮enable和disable两种状态。而进度条的美化，则主要集中在进度条更新时，颜色的显示发生了变化。

2、style.qss文件的加载

style.qss的加载，主要是和对应的窗口绑定在一起的。因为这种操作，本质上相当于就是对MainWindow进行美化，所以相关的加载和设置动作是放在main.cpp来进行的。大家可以看一下对应的代码，就知道个大概了，

#include "QtWidgetsApplication.h"
#include <QtWidgets/QApplication>
#include <QFile>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QtWidgetsApplication w;

	QFile styleFile("style.qss");  
	if (styleFile.open(QIODevice::ReadOnly | QIODevice::Text)) 
	{
		QString styleSheet = styleFile.readAll();
		styleFile.close();
		w.setStyleSheet(styleSheet);
	}

    w.show();
    return a.exec();
}

首先，我们加载了style.qss文件。紧接着，读取文件里面的内容。等所有内容都读到styleSheet之后，把它绑定到窗口w上面即可。注意，style.qss文件放到和cpp文件同一个目录下面。