1 使用Qss設置QT程序界面的樣式和皮膚
1.1 Qss的功能
Qt程序界面中控件的背景圖片、大小、字體顏色、字體類型、按鈕狀態變化等屬性可以通過Qss文件來設置，美化UI界面。實現界面和程序的分離，快速切換皮膚。
1.2 QSS基本屬性設置
Qss的強大在於組合功能的強大，這里只是簡單介紹基本功能，將簡單功能組合起來才能實現好看的效果。
Qss背景屬性（Background）
| 屬性 |
描述 |
CSS |
| 在一個聲明中設置所有的背景屬性。 |
1 |
|
| 設置背景圖像是否固定或者隨着頁面的其余部分滾動。 |
1 |
|
| 設置元素的背景顏色。 |
1 |
|
| 設置元素的背景圖像。 |
1 |
|
| 設置背景圖像的開始位置。 |
1 |
|
| 設置是否及如何重復背景圖像。 |
1 |
|
| 規定背景的繪制區域。 |
3 |
|
| 規定背景圖片的定位區域。 |
3 |
|
| 規定背景圖片的尺寸。 |
3 |
QSS邊框屬性（Border 和 Outline）
| 屬性 |
描述 |
CSS |
| 在一個聲明中設置所有的邊框屬性。 |
1 |
|
| 在一個聲明中設置所有的下邊框屬性。 |
1 |
|
| 設置下邊框的顏色。 |
2 |
|
| 設置下邊框的樣式。 |
2 |
|
| 設置下邊框的寬度。 |
1 |
|
| 設置四條邊框的顏色。 |
1 |
|
| 在一個聲明中設置所有的左邊框屬性。 |
1 |
|
| 設置左邊框的顏色。 |
2 |
|
| 設置左邊框的樣式。 |
2 |
|
| 設置左邊框的寬度。 |
1 |
|
| 在一個聲明中設置所有的右邊框屬性。 |
1 |
|
| 設置右邊框的顏色。 |
2 |
|
| 設置右邊框的樣式。 |
2 |
|
| 設置右邊框的寬度。 |
1 |
|
| 設置四條邊框的樣式。 |
1 |
|
| 在一個聲明中設置所有的上邊框屬性。 |
1 |
|
| 設置上邊框的顏色。 |
2 |
|
| 設置上邊框的樣式。 |
2 |
|
| 設置上邊框的寬度。 |
1 |
|
| 設置四條邊框的寬度。 |
1 |
|
| 在一個聲明中設置所有的輪廓屬性。 |
2 |
|
| 設置輪廓的顏色。 |
2 |
|
| 設置輪廓的樣式。 |
2 |
|
| 設置輪廓的寬度。 |
2 |
|
| 定義邊框左下角的形狀。 |
3 |
|
| 定義邊框右下角的形狀。 |
3 |
|
| 簡寫屬性，設置所有 border-image-* 屬性。 |
3 |
|
| 規定邊框圖像區域超出邊框的量。 |
3 |
|
| 圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。 |
3 |
|
| 規定圖像邊框的向內偏移。 |
3 |
|
| 規定用作邊框的圖片。 |
3 |
|
| 規定圖片邊框的寬度。 |
3 |
|
| 簡寫屬性，設置所有四個 border-*-radius 屬性。 |
3 |
|
| 定義邊框左上角的形狀。 |
3 |
|
| 定義邊框右下角的形狀。 |
3 |
|
| box-decoration-break |
�0�2 |
3 |
| 向方框添加一個或多個陰影。 |
3 |
Box 屬性
| 屬性 |
描述 |
CSS |
| 如果內容溢出了元素內容區域，是否對內容的左/右邊緣進行裁剪。 |
3 |
|
| 如果內容溢出了元素內容區域，是否對內容的上/下邊緣進行裁剪。 |
3 |
|
| 規定溢出元素的首選滾動方法。 |
3 |
|
| 圍繞由 rotation-point 屬性定義的點對元素進行旋轉。 |
3 |
|
| 定義距離上左邊框邊緣的偏移點。 |
3 |
QSS字體屬性（Font）
| 屬性 |
描述 |
CSS |
| 在一個聲明中設置所有字體屬性。 |
1 |
|
| 規定文本的字體系列。 |
1 |
|
| 規定文本的字體尺寸。 |
1 |
|
| 為元素規定 aspect 值。 |
2 |
|
| 收縮或拉伸當前的字體系列。 |
2 |
|
| 規定文本的字體樣式。 |
1 |
|
| 規定是否以小型大寫字母的字體顯示文本。 |
1 |
|
| 規定字體的粗細。 |
1 |
QSS外邊距屬性（Margin）
| 屬性 |
描述 |
CSS |
| 在一個聲明中設置所有外邊距屬性。 |
1 |
|
| 設置元素的下外邊距。 |
1 |
|
| 設置元素的左外邊距。 |
1 |
|
| 設置元素的右外邊距。 |
1 |
|
| 設置元素的上外邊距。 |
1 |
CSS 內邊距屬性（Padding）
| 屬性 |
描述 |
CSS |
| 在一個聲明中設置所有內邊距屬性。 |
1 |
|
| 設置元素的下內邊距。 |
1 |
|
| 設置元素的左內邊距。 |
1 |
|
| 設置元素的右內邊距。 |
1 |
|
| 設置元素的上內邊距。 |
1 |
CSS 定位屬性（Positioning）
| 屬性 |
描述 |
CSS |
| 設置定位元素下外邊距邊界與其包含塊下邊界之間的偏移。 |
2 |
|
| 規定元素的哪一側不允許其他浮動元素。 |
1 |
|
| 剪裁絕對定位元素。 |
2 |
|
| 規定要顯示的光標的類型（形狀）。 |
2 |
|
| 規定元素應該生成的框的類型。 |
1 |
|
| 規定框是否應該浮動。 |
1 |
|
| 設置定位元素左外邊距邊界與其包含塊左邊界之間的偏移。 |
2 |
|
| 規定當內容溢出元素框時發生的事情。 |
2 |
|
| 規定元素的定位類型。 |
2 |
|
| 設置定位元素右外邊距邊界與其包含塊右邊界之間的偏移。 |
2 |
|
| 設置定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。 |
2 |
|
| 設置元素的垂直對齊方式。 |
1 |
|
| 規定元素是否可見。 |
2 |
|
| 設置元素的堆疊順序。 |
2 |
CSS 文本屬性（Text）
| 屬性 |
描述 |
CSS |
| 設置文本的顏色。 |
1 |
|
| 規定文本的方向 / 書寫方向。 |
2 |
|
| 設置字符間距。 |
1 |
|
| 設置行高。 |
1 |
|
| 規定文本的水平對齊方式。 |
1 |
|
| 規定添加到文本的裝飾效果。 |
1 |
|
| 規定文本塊首行的縮進。 |
1 |
|
| text-shadow |
規定添加到文本的陰影效果。 |
2 |
| 控制文本的大小寫。 |
1 |
|
| 設置文本方向。 |
2 |
|
| 規定如何處理元素中的空白。 |
1 |
|
| 設置單詞間距。 |
1 |
|
| 規定標點字符是否位於線框之外。 |
3 |
|
| 規定是否對標點字符進行修剪。 |
3 |
|
| text-align-last |
設置如何對齊最后一行或緊挨着強制換行符之前的行。 |
3 |
| 向元素的文本應用重點標記以及重點標記的前景色。 |
3 |
|
| 規定當 text-align 設置為 "justify" 時所使用的對齊方法。 |
3 |
|
| 規定文本的輪廓。 |
3 |
|
| 規定當文本溢出包含元素時發生的事情。 |
3 |
|
| 向文本添加陰影。 |
3 |
|
| 規定文本的換行規則。 |
3 |
|
| 規定非中日韓文本的換行規則。 |
3 |
|
| 允許對長的不可分割的單詞進行分割並換行到下一行。 |
3 |
1.3 Qss過濾選擇器和優先級
1.3.1 Qss選擇器
Qss有一些規則用來設置符合規則的控件名稱，通常是按照通用屬性設置一類控件，對某個有特殊要求的在特別設置。避免大量的重復設置。分為
- 通配選擇器：* ;所有的控件屬性設置
*
{
}
- 類型選擇器：QPushButton ; 匹配所有QPushButton和其子類的實例
QPushButton
{
}
3.類選擇器： .QPushButton ; 匹配所有QPushButton的實例，但是並不匹配其子類。這是與CSS中的類選擇器不一樣的地方，注意前面有一個點號
.QPushButton
{
}
4.屬性選擇器：QPushButton[flat="false"]; 匹配所有flat屬性是false的QPushButton實例，注意該屬性可以是自定義的屬性，不一定非要是類本身具有的屬性
QPushButton[flat="false"]
{
}
5.ID選擇器： #myButton; 匹配所有id為myButton的控件實例，這里的id實際上就是objectName指定的值,針對特定名稱的控件設置屬性。
QPushButton#myButton1, #myButton2
{
}
6.后代選擇器： QDialog QPushButton ; 所有QDialog容器中包含的QPushButton，不管是直接的還是間接的。
QDialog QPushButton
{
}
7.子選擇器： QDialog > QPushButton; 所有QDialog容器下面的QPushButton，其中要求QPushButton的直接父容器是QDialog
QDialog > QPushButton
{
}
1.3.2 Qss優先級
上面雖然用了選擇器，單肯定會有重復的設置，那么系統怎么去排列這些設置的優先級。原則：寬泛的設置優先級低於更加針對具體的設置，文件上面的設置優先級低於文件下面的設置。
1.4 Qss開發步驟
（1） 添加資源文件qrc，在資源里添加qss文件，圖片皮膚文件等。
（2） 分界面在qss文件中設置各控件的屬性值
Qss中配置一般按照如下格式配置
控件類型#控件名稱1,控件名稱2,控件名稱3
{
控件屬性;
}
按鈕屬性設置
按鈕為background背景圖片的形式
QToolButton#addTimeBtn{//常規屬性設置
font-size: 12px;
background: url(:/addanddeduct/image/add-l-16-normal.png) no-repeat center center;//背景圖片資源中的路徑，不重復，居中、居中顯示。
background-repeat:no-repeat;//圖片較小時，不顯示個。
border-style: flat;//扁平
border-left:1px solid #CCCCCC;//邊框線條粗細、虛實、顏色
}
QToolButton#addTimeBtn:hover{//按鈕高亮屬性設置
background: url(:/addanddeduct/image/add-l-16-hov.png) no-repeat center center;
background-repeat:no-repeat;
border-style: flat;
border-left:1px solid #CCCCCC;
}
QToolButton#addTimeBtn:pressed{//按鈕按下時的屬性設置
background: url(:/addanddeduct/image/add-l-16-pressed.png) no-repeat center center;
border-style: flat;
border-left:1px solid #CCCCCC;
}
按鈕為qproperty-icon圖片加文字的形式
/*刪除報警按鍵設置*/
QToolButton#delAlarmBtn{
font-size: 12px;
border-style:inset;
border:0px solid #E5E5E5;
qproperty-icon: url(:/qss/image/lidaicon-h-trashcan.svg);
qproperty-iconSize: 16px 16px;//圖片大小
qproperty-toolButtonStyle: ToolButtonTextBesideIcon;//文字和圖片樣式
}
QToolButton#delAlarmBtn:pressed{
color:#1C72DD;
border: 0px solid #1C72DD;
font-size: 12px;
border-style:inset;
qproperty-icon: url(:/qss/image/lidaicon-h-trashcan-pressed.svg);
qproperty-iconSize: 16px 16px;
qproperty-toolButtonStyle: ToolButtonTextBesideIcon;
}
QToolButton#delAlarmBtn:hover{
color:#4C99F8;
font-size: 12px;
border-style:inset;
border: 0px solid #4C99F8;
qproperty-icon: url(:/qss/image/lidaicon-h-trashcan-pressed.svg);
qproperty-iconSize: 16px 16px;
qproperty-toolButtonStyle: ToolButtonTextBesideIcon;
}
QCheckBox{
spacing: 5px;
color: black;
border-style: flat;
}
復選框QCheckBox屬性設置
QCheckBox::indicator
{
width: 17px;
height: 17px;
image: url(:/checkImage/image/checkImage/check-nor.png);
}
QCheckBox::indicator:hover {
image: url(:/checkImage/image/checkImage/check-hov.png);
}
QCheckBox::indicator:checked{
image: url(:/checkImage/image/checkImage/check-sel.png);
}
QComboBox屬性設置
QComboBox::drop-down:hover:pressed
{//下拉按鈕設置
subcontrol-position:center right;//按鈕位置
image:url(:/qss/image/angle-down.png);//按鈕圖片
}
QComboBox:drop-down
{
subcontrol-position:center right;
image:url(:/qss/image/angle-down-l-16.png);
}
QComboBox
{// QComboBox本身屬性設置
border: 1px solid #CCCCCC;
border-radius: 2px;
}
QComboBox::hover
{//鼠標移上去，邊框變藍色
/* 邊框寬度,線條樣式,顏色 */
border:1px solid #2080F7;
/* 內邊框 */
padding:1px 18px 1px 3px;
min-width:100px;
font:12px;
}
QComboBox QAbstractItemView
{//下拉列表中的選項設置
border: 1px solid #2080F7;
selection-//選中背景色
}
/*水平滾動條*/
QScrollBar:horizontal{
width:8px;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
background: #000000;
border-radius:100px;
}
QScrollBar::handle:horizontal{
background:#E5E5E5;
width:8px;
border: 0px solid #E5E5E5;
min-height:20px;
border-radius:100px;
}
QScrollBar::handle:horizontal:normal{
background:#F5F5F5;
width:8px;
border: 0px solid #E5E5E5;
border-radius:100px;
}
QScrollBar::handle:horizontal:hover{
background:#E6E6E6;
width:8px;
border: 0px solid #E5E5E5;
border-radius:100px;
}
QScrollBar::handle:horizontal:pressed{
background:#CCCCCC;
width:8px;
border: 0px solid #E5E5E5;
border-radius:100px;
}
QScrollBar滾動條屬性設置
/*垂直滾動條*/
QScrollBar:vertical
{
width:8px; //寬度
padding-top:4px; //內上邊距設置
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
background: #000000;
border-radius:100px;
}
QScrollBar::handle:vertical{ //滑塊屬性設置
background:#E5E5E5;
width:8px;
border: 0px solid #E5E5E5;
min-height:20px;
border-radius:100px;
}
QScrollBar::handle:vertical:normal{
background:#F5F5F5;
width:8px;
border: 0px solid #E5E5E5;
border-radius:100px;
}
QScrollBar::handle:vertical:hover{
background:#E6E6E6;
width:8px;
border: 0px solid #E5E5E5;
border-radius:100px;
}
QScrollBar::handle:vertical:pressed{
background:#CCCCCC;
width:8px;
border: 0px solid #E5E5E5;
border-radius:100px;
}
QScrollBar{
background: #000000;
}
QScrollBar::pressed
{
background: #000000;
}
QTableWidget屬性設置
QTableWidget#tableWidget::Item
{
border:0px solid #E5E5E5;
border-bottom:1px solid #E5E5E5;
font-size: 12px;
color: #4C4C4C;
font - family: Microsoft YaHei;
alternate- /*行交替顏色*/
selection-background-color: #E9F2FE; /*選中行背景顏色*/
}
QTableWidget#tableWidget::Item:selected
{
background:#4C99F8;
}
QTableWidget表頭屬性設置
QHeaderView::section{
font-size: 12px;
color: #000000;
font - family: Microsoft YaHei;
font-weight: bold;
height:36px;/*表頭高度*/
border-style: flat;
border-bottom:1px solid #E5E5E5;
border-top:0px solid #E5E5E5;
alignment: left;//左對齊
}
QTabWidget切換界面Tab屬性設置
QTabWidget::pane //邊框設置
{
border-top: 1px solid #E5E5E5;
border-left:1px solid #E5E5E5;
position: absolute;
font-size: 14px;
}
QTabWidget::tab-bar {
border-bottom: 2px solid #E5E5E5;
border-left:1px solid #E5E5E5;
alignment: left;
font-size: 14px;
}
QTabBar::tab {//切換按鈕設置
border: none;
border-bottom-color: #C2C7CB; /* same as the pane color */
border-top-left-radius: 4px;//上左交界處的圓角
border-top-right-radius: 4px;
min-width: 8ex;
padding: 2px;
font-size: 14px;
}
QTabBar::tab:hover {
color:#2080F7;//選中高亮
}
QTabBar::tab:selected {
color:#2080F7;
border-bottom: 2px solid #2080F7;//下邊框線條屬性
font-weight:bold;//加粗
}
（3） 將qss文件添加到步驟（1）中添加的qrc資源文件中，注意每次修改之后都要重新加入。否則不生效。
（4） 在代碼中訪問qss文件，讀取文件內容，通過setstylesheet函數設置屬性
QByteArray CSkinCtrl::ReadAllContents(const QString& dir_name)
{
QByteArray content;
//獲取路徑下所有文件，如果是qrc路徑呢？
QStringList file_name_list = QDir(dir_name).entryList(QDir::Files);
//將所有的讀取的文件內容匯總到content
for each (QString file_name in file_name_list)
{
QFile file(dir_name + file_name);
if (file.open(QIODevice::ReadOnly))
{
content += file.readAll();
file.close();
}
}
//遍歷子文件夾中的文件
QStringList dir_name_list = QDir(dir_name).entryList(QDir::Dirs);
for each (QString dir in dir_name_list)
{
content += ReadAllContents(dir_name + dir + "/");
}
return content;
}
調用讀取函數，用qApp->setStyleSheet設置
QString gui_qss_path = ":/qss/iVMSGUIToolkit/";
QString client_qss_path = ":/qss/qss/";
qApp->setStyleSheet(ReadAllContents(gui_qss_path) + ReadAllContents(client_qss_path));