文章目錄

• 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资源下载)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。