QSS樣式表實現(xiàn)界面換膚功能
更新時間：2022年10月09日 09:55:43 作者：孤生i
這篇文章主要介紹了QSS樣式表實現(xiàn)界面換膚功能，對QSS樣式表進行簡單介紹，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
前言
本篇，我們將對QSS樣式表進行簡單介紹，并且使用QSS樣式表實現(xiàn)界面換膚功能。
一、實現(xiàn)效果
通過點擊主界面的設置按鈕，進入皮膚設置界面。選擇想要設置的皮膚，并單擊確定就能實現(xiàn)界面換膚。
二、QSS簡介及用法
1.什么是QSS?
- QSS是Qt Style Sheet的簡稱，也叫Qt樣式表。在操作Qt制作軟件界面的過程中，允許我們使用QSS自定義小部件的外觀，以及通過子類化QStyle實現(xiàn)想要的功能界面。
2.怎么使用QSS?
- QSS共有兩種使用方法
- 第一種是窗口內(nèi)的單個控件直接調用setStyleSheet函數(shù)，將某個控件的外觀進行自定義操作
- 第二種是編寫后綴為.qss文件，通過讀取.qss文件的方式，批量更改窗口內(nèi)所有或部分控件外觀
三、QSS用法一：單個控件調用setStyleSheet函數(shù)
- 友情提示：下拉至文章末尾可以查看樣式表屬性及其含義的鏈接
- 調用語句：控件指針 -> setStyleSheet("控件類型{屬性1：屬性值;屬性2：屬性值;}")；
- 調用實例如下：
//創(chuàng)建標簽
QLabel *title = new QLabel("iQIYI愛奇藝",this);
//標簽位置大小初始化
title->setGeometry(250,265,180,50);
//使用樣式表自定義標簽外觀
title->setStyleSheet("QLabel{font-size:30px;font-style:微軟雅黑;font-weight:bold}");以上案例實現(xiàn)了，將標簽中的文字設置為：
30px（字號），微軟雅黑（字體），bold（加粗）。
四、QSS用法二：編寫單個界面.qss文件的并讀取
1.創(chuàng)建qss文件
（1）在工程文件中，創(chuàng)建新建文本文檔（記事本）、
（2）將新建文本文檔后綴改為.qss
（3）以記事本打開的方式對.qss文件進行編輯
2. qss文件語法格式
- 語法格式：
選擇器{屬性1:屬性值;屬性2:屬性值;} - 選擇器類型如下表格：
| 類型 | 實例 | 含義 |
|---|---|---|
| 通配選擇器 | * | 匹配所有控件 |
| 類型選擇器 | QPushButton | 匹配所有QPushButton和其子類的實例 |
| 屬性選擇器 | QPushButton[flat="false"] | 匹配所有flat屬性是false的QPushButton實例（可以是自定義屬性，） |
| 類選擇器 | .QPushButton | 匹配所欲哦QPushButton的實例，但不匹配其子類，注意前面有一個點號 |
| ID選擇器 | #myButton | 匹配所有id為myButton的控件實例，這里的id需要用setObjectName函數(shù)設置 |
| 后代選擇器 | QDialog QPushButton | 所有QDialog容器中包含的QPushButton（直接或間接） |
| 子選擇器 | QDialog > QPushButton | 所有QDialog容器下面的QPushButton（直接） |
.qss文件實例
3.讀取qss文件
我們可以在窗口中，以讀入qss文件到字符串的方式，設置該窗口的QSS，具體代碼如下。
void startWin::setQss(QString filename)
{
//創(chuàng)建文件
QFile file(filename);
//只讀方式打開文件
file.open(QFile::ReadOnly);
//將文件轉換成文本流形式
QTextStream filetext(&file);
//將文本流中的所有字符存入新建字符串
QString stylesheet = filetext.readAll();
//設置該窗口的QSS
this->setStyleSheet(stylesheet);
//關閉文件
file.close();
}
4.界面換膚
- 提前創(chuàng)建好同一界面下，不同控件外觀的qss文件，如下圖所示。
以信號觸發(fā)的方式進行換膚，下圖為按鈕單擊信號觸發(fā)的槽函數(shù)
void setWin::changeQssColor()
{
//接收下拉框當前文本信息
QString str = this->combo->currentText();
//獲取主界面
startWin *start = startWin::getInstance();
//根據(jù)下拉框信息，設置不同皮膚
if(str == "天際藍")
{
start->setQss("./qss/start1.qss");
}
else if(str == "低調灰")
{
start->setQss("./qss/start2.qss");
}
else if(str == "清新綠")
{
start->setQss("./qss/start3.qss");
}
else if(str == "活力紫")
{
start->setQss("./qss/start4.qss");
}
//關閉設置界面
this->close();
}
五、完整源碼
1.main.cpp文件
#include "widget.h"
#include <QApplication>
#include "startwin.h"
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
startWin *w = startWin::getInstance();
w->show();
return a.exec();
}2.startwin.h文件
#ifndef STARTWIN_H
#define STARTWIN_H
#include <QWidget>
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QListWidget>
#include <QCloseEvent>
class startWin : public QWidget
{
Q_OBJECT
private:
explicit startWin(QWidget *parent = 0);
static startWin *start;
public:
static startWin *getInstance();
QLabel *bg,*leftPic,*rightPic,*topPic;
QLineEdit *edit1;
QPushButton *newBtn1,*newBtn2,*newBtn3,*newBtn4,*newBtn5,*newBtn6,*newBtn7,*newBtn8;
QVBoxLayout *leftLayout;
QHBoxLayout *topLayout;
QListWidget *videowins;
QWidget *leftWin,*topWin;
void closeEvent(QCloseEvent *event);
void setQss(QString filename);
signals:
public slots:
void settingSlot();
void choseSolt();
};
#endif // STARTWIN_H
3.startwin.cpp文件
#include <QDir>
#include <QDebug>
#include <QPixmap>
#include <QStringList>
#include <QMessageBox>
#include "startwin.h"
#include "setwin.h"
startWin* startWin::start = nullptr;
/***************************************************************
* 函數(shù)名稱: startWin
* 函數(shù)功能: 默認構造函數(shù)
* 參 數(shù): parent:父類窗口
* 返 回 值: 無
***************************************************************/
startWin::startWin(QWidget *parent) : QWidget(parent)
{
//設置主界面窗口大小
this->setFixedSize(1200,747);
//設置默認QSS
this->setQss("./qss/start3.qss");
//窗口背景圖(白底)
this->bg = new QLabel(this);
this->bg->setGeometry(0,0,1200,747);
this->bg->setPixmap(QPixmap("./picture/logic2.png"));
this->bg->setScaledContents(true);
//左窗口背景圖
this->leftPic = new QLabel(this);
this->leftPic->setObjectName("leftPic");
this->leftPic->setGeometry(0,0,181,747);
//右上角圖片
this->rightPic = new QLabel(this);
this->rightPic->setObjectName("rightPic");
this->rightPic->setGeometry(655,0,545,70);
//頂部圖片傳一log
this->topPic = new QLabel(this);
this->topPic->setGeometry(220,15,400,50);
this->topPic->setPixmap(QPixmap("./picture/log.png"));
this->topPic->setScaledContents(true);
/************創(chuàng)建左窗口************/
this->leftWin = new QWidget(this);
this->leftWin->setGeometry(20,0,150,747);
//創(chuàng)建垂直布局管理器
this->leftLayout = new QVBoxLayout(leftWin);
//壓縮布局
this->leftLayout->addStretch();
//創(chuàng)建按鈕內(nèi)容鏈表
QStringList leftList;
leftList << "全部" << "電視劇" << "電影" << "綜藝" << "兒童" << "動漫" << "游戲" << "紀錄片" << "體育" << "知識" << "直播" << "隨刻熱點";
//根據(jù)按鈕鏈表內(nèi)容生成按鈕，并添加到垂直布局管理器
for(int i=0;i<leftList.size();i++)
{
//新建按鈕
QPushButton *newBtn = new QPushButton(leftList.at(i));
//設置按鈕的objectname
newBtn->setObjectName("newBtn");
//將按鈕添加到垂直布局管理器
leftLayout->addWidget(newBtn);
//設置各按鈕之間的間隔
leftLayout->addSpacing(16);
//創(chuàng)建按鈕槽函數(shù)
connect(newBtn,SIGNAL(clicked(bool)),this,SLOT(choseSolt()));
}
//設置按鈕與窗口底部的間隔
leftLayout->addSpacing(10);
/************創(chuàng)建上窗口************/
this->topWin = new QWidget(this);
this->topWin->setGeometry(181,0,1030,70);
//創(chuàng)建水平布局管理器
this->topLayout = new QHBoxLayout(topWin);
this->topLayout->addStretch();
//登錄注冊按鈕
this->newBtn6 = new QPushButton("登錄");
this->newBtn6->setFixedSize(50,30);
this->topLayout->addWidget(newBtn6);
this->topLayout->addSpacing(10);
this->newBtn7 = new QPushButton("注冊");
this->newBtn7->setFixedSize(50,30);
this->topLayout->addWidget(newBtn7);
this->topLayout->addSpacing(10);
this->newBtn8 = new QPushButton("個人中心",this);
this->newBtn8->setGeometry(690,20,80,30);
this->newBtn8->hide();
//創(chuàng)建輸入框
this->edit1 = new QLineEdit();
this->edit1->setFixedSize(150,30);
this->topLayout->addWidget(edit1);
this->topLayout->addSpacing(10);
//創(chuàng)建搜索按鈕，并添加到水平布局管理器
this->newBtn1 = new QPushButton();
this->newBtn1->setObjectName("newBtn1");
this->newBtn1->setFixedSize(30,30);
this->topLayout->addWidget(newBtn1);
this->topLayout->addSpacing(10);
//創(chuàng)建設置按鈕，并添加到水平布局管理器
this->newBtn2 = new QPushButton();
this->newBtn2->setObjectName("newBtn2");
this->newBtn2->setFixedSize(30,30);
this->topLayout->addWidget(newBtn2);
this->topLayout->addSpacing(10);
connect(this->newBtn2,SIGNAL(clicked(bool)),this,SLOT(settingSlot()));
//創(chuàng)建縮小按鈕，并添加到水平布局管理器
this->newBtn3 = new QPushButton();
this->newBtn3->setObjectName("newBtn3");
this->newBtn3->setFixedSize(30,30);
this->topLayout->addWidget(newBtn3);
this->topLayout->addSpacing(10);
//創(chuàng)建放大按鈕，并添加到水平布局管理器
this->newBtn4 = new QPushButton();
this->newBtn4->setObjectName("newBtn4");
this->newBtn4->setFixedSize(30,30);
this->topLayout->addWidget(newBtn4);
this->topLayout->addSpacing(10);
//創(chuàng)建關閉按鈕，并添加到水平布局管理器
this->newBtn5 = new QPushButton();
this->newBtn5->setObjectName("newBtn5");
this->newBtn5->setFixedSize(30,30);
this->topLayout->addWidget(newBtn5);
this->topLayout->addSpacing(10);
//創(chuàng)建QListWidget窗口
this->videowins = new QListWidget(this);
this->videowins->setGeometry(181,90,1020,657);
this->videowins->setViewMode(QListView::IconMode);
this->videowins->setMovement(QListView::Static);
this->videowins->setResizeMode(QListView::Adjust);
this->videowins->setIconSize(QSize(1000,500));
this->videowins->setSpacing(33);
//存儲每個文件夾路徑
QString paths[12] = {"./picture/btn12","./picture/btn11","./picture/btn10","./picture/btn9","./picture/btn8","./picture/btn7","./picture/btn6",
"./picture/btn5","./picture/btn4","./picture/btn3","./picture/btn2","./picture/btn1"};
//遍歷各個文件夾顯示所有圖片信息
for(int i=0;i<12;i++)
{
//Qir定義文件路徑
QDir dir(paths[i]);
//創(chuàng)建文件篩選鏈表
QStringList moviefilenames;
//添加文件后綴為.png的篩選類型
moviefilenames << "*.png" << "*.jpg";
//創(chuàng)建并初始化符合要求的圖片到String鏈表中
QStringList files = dir.entryList(moviefilenames,QDir::Files|QDir::Readable,QDir::Name);
//遍歷文件鏈表,將每張圖片路徑和圖片名作為QListWidget的項目添加到QListWidget窗口中
for(int j = 0; j < files.size(); ++j)
{
QString moviename = files.at(j).mid(0,files.at(j).size()-4);
QListWidgetItem *newitem = new QListWidgetItem(QIcon(QPixmap(paths[i]+"/"+files.at(j))),moviename);
// newitem->setSizeHint(QSize(,400)); //設置每個item大小
this->videowins->addItem(newitem);
}
}
}
startWin *startWin::getInstance()
{
//判斷系統(tǒng)是否已經(jīng)有這個單例，如果有則返回，如果沒有則創(chuàng)建。
if(startWin::start == nullptr)
{
startWin::start = new startWin();
}
return startWin::start;
}
void startWin::closeEvent(QCloseEvent *event)
{
//創(chuàng)建提示窗口
QMessageBox *closeMessage = new QMessageBox(QMessageBox::Information,"溫馨提示","確認是否退出");
//顯示提示窗口
closeMessage->show();
//設置提示窗口按鈕
closeMessage->setStandardButtons(QMessageBox::Ok|QMessageBox::Cancel);
//接收關閉返回值
int rec = closeMessage->exec();
//若點擊確定按鈕
if(rec == QMessageBox::Ok)
{
event->accept();
}
//若點擊取消按鈕
else
{
event->ignore();
}
}
void startWin::choseSolt()
{
//獲取觸發(fā)槽函數(shù)的信號
QString btnText = ((QPushButton*)sender())->text();
qDebug() << btnText;
//定義文件路徑
QString path;
//根據(jù)點擊不同按鈕，設置不同文件路徑
if(btnText == "全部")
{
path = "./picture/all";
}
if(btnText == "電視劇")
{
path = "./picture/btn1";
}
if(btnText == "電影")
{
path = "./picture/btn2";
}
if(btnText == "綜藝")
{
path = "./picture/btn3";
}
if(btnText == "兒童")
{
path = "./picture/btn4";
}
if(btnText == "動漫")
{
path = "./picture/btn5";
}
if(btnText == "游戲")
{
path = "./picture/btn6";
}
if(btnText == "紀錄片")
{
path = "./picture/btn7";
}
if(btnText == "體育")
{
path = "./picture/btn8";
}
if(btnText == "知識")
{
path = "./picture/btn9";
}
if(btnText == "直播")
{
path = "./picture/btn10";
}
if(btnText == "隨刻熱點")
{
path = "./picture/btn11";
}
//獲取QListWidget的item數(shù)
int count = this->videowins->count();
//刪除QListWidget所有item
for(int i=0;i<count;i++)
{
QListWidgetItem *item = this->videowins->takeItem(0);
delete(item);
}
//將對應路徑下的所有圖片加載到QListWidget中
QDir dir(path);
QStringList moviefilenames;
moviefilenames << "*.png" << "*.jpg";
QStringList files = dir.entryList(moviefilenames,QDir::Files|QDir::Readable,QDir::Name);
for(int i = 0; i < files.size(); ++i)
{
QString moviename = files.at(i).mid(0,files.at(i).size()-4);
QListWidgetItem *newitem = new QListWidgetItem(QIcon(QPixmap(path+"/"+files.at(i))),moviename);
//newitem->setSizeHint(QSize(240,200)); //設置每個item大小
videowins->addItem(newitem);
}
}
/***************************************************************
* 函數(shù)名稱: setQss
* 函數(shù)功能: 主界面皮膚設置
* 參 數(shù): 無
* 返 回 值: 無
***************************************************************/
void startWin::setQss(QString filename)
{
QFile file(filename);
file.open(QFile::ReadOnly);
QTextStream filetext(&file);
QString stylesheet = filetext.readAll();
this->setStyleSheet(stylesheet);
file.close();
}
/***************************************************************
* 函數(shù)名稱: settingSlot
* 函數(shù)功能: 進入設置界面
* 參 數(shù): 無
* 返 回 值: 無
***************************************************************/
void startWin::settingSlot()
{
setWin *setting = setWin::getInstance();
setting->setWindowFlags(Qt::WindowStaysOnBottomHint); //窗口置于頂部
setting->setWindowModality(Qt::ApplicationModal); //阻塞除當前窗體之外的所有的窗體
setting->show();
}
4.setwin.h文件
#ifndef SETWIN_H
#define SETWIN_H
#include <QWidget>
#include <QLabel>
#include <QPushButton>
#include <QComboBox>
class setWin : public QWidget
{
Q_OBJECT
private:
explicit setWin(QWidget *parent = 0);
static setWin *setting;
public:
static setWin *getInstance();
QLabel *label;
QPushButton *pushButton;
QComboBox *combo;
signals:
public slots:
void changeQssColor();
};
#endif // SETWIN_H
5.setwin.cpp文件
#include <QStringList>
#include "setwin.h"
#include "startWin.h"
setWin* setWin::setting = nullptr;
setWin::setWin(QWidget *parent) : QWidget(parent)
{
//設置窗口大小
this->setFixedSize(300,200);
//創(chuàng)建標簽
this->label = new QLabel("皮膚設置",this);
this->label->setGeometry(125,20,80,50);
//創(chuàng)建按鈕
this->pushButton = new QPushButton("確定",this);
this->pushButton->setGeometry(210,90,50,30);
connect(this->pushButton,SIGNAL(clicked(bool)),this,SLOT(changeQssColor()));
//創(chuàng)建下拉框
this->combo = new QComboBox(this);
this->combo->move(50,90);
this->combo->setFixedSize(150,30);
QStringList QssColor;
QssColor << "清新綠" << "天際藍" << "低調灰" << "活力紫";
this->combo->addItems(QssColor);
}
setWin *setWin::getInstance()
{
//判斷系統(tǒng)是否已經(jīng)有這個單例，如果有則返回，如果沒有則創(chuàng)建。
if(setWin::setting == nullptr)
{
setWin::setting = new setWin();
}
return setWin::setting;
}
void setWin::changeQssColor()
{
//接收下拉框當前文本信息
QString str = this->combo->currentText();
//獲取主界面
startWin *start = startWin::getInstance();
//根據(jù)下拉框信息，設置不同皮膚
if(str == "天際藍")
{
start->setQss("./qss/start1.qss");
}
else if(str == "低調灰")
{
start->setQss("./qss/start2.qss");
}
else if(str == "清新綠")
{
start->setQss("./qss/start3.qss");
}
else if(str == "活力紫")
{
start->setQss("./qss/start4.qss");
}
//關閉設置界面
this->close();
}
6.圖片素材及qss文件
關注博主并在該篇文章下方評論寫下郵箱地址，圖片素材及相應的qss文件將以壓縮包形式發(fā)送。
附：QSS樣式表屬性及含義
QSS樣式表屬性可查看：CSDN博主「我是唐」的原創(chuàng)文章《Qt_QSS 樣式表屬性大全》，原文鏈接：https://blog.csdn.net/qq_41673920/article/details/97116143。
總結
以上就是QSS樣式表實現(xiàn)界面換膚的所有內(nèi)容，希望大家閱讀后都能有所收獲！原創(chuàng)不易，轉載請標明出處，若文章出現(xiàn)有誤之處，歡迎讀者留言指正批評！
到此這篇關于QSS樣式表實現(xiàn)界面換膚的文章就介紹到這了,更多相關QSS樣式表內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了C BlowFish對稱加密算法詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-08-08
C語言中qsort函數(shù)用法及用冒泡排序實現(xiàn)
qsort函數(shù)是由C語言提供的標準庫函數(shù), 它的實現(xiàn)思想是快速排序。這篇文章主要介紹了C語言中qsort函數(shù)用法及用冒泡排序實現(xiàn)qsort函數(shù)功能，需要的可以參考一下2022-10-10
大家好，本篇文章主要講的是C++中的Lambda函數(shù)詳解，感興趣的同學趕快來看一看吧，對你有幫助的話記得收藏一下，方便下次瀏覽2021-12-12
cocos2dx-3.10 C++實現(xiàn)滾動數(shù)字
這篇文章主要為大家詳細介紹了cocos2dx-3.10 C++實現(xiàn)滾動數(shù)字效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
使用C++編程發(fā)送HTTP請求通常需要使用第三方的HTTP庫或框架,在C++中,有幾個受歡迎的HTTP庫可供選擇,例如Curl、Boost.Beast和cpp-httplib,另外,也可以自己實現(xiàn)socket來發(fā)送http請求,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了C++ 數(shù)字的反轉實現(xiàn)實例的相關資料,需要的朋友可以參考下2017-06-06
這篇文章主要為大家詳細介紹了使用C語言實現(xiàn)三子棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了解讀C++編譯報錯有跡可尋，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
在c++Template中很多地方都用到了typename與class這兩個關鍵字，而且好像可以替換，是不是這兩個關鍵字完全一樣呢?下面這篇文章主要給大家介紹了關于c++模板中class與typename的相關資料，需要的朋友可以參考下。2017-07-07
求解微分方程的數(shù)值解一般使用MATLAB等數(shù)值計算軟件，其實C++也可以求解微分方程，需要用到odeint庫，它是boost庫的一部分。官方教程和示例比較晦澀，本文力求用較短的篇幅介紹它的基本用法,需要的朋友可以參考下面文章的具體內(nèi)容2021-09-09