轉自個人博客
**Qt樣式表(Qt Style Sheets,簡稱QSS)**是一種類似于HTML中的CSS(層疊樣式表)的機制,用于自定義Qt應用程序的外觀。通過QSS,開發者可以輕松地修改控件的外觀,而無需更改底層代碼邏輯。這種方式不僅提高了開發效率,還增強了界面設計的靈活性。
1. QSS概要
1.1 QSS作用
QSS允許開發者通過聲明式的方式設置控件的外觀屬性,例如顏色、字體、邊框、間距等。與直接在代碼中設置樣式相比,QSS具有以下優點:
- 分離樣式與邏輯:樣式和功能代碼分離,便于維護。
- 動態切換主題:可以通過加載不同的QSS文件實現主題切換。
- 跨平臺一致性:確保不同平臺上的控件外觀一致。
1.2 QSS與CSS的關系
QSS借鑒了CSS的設計思想,語法上非常相似。熟悉CSS的開發者可以快速上手QSS。然而,QSS是專門為Qt控件設計的,因此支持的屬性和選擇器可能與CSS有所不同。
1.3 QSS基本語法
QSS的基本語法如下:
選擇器 {屬性: 值;
}
- 選擇器:用于指定要應用樣式的控件或控件組,支持多種類型的選擇器來具體選擇應用樣式的對象。
- 屬性:控件的外觀屬性。
- 值:屬性的具體取值,不同的屬性可能需要使用不同的值。
QPushButton {color: white;background-color: blue;border: 1px solid black;
}
1.4 QSS在QT中的使用
-
可以在Qt Designer中直接鍵入樣式表
-
在Qt中對指定控件使用
setStyleSheet(樣式表字符串)
方法設置。- 參數是字符串類型,引號內使用QSS語法,如果多行書寫,也要記得將每一行套用雙引號來轉化成一個字符串。
- 樣式表是默認遞歸套用到子控件的,如果只想套用到指定的控件,就需要細分選擇選擇器。
- 對一個控件不支持重復設置樣式表,只有最后一個設置的樣式表生效。但可以分別對父控件和子控件設置不同樣式表,默認子控件樣式在父控件之上生效。
- 因為這種方法是直接對控件設置樣式表,所以也支持省略選擇器,以自動套用當前控件類型。
// 對整個控件如下應用樣式表會套用到所有子控件QPushButton上 auto myWidget = new QWidget(); myWidget->setStyleSheet("QPushButton { background-color: yellow }"); // 多行書寫需要每一行使用雙引號來合并成一個字符串 myWidget->setStyleSheet("QWidget { background-color: #3a3a3a }""QPushButton { background-color: yellow }");// 也可以直接對控件設置樣式 auto myButton = new QPushButton(); myButton->setStyleSheet("background-color: yellow");
2. QSS選擇器
2.1 選擇器類型
QSS支持多種選擇器,常用的包括:
-
類型選擇器:根據控件類型應用樣式。具體支持的控件類型見2.2。
QPushButton {color: red; }
-
類選擇器:根據控件的
objectName
或class
屬性應用樣式,使用**#
**來指定控件名稱。可以先使用控件的
getObjectName()
方法獲取控件名稱,或者使用setObjectName(QString name)
方法來指定控件名稱QPushButton#myButton { /* 允許省略QPushButton */background-color: green; }
// 設置、查看控件名稱 auto myButton = new QPushButton(); myWidget->setObjectName("myButton"); myWidget->getObjectName(); // 返回"myButton"
-
子控件選擇器:針對復合控件的子部件應用樣式,使用**
::
**來指定子控件。QComboBox::drop-down { /* 下拉按鈕 */image: url(dropdown.png); /* 自定義箭頭圖標 */ }
-
狀態選擇器:根據控件的狀態(如
hover
、pressed
)應用樣式,使用**:
**來指定控件狀態。QPushButton:hover {background-color: yellow; }
2.2 選擇器控件列表
控件類型 | 說明 | 子部件 | 偽狀態 |
---|---|---|---|
QWidget | 所有控件的基類,支持通用樣式屬性(如背景顏色、邊框等)。 | 無 | 無 |
QAbstractScrollArea | 滾動區域的抽象基類,支持滾動條樣式。 | ::corner (滾動條交匯處的角落區域),::viewport (滾動區域的內容視圖) | 無 |
QDialog | 對話框的基類,支持對話框窗口和子控件的樣式。 | 無 | 無 |
QAbstractButton | 抽象按鈕基類,支持按鈕樣式(如文本、圖標、背景等)。 | 無 | :hover (鼠標懸停時),:pressed (鼠標按下時),:checked (按鈕被選中時),:unchecked (按鈕未被選中時),:disabled (按鈕被禁用時) |
QPushButton | 標準按鈕控件,支持按鈕樣式。 | 無 | :hover (鼠標懸停時),:pressed (鼠標按下時),:checked (按鈕被選中時),:unchecked (按鈕未被選中時),:disabled (按鈕被禁用時),:default (默認按鈕),:flat (扁平化按鈕) |
QRadioButton | 單選按鈕控件,支持單選按鈕樣式。 | 無 | :hover (鼠標懸停時),:pressed (鼠標按下時),:checked (按鈕被選中時),:unchecked (按鈕未被選中時),:disabled (按鈕被禁用時) |
QCheckBox | 復選框控件,支持復選框樣式。 | 無 | :hover (鼠標懸停時),:pressed (鼠標按下時),:checked (按鈕被選中時),:unchecked (按鈕未被選中時),:indeterminate (不確定狀態),:disabled (按鈕被禁用時) |
QComboBox | 下拉框控件,支持下拉按鈕、箭頭、列表項等子控件樣式。 | ::drop-down (下拉按鈕),::down-arrow (下拉箭頭),::item (下拉列表中的項),::indicator (選中指示器) | :hover (鼠標懸停時),:pressed (鼠標按下時),:disabled (控件被禁用時),:on (下拉框打開時),:off (下拉框關閉時) |
QScrollBar | 滾動條控件,支持滑塊、增加/減少按鈕等子控件樣式。 | ::handle (滑塊),::add-line (增加按鈕),::sub-line (減少按鈕),::add-page (滑塊上方的背景區域),::sub-page (滑塊下方的背景區域) | :hover (鼠標懸停時),:pressed (鼠標按下時),:disabled (滾動條被禁用時) |
QSlider | 滑塊控件,支持滑塊手柄樣式。 | ::groove (滑槽),::handle (滑塊手柄),::add-page (滑塊上方的背景區域),::sub-page (滑塊下方的背景區域) | :hover (鼠標懸停時),:pressed (鼠標按下時),:disabled (滑塊被禁用時) |
QProgressBar | 進度條控件,支持進度塊樣式。 | ::chunk (進度塊) | :hover (鼠標懸停時),:disabled (進度條被禁用時) |
QTabWidget | 標簽頁控件,支持標簽欄、標簽頁等子控件樣式。 | ::pane (標簽頁的內容區域),::tab-bar (標簽欄) | :hover (鼠標懸停時),:disabled (控件被禁用時) |
QTabBar | 標簽欄控件,支持標簽頁樣式。 | ::tab (標簽頁),::close-button (關閉按鈕),::tear (拖拽分離的標簽),::scroller (滾動按鈕) | :hover (鼠標懸停時),:selected (標簽頁被選中時),:disabled (標簽頁被禁用時) |
QHeaderView | 表頭控件,支持表格或樹形視圖的表頭樣式。 | ::section (表頭單元格) | :hover (鼠標懸停時),:pressed (鼠標按下時),:disabled (表頭被禁用時) |
QMenu | 菜單控件,支持菜單項、分隔符等樣式。 | ::item (菜單項),::separator (分隔符),::indicator (選中指示器),::right-arrow (右箭頭),::left-arrow (左箭頭) | :hover (鼠標懸停時),:pressed (鼠標按下時),:disabled (菜單項被禁用時),:checked (菜單項被選中時),:unchecked (菜單項未被選中時) |
QMenuBar | 菜單欄控件,支持菜單欄項樣式。 | ::item (菜單欄項) | :hover (鼠標懸停時),:pressed (鼠標按下時),:disabled (菜單欄項被禁用時) |
QToolBar | 工具欄控件,支持工具欄按鈕、分隔符等樣式。 | ::separator (分隔符),::handle (拖動手柄) | :hover (鼠標懸停時),:pressed (鼠標按下時),:disabled (工具欄被禁用時) |
QDockWidget | 停靠窗口控件,支持標題欄、關閉按鈕等樣式。 | ::title (標題欄),::close-button (關閉按鈕),::float-button (浮動按鈕) | :hover (鼠標懸停時),:pressed (鼠標按下時),:disabled (停靠窗口被禁用時) |
QStatusBar | 狀態欄控件,支持狀態欄消息樣式。 | 無 | 無 |
QMainWindow | 主窗口控件,支持中央部件、工具欄、狀態欄等樣式。 | 無 | 無 |
QLineEdit | 單行文本輸入框控件,支持文本、占位符、邊框等樣式。 | ::clear-button (清除按鈕),::up-button (向上按鈕),::down-button (向下按鈕) | :hover (鼠標懸停時),:pressed (鼠標按下時),:disabled (輸入框被禁用時),:read-only (只讀模式) |
QTextEdit | 多行文本編輯框控件,支持文本、滾動條等樣式。 | ::corner (滾動條交匯處的角落區域),::viewport (滾動區域的內容視圖) | :hover (鼠標懸停時),:disabled (文本編輯框被禁用時) |
QPlainTextEdit | 純文本編輯框控件,支持文本、滾動條等樣式。 | ::corner (滾動條交匯處的角落區域),::viewport (滾動區域的內容視圖) | :hover (鼠標懸停時),:disabled (純文本編輯框被禁用時) |
QSpinBox | 數值輸入框控件,支持上下箭頭按鈕、文本等樣式。 | ::up-button (向上按鈕),::down-button (向下按鈕),::up-arrow (向上箭頭),::down-arrow (向下箭頭) | :hover (鼠標懸停時),:pressed (鼠標按下時),:disabled (數值輸入框被禁用時) |
QDoubleSpinBox | 雙精度數值輸入框控件,支持上下箭頭按鈕、文本等樣式。 | ::up-button (向上按鈕),::down-button (向下按鈕),::up-arrow (向上箭頭),::down-arrow (向下箭頭) | :hover (鼠標懸停時),:pressed (鼠標按下時),:disabled (雙精度數值輸入框被禁用時) |
QDateTimeEdit | 日期時間輸入框控件,支持上下箭頭按鈕、文本等樣式。 | ::up-button (向上按鈕),::down-button (向下按鈕),::up-arrow (向上箭頭),::down-arrow (向下箭頭) | :hover (鼠標懸停時),:pressed (鼠標按下時),:disabled (日期時間輸入框被禁用時) |
QAbstractItemView | 抽象項視圖基類,支持表格、列表、樹形視圖的樣式。 | ::item (項),::branch (分支節點),::indicator (選中指示器) | :hover (鼠標懸停時),:selected (項被選中時),:disabled (項被禁用時),:checked (項被選中時),:unchecked (項未被選中時) |
QSplitter | 分割器控件,支持分割線樣式。 | ::handle (拖動手柄) | :hover (鼠標懸停時),:pressed (鼠標按下時),:disabled (分割器被禁用時) |
QCalendarWidget | 日歷控件,支持日歷網格、選中日期等樣式。 | ::navigation-bar (導航欄),::month-button (月份按鈕),::year-button (年份按鈕),::prev-month-button (上一月按鈕),::next-month-button (下一月按鈕) | :hover (鼠標懸停時),:pressed (鼠標按下時),:disabled (日歷控件被禁用時) |
3. QSS屬性列表
以下是QSS支持的常用屬性及其詳細說明:
3.1 顏色與背景
屬性 | 描述 | 示例 |
---|---|---|
color | 設置文本顏色 | color: red; |
background-color | 設置背景顏色 | background-color: blue; |
background-image | 設置背景圖片 | background-image: url(bg.png); |
background | 設置背景顏色和圖片 | background: red url(bg.png); |
background-repeat | 設置背景圖片重復方式 | background-repeat: no-repeat; |
background-position | 設置背景圖片位置 | background-position: center; |
3.2 字體
屬性 | 描述 | 示例 |
---|---|---|
font-family | 設置字體名稱 | font-family: Arial; |
font-size | 設置字體大小 | font-size: 14px; |
font-weight | 設置字體粗細 | font-weight: bold; |
font-style | 設置字體樣式(如斜體) | font-style: italic; |
font | 綜合設置字體屬性 | font: bold 14px Arial; |
3.3 邊框
屬性 | 描述 | 示例 |
---|---|---|
border | 設置邊框樣式 | border: 1px solid black; |
border-radius | 設置圓角半徑 | border-radius: 5px; |
border-color | 設置邊框顏色 | border-color: red; |
border-width | 設置邊框寬度 | border-width: 2px; |
border-style | 設置邊框樣式(如實線、虛線) | border-style: dashed; |
3.4 間距與對齊
屬性 | 描述 | 示例 |
---|---|---|
padding | 設置內邊距 | padding: 10px; |
margin | 設置外邊距 | margin: 5px; |
text-align | 設置文本對齊方式 | text-align: center; |
spacing | 設置控件內部間距 | spacing: 5px; |
alignment | 設置內容對齊方式 | alignment: Qt::AlignCenter; |
3.5 其他屬性
屬性 | 描述 | 示例 |
---|---|---|
min-width | 設置最小寬度 | min-width: 100px; |
max-width | 設置最大寬度 | max-width: 200px; |
min-height | 設置最小高度 | min-height: 50px; |
max-height | 設置最大高度 | max-height: 100px; |
opacity | 設置透明度 | opacity: 0.5; |
icon | 設置圖標 | icon: url(icon.png); |
image | 設置圖片 | image: url(image.png); |
4. QSS的高級用法
以下是Qt樣式表(QSS)的高級用法詳解。
4.1 偽狀態組合(多狀態疊加控制)
QSS允許通過組合多個偽狀態實現精確的交互反饋。
QPushButton:hover:checked { /* 按鈕同時懸停且被選中 */background-color: #FFA500; /* 橙色 */border: 2px solid darkorange;
}
4.2 繼承與層疊機制
QSS遵循CSS的層疊規則,但需注意Qt控件的樣式繼承特性。即前面提到的子控件可以在父控件之上設置樣式。
QWidget {font-family: "Arial";font-size: 12pt;
}QPushButton { /* 是QWidget的子控件 *//* 繼承自QWidget的字體設置 */color: white;
}
4.3 動態屬性與條件樣式
通過QObject::setProperty()
動態改變控件樣式。
先在代碼中設置屬性:
button->setProperty("priority", "high");
然后可以在QSS中匹配屬性,以指定設置樣式表:
QPushButton[priority="high"] {background-color: #FF4444;font-weight: bold;
}
附高級用法:狀態切換動畫
// 通過屬性切換實現動畫效果
button->setProperty("state", "active");
qApp->style()->unpolish(button);
qApp->style()->polish(button);
4.4 復雜選擇器組合
通過組合選擇器實現精準樣式定位。
-
相鄰兄弟選擇器
QLineEdit + QPushButton {margin-left: 10px; /* 緊接在輸入框后的按鈕 */ }
-
層級嵌套選擇
QTabWidget > QTabBar::tab:first-child {border-radius: 5px 0 0 0; /* 第一個標簽頁特殊樣式 */ }
4.5 自定義控件樣式
為自定義Widget實現完整QSS支持,可以自定義可樣式化的子部件,如下:
class CustomWidget : public QWidget {Q_OBJECTQ_PROPERTY(QString mode READ mode WRITE setMode)
public:// 注冊子部件類型Q_ENUMS(SubControls)enum SubControls { SC_Indicator = 0x1 };
};
然后在QSS中可以設置樣式表:
CustomWidget::indicator {width: 20px;height: 20px;
}
4.6 高效調試技巧
在實際編碼過程中,常用如下幾種快速定位樣式問題的方法。
-
樣式探測器
qDebug() << widget->styleSheet(); // 輸出當前樣式
-
邊界高亮法
* {border: 1px solid red !important; /* 顯示所有控件邊界 */ }
-
狀態監測法
// 打印控件狀態 qDebug() << "Hover:" << button->underMouse()<< "Pressed:" << button->isDown();
4.7 性能優化策略
- 避免全局選擇器:盡量使用ID或類選擇器
- 合并重復樣式:減少重復屬性定義
- 預編譯QSS:將樣式表編譯為二進制資源
- 分層加載:按模塊動態加載樣式表
/* 優化前 */
QPushButton#okBtn { color: white; }
QPushButton#cancelBtn { color: white; }/* 優化后 */
#okBtn, #cancelBtn {color: white;
}