使用樣式表與調色板(QPalette)相比，樣式表更強大，因為使用調色板設置的外觀，並不能保證在所有的樣式中都可正常的工作，但樣式表就不受這樣的限制。而且使用樣式表可以更方便的設置界面的外觀，而不用去子類化 QStyle 類
可使用 QApplication::setStyleSheet()函數設置整個應用程序的樣式表，使用QWidget::setStyleSheet()設置部件及其子部件的樣式表
#include "win.h" #include <QApplication> int main(int argc, char *argv[]) { QApplication a(argc, argv); a.setStyleSheet("QPushButton{background-color:red}"); //設置按鈕的背景色 Win w; w.show(); return a.exec(); }
使整個應用程序的按鈕都是紅色
若直接在部件上設置樣式表或針對所有控件類，可忽略選擇器及大括號
#include "win.h" Win::Win(QWidget *parent) : QWidget(parent) { this->resize(400,300); QPushButton* button1=new QPushButton("AAA",this); button1->move(10,10); button1->resize(100,100); QPushButton* button2=new QPushButton("BBB",this); button2->move(150,10); button2->resize(100,100); button1->setStyleSheet("background-color:yellow");//省略了選擇器(即 QPushButton)和大括號 } Win::~Win() { }
樣式表語法
Qt 樣式表通常不區分大小寫，除了類名、對象名和 Qt 屬性名稱之外
基本語法規則
①、樣式表由選擇器(通常是某個控件類)和聲明兩部分組成，選擇器指定了受影響的部件，聲明指定了要設置的屬性(注意與 Qt 屬性的區別)。
比如QPushButton { color : blue}
其中 QPushButton 是選擇器，{color: blue}是聲明，color 是需要設置的屬性，blue 是屬性的值。
以上語句表明，QPushButton
及其子類應使用 blue(藍色)作為其前景色
②、指定多個選擇器
可為相同的聲明指定多個選擇器，選擇器之間使用逗號“,”進行分隔，比如QPushButton, QCheckBox, QLineEdit{color: red}
③、指定多個屬性時
使用分號分隔，比如QPushButton{color: red; background-color:blue} //按鈕前景色為紅色，背景色為藍色
④、為含有多個值的屬性指定多個值時
使用空隔分隔，比如QLineEdit{border: 2px solid red} //表示邊框線為 2 像素寬的實線，其顏色為紅色
以上語句的屬性 border 是一種對屬性的簡寫方法，以上語句相當於以下 3 條語句：
QLineEdit{ border-width: 2px;
border-style:solid;
border-color:red }
選擇器
|
選擇器
|
示例
|
說明
|
|
全局選擇器
|
*
|
匹配所有部件
|
|
類型選擇器
|
QWidget
|
匹配 QWidget 及其子類的實例
|
|
屬性選擇器
|
QPushButton[flat =
"false"]
|
1、匹配 QPushButton 的屬性 flat 等於 false 的實例
2、注意：方括號內的屬性是指 Qt 屬性(即部件的屬性)
3、此選擇器也可用於測試動態屬性(setProperty()函數)。
4、也可以使用 ~= 代替 = 來測試 QStringList 類型的 Qt 屬性
是否包含給定的 QString
5、注意：如果 Qt 屬性的值在樣式表設置后發生更改，則可能
需要強制重新計算樣式表，其方法是取消樣式表並重新設置它
【
[]是用來匹配qt屬性的】
|
|
類選擇器
|
.QPushButton
|
匹配 QPushButton 但不匹配其子類的實例，這相當於
*[class~="QPushButton"]
|
|
ID選擇器
|
QPushButton#AAA
|
匹配objectName屬性為 AAA 的所有 QPushButton 實
例
|
|
后代選擇器
|
QWidget QPushButton
|
匹配 QWidget 的后代(子，孫子等)的所有 QPushButton 實例
|
|
子對象選擇器
|
QWidget > QPushButton
|
匹配 QPushButton 實例，它們是 QWidget 的直接子部件
|
實例：
QPushButton *pb1=new QPushButton("AAA",this); pb1->move(22,22); pb1->resize(111,33); QPushButton *pb2=new QPushButton("BBB",this); pb2->move(199,22); this->setObjectName("www"); pb1->setObjectName("AAA"); this->setStyleSheet("QWidget#www > QPushButton#AAA[x=\"22\"][y=\"22\"]{background-color:red}"); /*把對象名為 www 的 QWidget 的直接子部件QPushButton 的背景色設置為紅色， 其中QPushButton的對象名為AAA，其x屬性和y屬性(即QPushButton的位置)的值都為22 */
實例：動態屬性的使用
QPushButton *pb1=new QPushButton("AAA",this); pb1->move(22,22); pb1->resize(111,33); QPushButton *pb2=new QPushButton("BBB",this); pb2->move(199,22); QCheckBox *pc=new QCheckBox("CCC",this); pc->move(22,55); QCheckBox *pc1=new QCheckBox("DDD",this); pc1->move(99,55); pb1->setProperty("XXX",true); pc1->setProperty("XXX",true);//設置動態屬性 this->setStyleSheet("*[XXX=true]{background-color:red}"); //把按鈕pb1 和 pc1 的背景色設置為紅色，匹配所有屬性"XXX = true"的部件
子控件
復雜控件通常包含一系列子控件，比如QComboBox的下拉按鈕就是子控件，還有QSpinBox的向上/向下箭頭等。對復雜控件使用樣式表設置外觀，可能需要訪問其子控件。樣式表中子控件以“::”符號開頭
注意：QScrollBar、QComboBox 等部件的一個屬性或子控件是自定義的，通常還要自定義其他屬性和子控件。比如，單獨使用 QScrollBar 的子控件不會產生效果，需與滾動條的屬性配合使用
|
子控件
|
說明
|
|
|
滾動條、滑
塊相關
|
::handle
|
QScrollBar、QSplitter、QSlider 的手柄(滑塊)
|
|
::groove
|
QSlider 的凹槽
|
|
|
::corner
|
QAbstractScrollArea 中兩個滾動條之間的角落
|
|
|
::add-line
|
QScrollBar 增加行的按鈕，即按下該按鈕滾動條增加一行
|
|
|
::add-page
|
QScrollBar 在手柄(滑塊)和增加行之間的區域
|
|
|
::sub-line
|
QScrollBar 減少行的按鈕，即按下該按鈕滾動條減少一行
|
|
|
::sub-page
|
QScrollBar 在手柄(滑塊)和減少行之間的區域
|
|
|
箭頭相關
|
::down-arrow
|
QComboBox、QHeaderView 排序指示器、QScrollBar、QSpinBox 的向下箭頭
|
|
::down-button
|
QScrollBar 或 QSpinBox 的向下按鈕
|
|
|
::up-arrow
|
QHeaderView(排序指示器)、QScrollBar、QSpinBox 的向上箭頭
|
|
|
::up-button
|
QSpinBox 的向上按鈕
|
|
|
::left-arrow
|
QScrollBar 的左箭頭
|
|
|
::right-arrow
|
QMenu 或 QScrollBar 的右箭頭
|
|
|
模型/
視圖
|
::branch
|
QTreeView 的分支指示符
|
|
::section
|
QHearderView 的段
|
|
|
::text
|
QAbstractItemView 的文本
|
|
|
其他
|
::chunk
|
QProgressBar 的進度塊
|
|
::drop-down
|
QComboBox 的下拉按鈕
|
|
|
::indicator
|
QAbstractItemView、QCheckBox、QRadioButton、QMenu(可被選中的)、
QGroupBox(可被選中的)的指示器
|
|
|
選項
卡欄、
選項
卡部
件、
可停
靠窗
口
|
::pane
|
QTabWidget 的面板(邊框)
|
|
::right-corner
|
QTabWidget 的右角落，此控件可用於控件 QTabWidget 中右角落部件的位置
|
|
|
::left-corner
|
QTabWidget 的左角落，此控件可用於控件 QTabWidget 中左角落部件的位置
|
|
|
::tab-bar
|
QTabWidget 的選項卡欄，此子控件僅用於控制 QTabBar 在 QTabWidget 中的位
置，使用::tab 設置選項卡的樣式
|
|
|
::tab
|
QTabBar 或 QToolBox 的選項卡
|
|
|
::tear
|
QTabBar 的可分離指示器
|
|
|
::close-button
|
QTabBar 選項卡或 QDockWidget 上的關閉按鈕
|
|
|
::float-button
|
QDockWidget 的浮動按鈕
|
|
|
::title
|
QDockWidget 或 QGroupBox 的標題
|
|
|
菜單
相關
|
::scroller
|
QMenu 或 QTabBar 的滾動條
|
|
::separator
|
QMenu 或 QMainWindow 中的分隔符
|
|
|
::tearoff
|
QMenu 的可分離指示器
|
|
|
::item
|
QAbstractItemView、QMenuBar、QMenu、QStatusBar 中的一個項
|
|
|
::icon
|
QAbstractItemView 或 QMenu 的圖標
|
|
|
::menu-arrow
|
帶有菜單的 QToolButton 的箭頭
|
|
|
::menu-button
|
QToolButton 的菜單按鈕
|
|
|
::menu-indicator
|
QPushButton 的菜單指示器
|
實例：
this->resize(400,300); QSpinBox* sb=new QSpinBox(this); sb->move(10,10); sb->resize(100,30); sb->setStyleSheet("QSpinBox::up-button{Subcontrol-Position:left top}"); //Subcontrol-Position 子控件位置屬性
偽狀態
部件含有一系列的狀態，樣式表的狀態使用“:”符號開頭。
比如QPushButton:hover{…} //表示鼠標懸停在按鈕上
偽狀態的規則:
①、用感嘆號可否定偽狀態，比如QPushButton:!hover{…} //表示鼠標未懸停在按鈕上
②、多個偽狀態連用可達到邏輯與(AND)的效果，比如QCheckBox:hover:checked{…} //表示鼠標懸停在按鈕上且被選中
③、多個偽狀態之間使用逗號分隔可表示邏輯或(OR)的效果，比如QCheckBox:hover, QCheckBox:checked{…} //表示鼠標懸停在按鈕上或被選中
④、偽狀態還可以子控件聯合使用，比如QComboBox::drop-down:hover{…}
|
樣式表的偽狀態
|
||
|
常見
狀態
|
:active
|
部件位於激活窗口中
|
|
:focus
|
該項具有輸入焦點
|
|
|
:edit-focus
|
該項具有編輯焦點，此狀態僅適用於 Qt Extended 應用程序
|
|
|
:default
|
該項是默認值
|
|
|
:disabled
|
該項已被禁用
|
|
|
:enabled
|
該項已啟用
|
|
|
:hover
|
鼠標懸停在該項上
|
|
|
:pressed
|
使用鼠標按下該項
|
|
|
:no-frame
|
該項沒有邊框，比如，無邊框的 QLineEdit 等
|
|
|
:flat
|
該項是平的(flat)，比如，一個平的 QPushButton
|
|
|
:checked
|
該項被選中
|
|
|
:unchecked
|
該項未被選中
|
|
|
:off
|
適用於處於“關閉(off)”狀態的項
|
|
|
:on
|
適用於處於“開啟(on)”狀態的項
|
|
|
:editable
|
QComboBox 是可編輯的
|
|
|
:read-only
|
該項為只讀，比如，只讀的 QLineEdit
|
|
|
:indeterminate
|
該項具有不確定狀態，比如，三態的 QCheckBox
|
|
|
:exclusive
|
該項是排他項目組的一部分
|
|
|
:non-exclusive
|
該項是非排他項目組的一部分
|
|
|
方位
相關
|
:bottom
|
該項位於底部
|
|
:top
|
該項位於頂部
|
|
|
:left
|
該項位於左側，比如，QTabBar 的選項卡位於左側
|
|
|
:right
|
該項位於右側，比如，QTabBar 的選項卡位於右側
|
|
|
:middle
|
該項位於中間，比如，不在 QTabBar 開頭或結尾的選項卡
|
|
|
:first
|
該項是第一個，比如，QTabBar 中的第一個選項卡
|
|
|
:last
|
該項是最后一個，比如，QTabBar 中的最后一個選項卡
|
|
|
:horizontal
|
該項具有水平方向
|
|
|
:vertical
|
該項具有垂直方向
|
|
|
其他
狀態
|
:maximized
|
該項是最大化的，比如，最大化的 QMdiSubWindow
|
|
:minimized
|
該項是最小化的，比如，最小化的 QMdiSubWindow
|
|
|
:floatable
|
該項是可浮動的
|
|
|
:movable
|
該項可移動，例如，可移動的 QDockWidget
|
|
|
:only-one
|
該項是唯一的，比如，只有一個選項卡的 QTabBar
|
|
|
:next-selected
|
下一項被選擇
|
|
|
:previous-selected
|
上一項被選擇
|
|
|
:selected
|
該項被選擇
|
|
|
:window
|
部件是一個窗口，即頂級部件
|
|
|
:closable
|
該項可被關閉，例如，可關閉的 QDockWidget
|
|
|
:closed
|
該項處於關閉狀態，比如 QTreeView 中的非展開項
|
|
|
:open
|
該項處於打開狀態，比如 QTreeView 中的展開項，或帶有打開菜單的
QComboBox 或 QPushButton
|
|
|
:has-children
|
該項具有孩子，比如，QTreeView 中具有子項的項
|
|
|
:has-siblings
|
該項具有兄弟姐妹(即同級的)
|
|
|
:adjoins-item
|
QTreeView 的::branch 與項相鄰時設置此狀態
|
|
|
:alternate
|
當 QAbstractItemView::alternatingRowColors()被設置為 true 時，為每個交替行設
置此狀態，以繪制 QAbstractItemView 的行
|
|
實例--偽狀態的使用
this->resize(400,300); QPushButton* pb=new QPushButton("AAA",this); pb->move(10,10); this->setStyleSheet("QPushButton:hover{background-color:red}" "QPushButton:pressed{background-color:yellow}"); //注意：多個偽狀態時""連用，要寫在一個語句里，不能分開
樣式表的屬性
背景色、前景色、所選文本的顏色
|
屬性
|
類型
|
說明
|
|
1、background
|
Background
|
設置背景的簡寫方法，相當於指定 background-color、
background-image、background-repeat、background-position。
以下類支持此屬性
QAbstractItemView 子類，QAbstractSpinBox 子類，
QCheckBox，QComboBox，QDialog，QFrame，QGroupBox,
QLabel, QLineEdit, QRadioButton, QSplitter, QTextEdit,
QToolTip 和 QWidget
注意：若僅在 QPushButton 上設置背景色，除非把 border 屬
性設置為某個值，否則背景可能不會被顯示。
|
|
2、background-color
|
Brush
|
部件的背景色
|
|
3、background-image
|
Url
|
設置部件的背景圖像，背景圖像不會隨部件的大小自動縮
放，比如 QWidget{ background-image: url(F:/1i.png) }
【QWidget的窗口好像沒有效果】
|
|
4、background-repeat
|
Repeat
|
如何使用背景圖像填充背景區域 backgroung-origin，若未指
定此屬性，則在兩個方向重復背景圖像
|
|
5、background-position
|
Alignment
|
背景圖像在 background-origin 矩形內的位置，默認為 top left
|
|
6、background-attachment
|
Attachment
|
確定 QAbstractScrollArea 中的 background-image 是相對於視
口滾動還是固定，默認值為 scroll，即，使用視口滾動
|
|
7、background-clip
|
Origin
|
此屬性指定 background-color 和
background-image 的填充矩形，此屬性默認值為
border(即邊框矩形)
以下類支持此屬性：
QAbstractItemView 子類，QAbstractSpinBox 子類，
QCheckBox，QComboBox，QDialog，QFrame，
QGroupBox，QLabel，QPushButton，QRadioButton，
QSplitter，QTextEdit，QToolTip，QWidget
|
|
8、background-origin
|
Origin
|
背景圖片的有效矩形，默認為 padding(即填充矩
形)
以下類支持此屬性：
QAbstractItemView 子類，QAbstractSpinBox 子類，
QCheckBox，QComboBox，QFrame，QGroupBox，
QLabel，QPushButton，QRadioButton，QSplitter，
QTextEdit，QToolTip，QWidget，QLineEdit，QMenu，
QMenuBar(注意：沒有 QDialog)
|
|
9、color
|
Brush
|
渲染文本的顏色，所有遵守 QWidget::palette 的部件都支持此
屬性
|
|
10、
selection-background-color
|
Brush
|
所選文本或項的背景色，所有遵守 QWidget::palette 和顯示選
擇文本的部件都支持此屬性，默認為調色板的
QPalette::Highlight 角色的值
|
|
11、selection-color
|
Brush
|
所選文本或項的前景色，所有遵守 QWidget::palette 和顯示選
擇文本的部件都支持此屬性，默認為調色板的
QPalette::HighlightedText 角色的值
|
實例：
this->resize(400,300); QLabel* label=new QLabel("標簽",this); label->move(10,10); label->resize(350,250); label->setStyleSheet( "QLabel{background: red url(./a.png);" //背景色為紅色，背景圖片為a.png "background-repeat: repeat-y;" //在 y 軸方向重復圖片 "background-position: right;}"); //背景圖片位於部件右側 //注意：設置多個屬性的語法
盒子模型及相關屬性
盒子模式
樣式表的邊框屬性
樣式表的邊框屬性主要描述的是邊框的邊界線，包括邊界線的顏色、樣式(虛線、實線等)、寬度、角落半徑和填充邊框的圖像
注意：由於邊框(border)、填充矩形(padding)、輪廓線(outline)的邊界線默認寬度為 0，且樣式為 none(即沒有線條)，因此要使其邊界線可見，必須指定邊界線的寬度和樣式，否則邊界線不可見
①、邊框的簡寫方法
1)、border 類型：Border
設置邊框的簡寫方法，相當於指定 border-color，border-style，border-width
以下類支持此屬性：
QAbstractItemView 子類，QAbstractSpinBox 子類，QCheckBox，QComboBox，QDialog，QFrame，
QGroupBox，QLabel，QPushButton，QRadioButton，QSplitter，QTextEdit，QToolTip，QWidget
2)、border-top 類型：Border
設置部件頂部邊框的簡寫方法，相當於指定 border-top-color，border-top-style，border-top-width
3)、border-right 類型：Border
設置部件右邊框的簡寫方法，相當於指定 border-right-color，border-right-style，border-right-width
4)、border-bottom 類型：Border
設置部件底部邊框的簡寫方法，相當於指定 border-bottom-color，border-bottom-style，border-bottom-width
5)、border-left 類型：Border
設置部件左邊框的簡寫方法，相當於指定 border-left-color，border-left-style，border-left-width
②、邊框顏色
6)、border-color 類型：Box Colors
邊框邊界線的顏色，相當於指定 border-top-color，border-bottom-color，border-left-color，border-right-color，默認值為 color(即部件的前景色)
以下類支持此屬性：
QAbstractItemView 子類，QAbstractSpinBox 子類，QCheckBox，QComboBox，QFrame，QGroupBox，
QLabel，QPushButton，QRadioButton，QSplitter，QTextEdit，QToolTip，QWidget，QLineEdit，QMenu，
QMenuBar(注意：沒有 QDialog)
7)、border-top-color 類型：Brush //邊框頂部邊界線的顏色
8)、border-right-color 類型：Brush //邊框右邊界線的顏色
9)、border-bottom-color 類型：Brush //邊框底部邊界線的顏色
10)、border-left-color 類型：Brush //邊框左邊界線的顏色
③、邊框半徑
11)、border-radius 類型：Radius
邊框角落的半徑，等效於指定 border-top-left-radius，border-top-right-radius，border-bottom-left-radius，border-bottom-right-radius，該屬性剪切元素的 background(背景)，默認為 0。
以下類支持此屬性：
QAbstractItemView 子類，QAbstractSpinBox 子類，QCheckBox，QComboBox，QFrame，QGroupBox，
QLabel，QPushButton，QRadioButton，QSplitter，QTextEdit，QToolTip，QLineEdit，QMenu，QMenuBar(注意：沒有 QDialog 和 QWidget)
12)、border-top-left-radius 類型：Radius //邊框左上角的半徑
13)、border-top-right-radius 類型：Radius //邊框右上角的半徑
14)、border-bottom-right-radius 類型：Radius //邊框右下角的半徑
15)、order-bottom-left-radius 類型：Radius //邊框左下角的半徑
④、邊框樣式
16)、border-style 類型：Border Style
邊框邊界線的樣式(虛線、實線、點划線等)，默認為 none
以下類支持此屬性：
QAbstractItemView 子類，QAbstractSpinBox 子類，QCheckBox，QComboBox，QFrame，QGroupBox，
QLabel，QPushButton，QRadioButton，QSplitter，QTextEdit，QToolTip，QLineEdit，QMenu，
QMenuBar(注意：沒有 QDialog 和 QWidget)
邊框樣式種類：
solid 實線
dotted 點狀邊框
none無邊框
dashed 虛線
double 雙線
groove 定義3D凹槽邊框。其效果取決於border-color的值
ridge 定義3D壟狀邊框。其效果取決於 border-color的值
inset 定義3D inset邊框。其效果取決於 border-color的值
outset 定義3D outset邊框。其效果取決於 border-color的值
17)、border-top-style 類型：Border Style //邊框頂部邊界線的樣式
18)、border-right-style 類型：Border Style //邊框右側邊界線的樣式
19)、border-bottom-style 類型：Border Style //邊框底部邊界線的樣式
20)、border-left-style 類型：Border Style //邊框左側邊界線的樣式
⑤、邊框寬度
21)、border-width 類型： Border Lengths
邊框的寬度，等效於指定 border-top-width，border-bottom-width，border-left-width，border-right-width
以下類支持此屬性：
QAbstractItemView 子類，QAbstractSpinBox 子類，QCheckBox，QComboBox，QFrame，QGroupBox，
QLabel，QPushButton，QRadioButton，QSplitter，QTextEdit，QToolTip，QLineEdit，QMenu，
QMenuBar(注意：沒有 QDialog 和 QWidget)
22)、border-top-width 類型：Length //邊框頂部邊界線的寬度
23)、border-right-width 類型：Length //邊框右側邊界線的寬度
24)、border-bottom-width 類型：Length //邊框底部邊界線的寬度
25)、border-left-width 類型：Length //邊框左側邊界線的寬度
⑥、邊框圖像
26)、border-image 類型：Border Image
填充邊框的圖像，該圖像被分割成 9 個部分，並在必要時適當地拉伸
以下類支持此屬性：
QAbstractItemView 子類，QAbstractSpinBox 子類，QCheckBox，QComboBox，QFrame，QGroupBox，
QLabel，QPushButton，QRadioButton，QSplitter，QTextEdit，QToolTip，QLineEdit，QMenu，
QMenuBar(注意：沒有 QDialog 和 QWidget)
樣式表的邊距屬性
27)、margin 類型：Box Lengths
部件的邊距，等效於指定 margin-top，margin-right，margin-bottom，margin-left，默認為 0
以下類支持此屬性：
QAbstractItemView 子類，QAbstractSpinBox 子類，QCheckBox，QComboBox，QFrame，QGroupBox，
QLabel，QPushButton，QRadioButton，QSplitter，QTextEdit，QToolTip，QLineEdit，QMenu，
QMenuBar(注意：沒有 QDialog 和 QWidget)
28)、margin-top 類型：Length //部件的頂部邊距
29)、margin-right 類型：Length //部件的右側邊距
30)、margin-bottom 類型：Length //部件的底部邊距
31)、margin-left 類型：Length //部件的左側邊距
樣式表的填充屬性
32)、padding 類型：Box Lengths
部件的填充矩形，等效於指定 padding-top，padding-right，padding-bottom，padding-left，默認為 0
以下類支持此屬性：
QAbstractItemView 子類，QAbstractSpinBox 子類，QCheckBox，QComboBox，QFrame，QGroupBox，
QLabel，QPushButton，QRadioButton，QSplitter，QTextEdit，QToolTip，QLineEdit，QMenu，
QMenuBar(注意：沒有 QDialog 和 QWidget)
33)、padding-top 類型：Length //填充矩形頂部離邊框頂部的距離
34)、padding-right 類型：Length //填充矩形右側離邊框右側的距離
35)、padding-bottom 類型：Length //填充矩形底部離邊框底部的距離
36)、padding-left 類型：Length //填充矩形左側離邊框左側的距離
樣式表的輪廓線屬性
37)、outline //繪制在對象邊框上的輪廓--內容矩形邊框上
這條輪廓線 有焦點時顯示 無焦點時不顯示
38)、outline-color 類型：Color //輪廓線的顏色
39)、outline-offset 類型：Length //輪廓與部件邊框的偏移量
40)、outline-style //繪制輪廓的圖案(pattern)，另見 border-style
41)、outline-radius //輪廓的圓角
42)、outline-bottom-left-radius 類型：Radius //輪廓左下角的半徑
43)、outline-bottom-right-radius 類型：Radius //輪廓右下角的半徑
44)、outline-top-left-radius 類型：Radius //輪廓左上角的半徑
45)、outline-top-right-radius 類型：Radius //輪廓右上角的半徑
實例：
this->resize(600,300); QPushButton *pb1=new QPushButton("BBB",this); pb1->move(433,33); QLabel* label=new QLabel("標簽",this); label->move(433,233); QPushButton *pb=new QPushButton("AAA",this); pb->move(33,33); pb->resize(333,222); this->setStyleSheet( "QPushButton{" "background: red url(./a.png);" "background-repeat: repeat-y;" "background-position: left;" "border: 11px solid rgb(0,0,250);" //繪制一個11像素寬的紅色實線邊框線，注意值的順序 "margin:22px;" //部件的邊距為22像素 "padding:22px;" //部件填充距離為22像素 "background-clip:margin;" //背景色填充整個邊距矩形 "background-origin:margin;" //背景圖片的原點位於邊界矩形 "outline:11 dashed rgb(250,250,0);}" //繪制一個 11 像素寬的黃色虛線輪廓線 "QPushButton:pressed {" //當按鈕按下時的樣式 "background-color: blue;" //背景色為藍色 "background-clip:border;" //背景色填充邊界矩形 "background-origin:content;}" //背景圖片的有效矩形為內容矩形 );
工程下載：鏈接：https://pan.baidu.com/s/1E5G9-xTkRoonyJ5zlUVB_w 提取碼：6666
邊框圖像(border-image)原理
1)、如上圖，邊框圖像被 4 條虛線划分為 3*3 的小格，從而把圖像分為 9 個區域
2)、當使用邊框圖像填充部件背景時，4 個角(即格子①、③、⑦、⑨)保持不變，其他 5個格子被拉伸或重復(即平鋪)
3)、邊框圖像的設計原則如下：
4 條虛線分別使用從上、右、下、左邊緣的距離設置，如圖中 top、right、bottom、left 所示
使用邊框圖像還必須明確的設置邊框的寬度(即 border-width 屬性)，通常把邊框寬度設置為與 4 條虛線的值相一致，否則，4 個角的圖像將被適當的拉伸或壓縮以適應邊框的大小
4)、邊框圖像(border-image)與背景圖像(background-image)的顯著區別是，背景圖像不會隨窗口部件的大小而縮放
5)、若同時指定了邊框圖像和背景圖像，則邊框圖像會繪制在背景圖像之上
實例
this->resize(400,300); QPushButton *pb=new QPushButton("AAA",this); pb->move(10,10); pb->resize(270,270); this->setStyleSheet( "QPushButton{" /*設置邊框圖像，其上、右、下、左的邊緣距離分別為 90 90 90 90，除 4 個角外， 中間塊的處理方式：stretch 拉伸 round 平鋪 repeat 重復*/ "border-image:url(./b.png) 90 90 90 90 repeat;" "background-color: blue;" "border-width:90;}" //必須設置邊框寬度 );
工程下載：鏈接：https://pan.baidu.com/s/1HiEF75er3fO_6jMSmDo2Og 提取碼：6666
與子部件位置、大小有關的屬性
1、subcontrol-origin 類型：Origin //子控件的原點矩形，默認為 padding
2、subcontrol-position 類型：Alignment 子控件在 subcontrol-origin 屬性指定的矩形內的對齊方式，默認值取決於子控件
3、position 類型：relative | absolute 使用 left、right、top、bottom 屬性的偏移是相對坐標還是絕對坐標。默認為 relative(相對的)
4、spacing 類型：Length
部件的內部間距(比如復選按鈕和文本之間的距離)，默認值取決於當前樣式
以下類支持此屬性：QCheckBox，可選中的 QGroupBox，QRadioButton，QMenuBar
5、bottom 類型：Length
left 類型：Length
top 類型：Length
right 類型：Length
以 bootom 屬性為例(其余屬性類似)，若 position 屬性是 relative(相對的，默認值)，則將子控件向上移動一偏移量，若 position 是 absolute(絕對的)，則 bottom 屬性是指與子控件的下邊緣的距離，該距離與subcontrol-origin 屬性有關。此屬性默認值為 0。
6、height 類型：Length
width 類型：Length
子控件的高度/寬度，默認值取決於當前樣式，注意：除非另有規定，否則在部件上設置此屬性無效，若想要部件有一個固定的高度，應把 min-height 和 max-height 設置為相同的值，寬度類似
7、max-height 類型：Length
max-width 類型：Length
部件或子控件的最大高度/寬度，以上值相對於盒子模型的內容矩形
以下類支持此屬性：
QAbstractItemView 子類，QAbstractSpinBox 子類，QCheckBox，QComboBox，QFrame，QGroupBox，
QLabel，QPushButton，QRadioButton，QSizeGrip，QSpinBox，QSplitter，QStatusBar，QTextEdit，
QToolTip，QLineEdit，QMenu，QMenuBar，(注意：沒有 QDialog 和 QWidget)
8、min-height 類型：Length
min-width 類型：Length
部件或子控件的最小高度/寬度，默認值依賴於部件的內容和樣式，該值相對於盒子模型的內容矩形
以下類支持此屬性：
QAbstractItemView 子類，QAbstractSpinBox 子類，QCheckBox，QComboBox，QFrame，QGroupBox，
QLabel，QPushButton，QRadioButton，QSizeGrip，QSpinBox，QSplitter，QStatusBar，QTextEdit，
QToolTip，QLineEdit，QMenu，QMenuBar，(注意：沒有 QDialog 和 QWidget)
實例
this->resize(400,300); QSpinBox *pb=new QSpinBox(this); pb->move(33,33); pb->resize(300,200); //為使效果比較明顯，把按鈕設置得相對大一點 this->setStyleSheet( "QSpinBox::down-button{" //設置微調按鈕的向下按鈕 "subcontrol-origin:content;" //子控件的原點矩形 "subcontrol-position:right bottom;" //子控件相對於原點矩形的對齊方式 "height:22px;" "width:22px;" //設置子控件(即向下按鈕)的大小(即寬度和高度) //設置向下按鈕的位置使用絕對坐標指定，若要使用相對坐標，只需把 absolute 修改為 relative 即可 "position:absolute;" //絕對坐標 "bottom:22px;" "right:11px;" "margin:11px;" //設置向下按鈕的邊距 "background-color:red;" //使用紅色填充子控件(向下按鈕)背景 "background-clip:margin" //填充背景的區域為邊距矩形(margin)范圍 "}" );
字體、文本、圖標、圖像、不透明度屬性
|
屬性
|
類型
|
說明
|
|
1、icon-size
|
Length
|
部件中圖標的寬度和高度，可設置以下部件的圖標大小：
QCheckBox，QListView，QPushButton，QRadioButton，QTabBar，
QToolBar，QToolBox，QTreeView
|
|
2、text-align
|
Alignment
|
部件中文本的對齊方式，默認值取決於樣式
|
|
3、text-decoration
|
none沒有線
underline
下划線
overline上划線
line-through刪除線
|
附加的文本的效果
|
|
4、font
|
Font
|
設置文本字體的簡寫方法，相當於指定 font-family，font-size，font-style，
font-weight，所有遵守 QWidget::font 屬性的部件都支持此屬性。默認
為 QWidget::font 屬性
|
|
5、font-family
|
String
|
字體系列(字體族)
|
|
6、font-size
|
Font Size
|
字體的大小，僅支持 pt 和 px(像素)
|
|
7、font-style
|
Font Style
|
字體的樣式(比如是否傾斜)
|
|
8、font-weight
|
Font Weight
|
字體的重量(即字體的粗細)
|
|
9、image
|
Url
|
繪制在子控件內容矩形(content)中的圖像
繪制的圖像使用與 QIcon 相同的算法，即圖像不會放大，但在必
要時會縮小
在子控件上設置該屬性，會隱式設置子控件的寬度和高度(除非
使用 svg 圖像)
Qt4.3 之后可使用 image-position 來設置圖像在矩形內的對齊方
式
此屬性僅用於子控件，不支持其他元素
若指定了 svg，則圖像將被縮放到內容矩形的大小，注意：svg需使用 svg 插件
若還同時設置了背景圖像(background-image)和邊框圖像
(border-image)，則 image 繪制在 border-image 之上，border-image
繪制在 background-image 之上
|
|
10、image-position
|
Alignment
|
圖像的位置(對齊方式)
|
|
11、opacity
|
Number
|
部件的不透明度，其值為 0(透明)到 255(不透明)，目前僅支持工具提
示。默認值為當前樣式 QStyle::SH_ToolTipLabel_Opacity 指定的值
|
實例
this->resize(400,300); QPushButton *pb1=new QPushButton("AAA",this); pb1->move(22,22); pb1->setIcon(QIcon("./aa.jpg")); //添加一個圖標 pb1->resize(333,133); //為使效果比較明顯，把按鈕設置得相對大一點 this->setStyleSheet( "QPushButton{" "text-align:top right;" //文本對齊方式 "icon-size:30px;" //注意：此處必須帶上單位(px 表示像素) "text-decoration:underline;" //為文本添加下划線 /*設置字體，以下屬性需按照字體度量、樣式、大小、字體族的順序排列，且字體大小必須帶上單位， 否則屬性將不起作用。*/ "font:900 italic 55px Times New Roman;}" );
工程下載：鏈接：https://pan.baidu.com/s/1v3o8spefdNmTAojTp6BSXA 提取碼：6666
其他屬性
1、button-layout 類型：Number
QDialogButtonBox 或 QMessageBox 中按鈕的布局，可取值為 0，1，2，3，5，其意義如下：
0：QDialogButtonBox::WinLayout，
1：QDialogButtonBox::MacLqyout，
2：QDialogButtonBox::KdeLayout，
3：QDialogButtonBox::GnomeLayout)，
5：QDialogButtonBox::AndroidLayout，
默認值為 QStyle::SH_DialogButtonLayout 的值
2、dialogbuttonbox-buttons-have-icons 類型：Boolean //QDialogButtonBox 中的按鈕是否顯示圖標
3、lineedit-password-character 類型：Number
QLineEdit 的密碼字符(使用 unicode 數字)，比如：*{lineedit-password-character:9679}
默認為 QStyle::SH_LineEdit_PasswordCharacter 的值
4、lineedit-password-mask-delay 類型：Number //qt5.4
QLineEdit 在顯示密碼字符之前的延遲時間(毫秒)，默認為 QStyle::SH_LineEdit_PasswordMaskDelay 的值
5、messagebox-text-interaction-flags 類型：Number
消息框中與文本的交互行為，可取值基於 Qt::TextInteractionFlags 標志，比如
QMessageBox{messagebox-text-interaction-flags:5}; //即 Qt::LinksAccessibleByMouse(值為 4)與
Qt::TextSelectableByMouse(值為 1)的按位或。
默認值為 QStyle::SH_MessageBox_TextInteractionFlags 的值
6、titlebar-show-tooltips-on-buttons 類型：bool //是否在工具欄按鈕上顯示工具提示
7、widget-animation-duration 類型：Number //qt5.10
動畫的持續時間(毫秒)，0 意味着禁用動畫，默認值為 QStyle::SH_Widget_Animation_Duration 的值
8、alternate-background-color 類型：Brush
QAbstractItemView 的交替背景色，若未設置此屬性則使用 QPalette::AlternateBase 角色的顏色
9、paint-alternating-row-colors-for-empty-area 類型：bool
QTreeView 是否為空區域(即沒有項的區域)繪制交替行顏色
10、show-decoration-selected 類型：Boolean
在 QListView 中選擇是覆蓋整行還是僅覆蓋文本，默認為 QStyle::SH_ItemView_ShowDecorationSelected的值
11、gridline-color 類型：Color
QTableView 中網格線的顏色，默認為 QStyle::SH_Table_GridLineColor 的值
屬性類型
1、各符號的含義
| 分隔符，比如 0 | 1，表示 0 或者 1
* 表示 0 或更多
+ 表示 1 或更多
? 選擇0個或1個，比如(on | off)?，表示可取 on 或 off 之一，或一個都不取
{0,4} 表示 0 到 4，比如 Length{0 , 4}，表示 0 到 4 個 Length 的值
示例：
①、{top | bottom | left | right | center}* //表示可取大括號中任意值的組合比如 top left 表示左上
②、(Font Style | Font Weight){0, 2} Font Size String
以上語法表示，其值的格式必須按照如下順序指定(若順序不正確，則取值無效)：
“Font Style 或 Font Weight 的值之一或無，字體大小，一個字符串”，
假設 Font Style 屬性類型可取值為 italic，Font Weight 屬性類型可取值為一整數，Font Size 屬性類型可
取值為一像素值，String 為一字符串，則以下值是有效的取值
italic 55px "Calibri" //斜體，字的大小為 55 像素，字體族為 Calibri
900 55px "Calibri" //字體粗細為 900，大小為 55 像素，字體族為 Calibri
900 italic 55px "Calibri" 或 italic 900 55px "Calibri" //Font Style 和 Font Weight 的位置無關緊要
以下為無效的取值 900 55px italic "Calibri" //Font Size 和 Font Style 的順序不對
55px italic "Calibri" //原因同上
2、Alignment 值：{top | bottom | left | right | center}* 對齊方式
比如 QPushButton{background-position:top right} //右上角對齊
3、Url 值：url(filiename) 其中的 filename 是本地磁盤或 Qt 資源系統的文件的名稱
比如 QPushButton{background-image:url(F:/1i.png)} //讀取文件 F:/1i.png 作為背景圖像
4、Attachment 值：{scroll | fixed}*
滾動或固定，屬性 background-attachment 使用該類型，以用於 QAbstractScrollArea
5、Background 值：{Brush | Url | Repeat | Alignment}* //參見各屬性類型的取值
6、Boolean 值：0 | 1 //布爾值，取 0 或 1
7、Border 值：{Border Style | Length | Brush}* //參見各屬性類型的取值
8、Border Image 值：none | Url Number{4} (stretch | repeat) {0, 2}
該值用於指定邊框圖像(border-image)，注意值的格式，比如
QPushButton{
border-image:url(F:/1x.png) 15 25 15 25 repeat;
border-width:55;} //指定邊框圖像還需設置邊框寬度
9、Border Style 值：dashed | dot-dash | dot-dot-dash | dotted | double | grovve | inset | outset | ridge | solid | none
該屬性類型用於指定邊界線的樣式，比如 dashed 表示虛線，dotted 表示點線等
10、Box Colors 值：Brush{1, 4}
1 到 4 個 Brush 值，分別指定盒子的 top、right、bottom、left 邊界線，若未指定 left，則將與 right 相同，
若未指定 bottom，則與 top 相同，若未指定正確的顏色，則與 top 的相同，下面為示例：
QLabel{border-color:yellow} //四條邊界線都為黃色
QLabel{border-color:yellow red} //top、bottom 為黃色，left 和 right 為紅色
QLabel{border-color:yellow red blue} //top 為黃色，right 和 left 為紅色，bottom 為藍色
QLabel{border-color:yellow red blue green} //top 為黃色，right 為紅色，bottom 為藍色，left 為綠色
11、Box Lengths 值：Length{1, 4}
1 到 4 個 Length 值，分別指定盒子的 top、right、bottom、left 邊界線，其原理與 Box Colos 相同。
12、Brush 值：Color | Gradient | PaletteRole
具體可參見各屬性類型的取值，注意：Brush 屬性類型還可指定漸變色(即 Gradient 屬性類型)
13、Color 值：rgb(r, g, b) | rgba(r, g, b, a) | hsv(h, s, v) | hsva(h, s, v, a) | #rrggbb | Color Name
指定顏色，從其值可看到，顏色可使用 6 種方式指定，其中 rgb()和 rgba()可取 0~255 之間的值，或一個百分比值，hsv()或 hsva 中的 s 和 v 必須是 0~255 之間的值，h 的值是 0~359 之間的值，
比如QLabel{border-color: rgba(111,11,11, 70%);
14、Font 值：(Font Style | Font Weight){0, 2} Font Size String
字體屬性，對該屬性取值的講解
15、Font Size
值：Length //字體的大小
16、Font Style
值：normal | italic | oblique
//字體的樣式
17、Font Weight
值：normal | bold | 100 | 200 | … | 900
//字體的重量(即粗細)
18、Length
值：Number(px | pt | em |ex )?
數字后跟一個測量單位(比如像素)，在 Qt 中，必須指定測量單位，為了早期的 Qt 版本兼容，大多數情況
下，若未指定測量單位，則被視為像素，支持的單位如下：
px：像素
pt：點(即 1/72 英寸)
em：字體的 em 寬度，即字母 M 的寬度
ex：字體的 ex 寬度，即字母 X 的寬度
19、Number
值：一個 10 進制整數和實數，比如 18, 23.46 等
20、Origin
值：margin | border | padding | content
指定盒子模型中的 4 個矩形，詳見盒子模型原理(前文)
21、PaletteRole
值：alternate-base | base | bright-text | button | button-text | dark | highlight | highlighted-text | light | link |
link-visited | mid | midlight | shadow | text | window | window-text
該屬性類型的取值對應於 QPalette::ColorRole 枚舉。
22、Radius
值：Length{1,2}
1 到 2 個 Length，若只指定了一個 Length，則表示角的 1/4 圓的半徑，若指定兩個長度，則第一個長度
是 1/4 橢圓的水平半徑，第二個長度是垂直半徑
23、Repeat
值：repeat-x | repeat-y | repeat | no-repeat
表示重復性質(可實現圖像的平鋪)，其中 repeat-x 表示水平方向重復，repeat-y 表示垂直方向重復，repeat
表示水平和垂直方向重復，no-repeat 表示沒有重復。
24、Icon 值：(Url (disabled | active | normal | selected)?(on | off) ?) * 指定圖標(圖標屬性見下表)，示例
QMessageBox {
dialogbuttonbox-buttons-have-icons: true; //顯示圖標
dialog-ok-icon: url(ok.svg); //ok 按鈕的圖標
dialog-cancel-icon: url(cancel.png), //cancel 按鈕的圖標
url(grayed_cancel.png) disabled; } //禁用時 cancel 的圖標
漸變色
25、Gradient 值：qlineargradient | qradialgradient | qconicalgradient 指定
漸變填充
其中 qlinearGradient 表示線性漸變，qradialgradient 表示徑向漸變，qconicalgradient 表示圓錐漸變
實例： 線性漸變
this->resize(400,300); QPushButton *pb1=new QPushButton("AAA",this); pb1->move(22,22); pb1->resize(333,133); //為使效果比較明顯，把按鈕設置得相對大一點 this->setStyleSheet( "QPushButton {" "background: qlineargradient(" //設置線性漸變背景 "x1:0, y1:0, x2:1, y2:1," //漸變范圍從左上角(0,0)，到右下角(1,1)，也決定了漸變方向 "stop:0 red, stop: 0.5 yellow, stop:1 blue)" //起點顏色為紅色，中點位置顏色為黃色，終點顏色為藍色 "}" );
實例：圓錐漸變(角度漸變)
this->resize(400,300); QPushButton *pb1=new QPushButton("AAA",this); pb1->move(22,22); pb1->resize(333,133); //為使效果比較明顯，把按鈕設置得相對大一點 this->setStyleSheet( "QPushButton {" "background: qconicalgradient(" //圓錐漸變 "cx:0.5, cy:0.5," // 圓心位置 "angle:30," //起始角度 "stop:0 red, stop:0.5 yellow,stop:1 blue" //指定漸變顏色 ")" "}" );
實例：徑向漸變(輻射漸變)
以圓心為中心顯示漸變。(cx, cy)是中點，半徑(radius)是以中點為圓心的圓的半徑，(fx, fy)是漸變的起點
this->resize(400,300); QPushButton *pb1=new QPushButton("AAA",this); pb1->move(22,22); pb1->resize(333,133); //為使效果比較明顯，把按鈕設置得相對大一點 this->setStyleSheet( "QPushButton {" "background: qradialgradient(" //徑向漸變 "cx:0, cy:0," // 圓心位置 "radius: 1," //半徑 "fx:0.5, fy:0.5," //漸變的起點 " stop:0 red,stop:0.5 yellow, stop:1 green" //指定漸變顏色 ")" "}" );
