文章目录

• 1.下载并安装 Qt5.14.2&VS2019
• 2.使用vs2019创建空白Qt项目
• • 2.1 打开vs2019
  • 2.2 创建新项目
  • 2.3 创建完成，运行
• 3.使用QSS进行界面美化
• • 3.1 下载样式文件，解压将其放到工程路径下
  • 3.2 向qrc文件中添加文件
  • 3.3 在程序中加载css文件
  • 3.4 加载样式文件函数封装

本篇文章使用的CSS文件由Qt大佬（飞扬青云）开发，他的个人主页：

码云：https://gitee.com/feiyangqingyun
github：https://github.com/feiyangqingyun
CSDN：https://me.csdn.net/feiyangqingyun

1.下载并安装 Qt5.14.2&VS2019

第一步： Qt5.14.2安装
参考： Qt 5.14.2安装教程

第二步： VS2019安装

• 我们在这里选择社区版：
  https://visualstudio.microsoft.com/zh-hans/vs/
• 下载软件
  
• 安装配置
  
• Qt Options配置
  
• 配置Qt路径
  

2.使用vs2019创建空白Qt项目

2.1 打开vs2019

2.2 创建新项目

• 正在创建
  
• 下一步
  
• 配置编译器
  
• 配置文件名称
  
• 正在创建
  

2.3 创建完成，运行

• 空白项目创建成功
  
• 使用Qt Designer编辑ui文件，添加一些按钮控件，保存
  
• 再次运行，查看效果
  

3.使用QSS进行界面美化

Qt QSS样式文件下载：
https://download.csdn.net/download/u014779536/12968176

3.1 下载样式文件，解压将其放到工程路径下

• 解压，注意路径
  
• 检查文件是否齐全
  
  
  
  

3.2 向qrc文件中添加文件

• 双击qrc文件
  
  

• 添加新的空前缀 /
  
  
  

• 添加文件
  

• 全选添加
  
  

• 依次添加flatwhite,lightblue,psblack目录下的全部文件
  

• flatwhite 目录
  

• lightblue 目录
  

• psblack 目录
  
  检查文件URL是否符合规格！！
  CSS文件：:/qss/flatwhite.css (必须一致)
  
  PNG文件：:/qss/flatwhite/add_bottom.png (必须一致)
  
  依次类推~

保存！保存！保存！

现在运行程序还是没有样式的，因为我们还没在界面中加载样式：

3.3 在程序中加载css文件

来到构造函数，在顶端引入头文件：

#include <QtWidgets/QApplication> #include <QFile>

在构造函数中加载样式表：

//加载样式表QString qss;QFile file(":/qss/lightblue.css");if (file.open(QFile::ReadOnly)){//用readAll读取默认支持的是ANSI格式,如果不小心用creator打开编辑过了很可能打不开qss = QLatin1String(file.readAll());QString paletteColor = qss.mid(20, 7);qApp->setPalette(QPalette(QColor(paletteColor)));qApp->setStyleSheet(qss);file.close();}

• 运行，展示
  
  
  

3.4 加载样式文件函数封装

void XXXSystem::initQssStyle(QColor color) {QString cssStr;if (color == Qt::white)cssStr = ":/qss/flatwhite.css";else if (color == Qt::black)cssStr = ":/qss/psblack.css";elsecssStr = ":/qss/lightblue.css";//加载样式表QString qss;QFile file(cssStr);if (file.open(QFile::ReadOnly)){//用readAll读取默认支持的是ANSI格式//如果不小心用creator打开编辑过了很可能打不开qss = QLatin1String(file.readAll());QString paletteColor = qss.mid(20, 7);qApp->setPalette(QPalette(QColor(paletteColor)));qApp->setStyleSheet(qss);file.close();} }

使用方式：

// 蓝色风格 this->initQssStyle(Qt::blue); // 白色风格 this->initQssStyle(Qt::white); // 黑色风格 this->initQssStyle(Qt::black);

总结

以上是生活随笔为你收集整理的Qt5.14.2 VS2019创建Qt项目并使用QSS美化界面(附QSS资源下载)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。