Qt5.14.2 VS2019创建Qt项目并使用QSS美化界面(附QSS资源下载)

本篇文章使用的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";
    else
        cssStr = ":/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);