樣式表的組成

樣式表由兩大元素組成：選擇器和聲明。選擇器實際上可以理解為對象，聲明則是對該對象的屬性的設置。

樣式表的使用

方法一：在代碼中調用setStyleSheet()來設置樣式；
方法二：通過加載qss文件來設置樣式。

樣式表的簡單使用介紹

setStyleSheet()的簡單應用：
【1】通過QApplication的對象調用；
（1）創建QSS文件——myqss.qss;
創建文本文件，存入源文件所在的同級目錄下，修改其文件名為myqss.qss。
（2）用QtCreate打開該工程，在項目名上右鍵點擊添加新文件，選擇Qt資源文件，按照提示創建資源文件；
（3）在創建的資源文件上右鍵選擇添加前綴，之后添加該項目所用到的資源文件，即圖片，添加之后保存；
（4）在main.cpp文件中添加如下代碼。

#include <QApplication> #include <QFile> int main(int argc,char *argv[]) {QApplication app(argc,argv);QFile file(".\myqss.qss");/*QSS文件所在的路徑*/file.open(QIODevice::ReadOnly);if(file.isOpen()){QString strFile = file.readAll();app.setStyleSheet(strFile);file.close();/*記得關閉QSS文件*/}return app.exec(); }

備注：
此方法通過在主函數中讀取QSS文件，來設置界面的樣式，可以將整個項目中各界面對應的樣式設置都都在一個QSS文件下

qss文件的大體介紹

只有一個界面的QSS文件
內容形式：控件類名#objectName{ … }
如只有一個界面，界面上有一個QPushButton控件，在其對應的qss文件中可以編寫其內容為下：

/*創建應用程序，基類為QWidget,在其ui文件中將QWidget的objectName更改為WidgetPainter，拖入控件QPushButton將其ObjectName更改為pushButtonPainter，現在qss文件中設置按鈕的樣式，按鈕未被點擊的狀態和按鈕被點擊的狀態*/ /*畫筆未被點擊*/ QWidget#WidgetPainter>QPushButton#pushButtonPainter{background-color:transparent;image:url(:/image/painterUnchecked.png); }/*畫筆被點擊*/ QWidget#WidgetPainter>QPushButton#pushButtonPainter:pressed{background-color:transparent;image:url(:/image/painterChecked.png); }

因為整個應用程序只有一個界面，可以將整個項目中所有控件的樣式設置都寫到一個qss文件中，在main函數中加載qss文件，給界面設置樣式。
2. 多界面的QSS文件
可以將每一個界面寫一個qss文件，然后在各界面對應的類中的構造函數里加載qss文件；也可以將所有界面的樣式設置寫到一個qss文件中，在main函數中加載qss文件。

/*將信號源名字界面與系統設置界面的樣式設置寫道同一個qss文件中，對于部件間關系的歸屬必須鋝清，否則會達不到預想的界面效果，下面是在一個QWidget(objectName為SignalSource)上拖入一個QWidget(objectName為widget_title)，再在objectName為widget_title的QWidget上拖入標簽QLabel和按鈕QPushButton,即QLabel和QPushButton為widget_title的直接子部件，widget_title為SignalSource的直接子部件，之間子部件之間使用>,控件類與控件的名稱之間使用#，*/ /***************************信號源名字子頁面**************/ /*頁面的背景*/ QWidget#SignalSource{background-color:#FF2D3274; }/*頁面標題欄*/ QWidget#SignalSource>QWidget#widget_title{background-color:#FF262B63; }/*信號源的名字*/ QWidget#widget_title>QLabel#label_name{color: rgb(255, 255, 255);font-size:16px;font-family:Microsoft YaHei; }/*控制按鈕*/ QWidget#widget_title>QPushButton#pushButton_control{background-color:transparent;image:url(:/new/prefix1/images/contrl.png);border-style:flat; }/*控制按鈕被點擊狀態*/ QWidget#widget_title>QPushButton#pushButton_control:checked{image:url(:/new/prefix1/images/finishControl.png); }/*上屏按鈕*/ QWidget#widget_title>QPushButton#pushButton_upscr{background-color:transparent;image:url(:/new/prefix1/images/upsrc.png);border-style:flat; }/*上屏按鈕被點擊狀態*/ QWidget#widget_title>QPushButton#pushButton_upscr:checked{image:url(:/new/prefix1/images/downscr.png); }/*設置按鈕*/ QWidget#widget_title>QPushButton#pushButton_set{ background-color:transparent;image:url(:/new/prefix1/images/seting.png);border-style:flat; }/*設置按鈕鼠標按下狀態*/ QWidget#widget_title>QPushButton#pushButton_set:checked{image:url(:/new/prefix1/images/seting2.png); }/*全屏按鈕*/ QWidget#widget_title>QPushButton#pushButton_fullscr{background-color:transparent;image:url(:/new/prefix1/images/fullscr.png);border-style:flat; }/*全屏按鈕鼠標按下狀態*/ QWidget#widget_title>QPushButton#pushButton_fullscr:checked{image:url(:/new/prefix1/images/fullsrc2.png); }/*******************系統設置****************/ /*整體窗口背景#FF2E3274*/ QDialog#SystemSet{background-color:#FF2E3274; /* box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1);*/border-radius: 5px 5px 5px 5px; }/*窗體頭背景*/ QDialog#SystemSet>QWidget#widget_title{background-color:#FF262B63; }/*系統設置標題*/ QWidget#widget_title>QLabel#label_title{color:#FFFFFFFF;font-family:MicrosoftYaHei;font-size:16px; }/*系統設置圖標*/ QWidget#widget_title>QLabel#label_sysSet{background-color:transparent;image:url(:/new/prefix1/images/sysset.png); }/*默認設置按鈕*/ QWidget#widget_title>QPushButton#pushButton_defaultset{color:#FFFFFFFF;font-family:MicrosoftYaHei;font-size:16px; background-color:#FF282C66;border-top-left-radius:5px;border-top-right-radius:5px;border-style:flat; }/*默認設置按鈕被點擊*/ QWidget#widget_title>QPushButton#pushButton_defaultset:pressed{color:#FFFFFFFF;background-color:#FF008AFF;font-family:MicrosoftYaHei;font-size:16px; }/*默認設置按鈕旁邊白線*/ QWidget#widget_title>QLabel#label1{background-color:#FFFFFF; border-radius: 1px; opacity: 0.5; }/*高級設置按鈕*/ QWidget#widget_title>QPushButton#pushButton_advanceset{color:#FFFFFFFF;font-family:MicrosoftYaHei;font-size:16px; background-color: #FF282C66;border-top-left-radius:5px;border-top-right-radius:5px;border-style:flat; }/*高級設置按鈕被點擊*/ QWidget#widget_title>QPushButton#pushButton_advanceset:pressed{color:#FFFFFFFF;background-color:#FF008AFF;font-family:MicrosoftYaHei;font-size:16px; }/*高級設置按鈕旁邊白線*/ QWidget#widget_title>QLabel#label2{background-color:#FFFFFF; border-radius: 1px; opacity: 0.5; }/*ip設置按鈕*/ QWidget#widget_title>QPushButton#pushButton_ipset{color:#FFFFFFFF;font-family:MicrosoftYaHei;font-size:16px; background-color: #FF282C66; border-top-left-radius:5px;border-top-right-radius:5px;border-style:flat; }/*ip設置按鈕被點擊*/ QWidget#widget_title>QPushButton#pushButton_ipset:pressed{color:#FFFFFFFF;background-color:#FF008AFF;font-family:MicrosoftYaHei;font-size:16px; }QWidget>QPushButton#pushButton_close{background-color:transparent;image:url(:/new/prefix1/images/close.png); }

以上是對QSS使用過程中的一些簡單的總結。涉及更多的內容還需自己挖掘，個人理解在多界面共用一個qss文件時，部件之間關系十分重要。
在使用圖片作為整個界面的背景圖片時，需要在QWidget中拖入一個QWidget，在拖入的QWidget中設置背景透明，背景圖片，并且需要將整個界面的QWidget設置為透明，無標題，否則達不到想要的效果
如下面的qss文件中所寫：

/*提示窗口的整體需要加載一張圖片，先在QDialog中拖入控件QWidget(objectName為widget)，在程序設置QDialog的沒有標題和背景透明，在qss文件中編寫widget背景透明，加載背景圖片*/ /****************通知提示窗口*************/ /*界面的整體背景rgba(0,255,255,255)*/ QDialog#InformDialog>QWidget#widget{ background-color:transparent;background-image:url(:/new/prefix1/images/informbackground.png); }

image,backgroun-image,border-image的區別，image的不會改變圖片的大小，不會拉伸和壓縮圖片，backgroun-image一般用于整個控件的背景圖片，無法隨部件的大小自動縮放，border-image為可以隨部件的大小自動縮放

子部件的樣式設置

控件的子控件設置樣式簡單的貼一些自己之前做過的，更多還需自己學習。

/*QComboBox控件的子部件的簡單設置下拉的界面，下拉界面每一項，下拉按鈕的樣式，QSpinBox,QCheckBox,QRadioButton子部件的設置*/ /*下拉按鈕*/ QWidget#systemdefaltSet>QComboBox{ background-color: #121650;border-radius: 6px;font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #FFFFFF; }/*下拉按鈕*/ QWidget#systemdefaltSet>QComboBox::down-arrow{ image:url(:/new/prefix1/image/comboxDown.png); }/*下拉按鈕隱藏邊框*/ QWidget#systemdefaltSet>QComboBox::drop-down{ border:none;top:4px;left:-15px; }/*下拉窗體*/ QWidget#systemdefaltSet>QComboBox QAbstractItemView{ background-color:#55557f;outline: 1px solid #ffaa7f; /* 選定項的虛框 */selection-background-color:#121650;color:#FFFFFF; }/*下拉窗體每一項*/ QWidget#systemdefaltSet>QComboBox QAbstractItemView::item{ height:50px; } /*行列按鈕最初形態#spinBoxrow*/ advanceSet>QSpinBox{ background-color: #12164F;border-radius: 6px; font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #FFFFFF; }/*行列按鈕被點擊之后整體輪廓設置*/ advanceSet>QSpinBox:pressed{ background-color: #121650;border: 1px solid #00FFFF;border-radius: 6px; }/*行列按鈕上箭頭沒有被點擊的狀態:unchecked*/ advanceSet>QSpinBox::up-button{ image:url(:/new/prefix1/image/spinupbtnUnchecked.png); }/*行列按鈕下箭頭沒有被點擊的狀態:unchecked*/ advanceSet>QSpinBox::down-button{ image:url(:/new/prefix1/image/spindownbtnUnchecked.png); }/*行列按鈕上箭頭被點擊的狀態*/ advanceSet>QSpinBox::up-button:pressed{ image:url(:/new/prefix1/image/spinupbtnChecked.png); border:none; }/*行列按鈕下箭頭被點擊的狀態*/ advanceSet>QSpinBox::down-button:pressed{ image:url(:/new/prefix1/image/spindownbtnChecked.png); border:none; }/*此界面上所有的單選按鈕最初狀態*/ advanceSet>QRadioButton{font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #FFFFFF; }/*此界面上所有的單選按鈕的子部件的最初狀態（未點擊狀態）*/ advanceSet>QRadioButton::indicator{image:url(:/new/prefix1/image/radioUnchecked.png); }/*此界面上所有的單選按鈕的子部件的被點擊后的狀態（點擊狀態）*/ advanceSet>QRadioButton::indicator:checked{image:url(:/new/prefix1/image/radioChecked.png); }/*此界面上所有的復選框最初時的狀態*/ advanceSet>QCheckBox{font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #FFFFFF; }/*此界面上所有的復選框子部件未被點擊時的狀態*/ advanceSet>QCheckBox::indicator{background-color:transparent;image:url(:/new/prefix1/image/checkbtnUnchecked.png); }/*此界面上所有的復選框子部件被點擊時的狀態*/ advanceSet>QCheckBox::indicator:checked{image:url(:/new/prefix1/image/checkbtnChecked.png); }

多個相同類型的控件的樣式相同

若同一類型的控件的樣式要求一致，可以一起設置。

界面上有多個相同類型的控件，但是有幾個控件的樣式要求一致，可以采取如下設置；

/*界面中還有其它的QPushButton，但是有兩個QPushButton的樣式設置要求一致，可以一起設置*/ /*確定按鈕,取消按鈕*/ QWidget#widget>QPushButton#pushButton_confirm,QPushButton#pushButton_cancel{ font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #FFFFFF;background-color:#FF080C3E; border: 1px solid #FFFFFF;border-radius: 6px; }/*確定按鈕,取消按鈕被點擊狀態*/ QWidget#widget>QPushButton#pushButton_confirm:pressed,QPushButton#pushButton_cancel:pressed{font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #000438; background-color: #00FFFF;opacity: 0.9;border-radius: 6px; }

2.若界面上所有同一類型的控件的樣式都要求設置一致，可以不用指明控件名稱，直接設置。

/*界面上所有的QPushButton控件的樣式一致*/ InformDialog>QPushButton{color:#FFFFFF;background-color:#FF2D3274;border: 1px solid #FFFFFF;border-radius: 6px; }/*取消按鈕被點擊狀態*/ InformDialog>QPushButton:pressed{background-color: #008AFF;border-radius: 6px; }

總結

以上是生活随笔為你收集整理的Qt中QSS的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。

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