QSS樣式表實現(xiàn)界面換膚功能

第QSS樣式表實現(xiàn)界面換膚功能目錄前言一、實現(xiàn)效果二、QSS簡介及用法1.什么是QSS2.怎么使用QSS三、QSS用法一：單個控件調(diào)用setStyleSheet函數(shù)四、QSS用法二：編寫單個界面.qss文件的并讀取1.創(chuàng)建qss文件2.qss文件語法格式3.讀取qss文件4.界面換膚五、完整源碼1.main.cpp文件2.startwin.h文件3.startwin.cpp文件4.setwin.h文件5.setwin.cpp文件6.圖片素材及qss文件總結

前言

本篇，我們將對QSS樣式表進行簡單介紹，并且使用QSS樣式表實現(xiàn)界面換膚功能。

一、實現(xiàn)效果

通過點擊主界面的設置按鈕，進入皮膚設置界面。選擇想要設置的皮膚，并單擊確定就能實現(xiàn)界面換膚。

二、QSS簡介及用法

1.什么是QSS

QSS是QtStyleSheet的簡稱，也叫Qt樣式表。在操作Qt制作軟件界面的過程中，允許我們使用QSS自定義小部件的外觀，以及通過子類化QStyle實現(xiàn)想要的功能界面。

2.怎么使用QSS

QSS共有兩種使用方法第一種是窗口內(nèi)的單個控件直接調(diào)用setStyleSheet函數(shù)，將某個控件的外觀進行自定義操作第二種是編寫后綴為.qss文件，通過讀取.qss文件的方式，批量更改窗口內(nèi)所有或部分控件外觀

三、QSS用法一：單個控件調(diào)用setStyleSheet函數(shù)

友情提示：下拉至文章末尾可以查看樣式表屬性及其含義的鏈接調(diào)用語句：控件指針-setStyleSheet(控件類型{屬性1：屬性值;屬性2：屬性值;})；調(diào)用實例如下：

//創(chuàng)建標簽

QLabel*title=newQLabel("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ù)設置后代選擇器QDialogQPushButton所有QDialog容器中包含的QPushButton（直接或間接）子選擇器QDialogQPushButton所有QDialog容器下面的QPushButton（直接）

.qss文件實例

3.讀取qss文件

我們可以在窗口中，以讀入qss文件到字符串的方式，設置該窗口的QSS，具體代碼如下。

voidstartWin::setQss(QStringfilename)

//創(chuàng)建文件

QFilefile(filename);

//只讀方式打開文件

file.open(QFile::ReadOnly);

//將文件轉換成文本流形式

QTextStreamfiletext(file);

//將文本流中的所有字符存入新建字符串

QStringstylesheet=filetext.readAll();

//設置該窗口的QSS

this-setStyleSheet(stylesheet);

//關閉文件

file.close();

4.界面換膚

提前創(chuàng)建好同一界面下，不同控件外觀的qss文件，如下圖所示。

以信號觸發(fā)的方式進行換膚，下圖為按鈕單擊信號觸發(fā)的槽函數(shù)

voidsetWin::changeQssColor()

//接收下拉框當前文本信息

QStringstr=this-combo-currentText();

//獲取主界面

startWin*start=startWin::getInstance();

//根據(jù)下拉框信息，設置不同皮膚

if(str=="天際藍")

start-setQss("./qss/start1.qss");

elseif(str=="低調(diào)灰")

start-setQss("./qss/start2.qss");

elseif(str=="清新綠")

start-setQss("./qss/start3.qss");

elseif(str=="活力紫")

start-setQss("./qss/start4.qss");

//關閉設置界面

this-close();

五、完整源碼

1.main.cpp文件

#include"widget.h"

#includeQApplication

#include"startwin.h"

intmain(intargc,char*argv[])

QApplicationa(argc,argv);

startWin*w=startWin::getInstance();

w-show();

returna.exec();

}

2.startwin.h文件

#ifndefSTARTWIN_H

#defineSTARTWIN_H

#includeQWidget

#includeQLabel

#includeQLineEdit

#includeQPushButton

#includeQHBoxLayout

#includeQVBoxLayout

#includeQListWidget

#includeQCloseEvent

classstartWin:publicQWidget

Q_OBJECT

private:

explicitstartWin(QWidget*parent=0);

staticstartWin*start;

public:

staticstartWin*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;

voidcloseEvent(QCloseEvent*event);

voidsetQss(QStringfilename);

signals:

publicslots:

voidsettingSlot();

voidchoseSolt();

#endif//STARTWIN_H

3.startwin.cpp文件

#includeQDir

#includeQDebug

#includeQPixmap

#includeQStringList

#includeQMessageBox

#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=newQLabel(this);

this-bg-setGeometry(0,0,1200,747);

this-bg-setPixmap(QPixmap("./picture/logic2.png"));

this-bg-setScaledContents(true);

//左窗口背景圖

this-leftPic=newQLabel(this);

this-leftPic-setObjectName("leftPic");

this-leftPic-setGeometry(0,0,181,747);

//右上角圖片

this-rightPic=newQLabel(this);

this-rightPic-setObjectName("rightPic");

this-rightPic-setGeometry(655,0,545,70);

//頂部圖片傳一log

this-topPic=newQLabel(this);

this-topPic-setGeometry(220,15,400,50);

this-topPic-setPixmap(QPixmap("./picture/log.png"));

this-topPic-setScaledContents(true);

/************創(chuàng)建左窗口************/

this-leftWin=newQWidget(this);

this-leftWin-setGeometry(20,0,150,747);

//創(chuàng)建垂直布局管理器

this-leftLayout=newQVBoxLayout(leftWin);

//壓縮布局

this-leftLayout-addStretch();

//創(chuàng)建按鈕內(nèi)容鏈表

QStringListleftList;

leftList"全部""電視劇""電影""綜藝""兒童""動漫""游戲""紀錄片""體育""知識""直播""隨刻熱點";

//根據(jù)按鈕鏈表內(nèi)容生成按鈕，并添加到垂直布局管理器

for(inti=0;ileftList.size();i++)

//新建按鈕

QPushButton*newBtn=newQPushButton(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=newQWidget(this);

this-topWin-setGeometry(181,0,1030,70);

//創(chuàng)建水平布局管理器

this-topLayout=newQHBoxLayout(topWin);

this-topLayout-addStretch();

//登錄注冊按鈕

this-newBtn6=newQPushButton("登錄");

this-newBtn6-setFixedSize(50,30);

this-topLayout-addWidget(newBtn6);

this-topLayout-addSpacing(10);

this-newBtn7=newQPushButton("注冊");

this-newBtn7-setFixedSize(50,30);

this-topLayout-addWidget(newBtn7);

this-topLayout-addSpacing(10);

this-newBtn8=newQPushButton("個人中心",this);

this-newBtn8-setGeometry(690,20,80,30);

this-newBtn8-hide();

//創(chuàng)建輸入框

this-edit1=newQLineEdit();

this-edit1-setFixedSize(150,30);

this-topLayout-addWidget(edit1);

this-topLayout-addSpacing(10);

//創(chuàng)建搜索按鈕，并添加到水平布局管理器

this-newBtn1=newQPushButton();

this-newBtn1-setObjectName("newBtn1");

this-newBtn1-setFixedSize(30,30);

this-topLayout-addWidget(newBtn1);

this-topLayout-addSpacing(10);

//創(chuàng)建設置按鈕，并添加到水平布局管理器

this-newBtn2=newQPushButton();

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=newQPushButton();

this-newBtn3-setObjectName("newBtn3");

this-newBtn3-setFixedSize(30,30);

this-topLayout-addWidget(newBtn3);

this-topLayout-addSpacing(10);

//創(chuàng)建放大按鈕，并添加到水平布局管理器

this-newBtn4=newQPushButton();

this-newBtn4-setObjectName("newBtn4");

this-newBtn4-setFixedSize(30,30);

this-topLayout-addWidget(newBtn4);

this-topLayout-addSpacing(10);

//創(chuàng)建關閉按鈕，并添加到水平布局管理器

this-newBtn5=newQPushButton();

this-newBtn5-setObjectName("newBtn5");

this-newBtn5-setFixedSize(30,30);

this-topLayout-addWidget(newBtn5);

this-topLayout-addSpacing(10);

//創(chuàng)建QListWidget窗口

this-videowins=newQListWidget(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);

//存儲每個文件夾路徑

QStringpaths[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(inti=0;ii++)

//Qir定義文件路徑

QDirdir(paths[i]);

//創(chuàng)建文件篩選鏈表

QStringListmoviefilenames;

//添加文件后綴為.png的篩選類型

moviefilenames"*.png""*.jpg";

//創(chuàng)建并初始化符合要求的圖片到String鏈表中

QStringListfiles=dir.entryList(moviefilenames,QDir::Files|QDir::Readable,QDir::Name);

//遍歷文件鏈表,將每張圖片路徑和圖片名作為QListWidget的項目添加到QListWidget窗口中

for(intj=0;jfiles.size();++j)

QStringmoviename=files.at(j).mid(0,files.at(j).size()-4);

QListWidgetItem*newitem=newQListWidgetItem(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=newstartWin();

returnstartWin::start;

voidstartWin::closeEvent(QCloseEvent*event)

//創(chuàng)建提示窗口

QMessageBox*closeMessage=newQMessageBox(QMessageBox::Information,"溫馨提示","確認是否退出");

//顯示提示窗口

closeMessage-show();

//設置提示窗口按鈕

closeMessage-setStandardButtons(QMessageBox::Ok|QMessageBox::Cancel);

//接收關閉返回值

intrec=closeMessage-exec();

//若點擊確定按鈕

if(rec==QMessageBox::Ok)

event-accept();

//若點擊取消按鈕

else

event-ignore();

voidstartWin::choseSolt()

//獲取觸發(fā)槽函數(shù)的信號

QStringbtnText=((QPushButton*)sender())-text();

qDebug()btnText;

//定義文件路徑

QStringpath;

//根據(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ù)

intcount=this-videowins-count();

//刪除QListWidget所有item

for(inti=0;icount;i++)

QListWidgetItem*item=this-videowins-takeItem(0);

delete(item);

//將對應路徑下的所有圖片加載到QListWidget中

QDirdir(path);

QStringListmoviefilenames;

moviefilenames"*.png""*.jpg";

QStringListfiles=dir.entryList(moviefilenames,QDir::Files|QDir::Readable,QDir::Name);

for(inti=0;ifiles.size();++i)

QStringmoviename=files.at(i).mid(0,files.at(i).size()-4);

QListWidgetItem*newitem=newQListWidgetItem(QIcon(QPixmap(path+"/"+files.at(i))),moviename);

//newitem-setSizeHint(QSize(240,200));//設置每個item大小

videowins-addItem(newitem);

/***************************************************************

*函數(shù)名稱:setQss

*函數(shù)功能:主界面皮膚設置

*參數(shù):無

*返回值:無

***************************************************************/

voidstartWin::setQss(QStringfilename)

QFilefile(filename);

file.open(QFile::ReadOnly);

QTextStreamfiletext(file);

QStringstylesheet=filetext.readAll();

this-setStyleSheet(stylesheet);

file.close();

/***************************************************************

*函數(shù)名稱:settingSlot

*函數(shù)功能:進入設置界面

*參數(shù):無

*返回值:無

***************************************************************/

voidstartWin::settingSlot()

setWin*setting=setWin::getInstance();

setting-setWindowFlags(Qt::WindowStaysOnBottomHint);//窗口置于頂部

setting-setWindowModality(Qt::ApplicationModal);//阻塞除當前窗體之外的所有的窗體

setting-show();

4.setwin.h文件

#ifndefSETWIN_H

#defineSETWIN_H

#includeQWidget

#includeQLabel

#includeQPushButton

#includeQComboBox

classsetWin:publicQWidget

Q_OBJECT

private:

explicitsetWin(QWidget*parent=0);

staticsetWin*setting;

public:

staticsetWin*getInstance();

QLabel*label;

QPushButton*pushButton;

QComboBox*combo;

signals:

publicslots:

voidchangeQssColor();

#endif//SETWIN_H

5.setwin.cpp文件

#includeQStringList

#include"setwin.h"

#include"startWin.h"

setWin*setWin::setting=nullptr;

setWin::setWin(QWidget*parent):QWidget(parent)

//設置窗口大小

this-setFixedSize(300,200);

//創(chuàng)建標