目錄
1 -> 引言：為什么需要 Qt 樣式表？
2 -> Qt 樣式表基礎
2.1 -> 什么是 Qt 樣式表
2.2 -> 基本語法結構
3 -> 選擇器類型
3.1 -> 通用選擇器
3.2 -> 類型選擇器
3.3 -> 類選擇器
3.4 -> ID 選擇器（通過 objectName）
3.5 -> 屬性選擇器
3.6 -> 子控件選擇器
3.7 -> 狀態選擇器
4 -> 常用屬性詳解
4.1 -> 背景與邊框
4.2 -> 文本與字體
4.3 -> 尺寸與邊距
4.4 -> 漸變與圖像
5 -> 復雜控件樣式化
5.1 -> QComboBox 樣式
5.2 -> QSlider 樣式
5.3 -> QTabWidget
6 -> 代碼示例
6.1 -> 設置文本樣式
6.2 -> 實現切換夜間模式
1 -> 引言：為什么需要 Qt 樣式表？
在 GUI 開發中，應用程序的外觀和用戶體驗至關重要。Qt 提供了強大的樣式表系統，允許開發者使用類似 CSS 的語法來美化應用程序界面，無需重寫繪圖代碼或創建自定義控件。無論想實現現代化界面、保持跨平臺一致性，還是創建品牌特定的視覺風格，Qt 樣式表都能輕松實現。
2 -> Qt 樣式表基礎
2.1 -> 什么是 Qt 樣式表
Qt 樣式表（QSS）是一種基于 CSS 語法的機制，用于自定義 Qt 控件的外觀。它允許你設置顏色、字體、邊框、背景等屬性，而無需子類化 Qt 控件。
CSS（Cascading Style Sheets 層疊樣式表）本身屬于網頁前端技術。主要就是用來描述界面的樣式。
所謂 “樣式”，包括不限于大小，位置，顏色，間距，字體，背景，邊框等。
平時所看到的豐富多彩的網頁，就會用到大量的 CSS。
Qt 雖然是做 GUI 開發，但實際上和網頁前端有很多異曲同工支持。因此 Qt 也引入了對于 CSS 的支持。
CSS 中可以設置的樣式屬性非常多。基于這些屬性 Qt 只能支持其中一部分，稱為 QSS（Qt Style Sheet）。
2.2 -> 基本語法結構
選擇器 {屬性: 值;屬性: 值;
}示例：
QPushButton {background-color: #3498db;color: white;border: 2px solid #2980b9;border-radius: 5px;padding: 5px 10px;
}3 -> 選擇器類型
3.1 -> 通用選擇器
* {font-family: "Microsoft YaHei";font-size: 12px;
}3.2 -> 類型選擇器
QPushButton {/* 所有QPushButton的樣式 */
}3.3 -> 類選擇器
.QPushButton {/* 與類型選擇器類似 */
}3.4 -> ID 選擇器（通過 objectName）
QPushButton#loginButton {background-color: green;
}3.5 -> 屬性選擇器
QPushButton[flat="true"] {border: none;
}3.6 -> 子控件選擇器
QComboBox::drop-down {/* QComboBox下拉箭頭的樣式 */
}3.7 -> 狀態選擇器
QPushButton:hover {background-color: #2980b9;
}QPushButton:pressed {background-color: #21618c;
}QPushButton:disabled {color: gray;background-color: #dddddd;
}4 -> 常用屬性詳解
4.1 -> 背景與邊框
QWidget {background-color: #f0f0f0; /* 背景顏色 */border: 1px solid #cccccc; /* 邊框：寬度 樣式 顏色 */border-radius: 4px; /* 圓角半徑 */
}4.2 -> 文本與字體
QLabel {color: #333333; /* 文本顏色 */font-family: "Arial"; /* 字體家族 */font-size: 14px; /* 字體大小 */font-weight: bold; /* 字體粗細 */
}4.3 -> 尺寸與邊距
QPushButton {min-width: 80px; /* 最小寬度 */max-width: 200px; /* 最大寬度 */height: 30px; /* 固定高度 */padding: 5px 10px; /* 內邊距 */margin: 2px; /* 外邊距 */
}4.4 -> 漸變與圖像
QPushButton {/* 線性漸變 */background: qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 #3498db, stop:1 #2980b9);/* 徑向漸變 */background: qradialgradient(cx:0.5, cy:0.5, radius: 0.5,fx:0.5, fy:0.5,stop:0 white, stop:1 green);/* 使用圖像 */border-image: url(:/images/button.png) 3 3 3 3 stretch stretch;
}5 -> 復雜控件樣式化
5.1 -> QComboBox 樣式
QComboBox {border: 1px solid #cccccc;border-radius: 3px;padding: 1px 18px 1px 3px;min-width: 6em;
}QComboBox::drop-down {subcontrol-origin: padding;subcontrol-position: top right;width: 15px;border-left-width: 1px;border-left-color: darkgray;border-left-style: solid;border-top-right-radius: 3px;border-bottom-right-radius: 3px;
}QComboBox::down-arrow {image: url(:/images/down_arrow.png);width: 10px;height: 10px;
}5.2 -> QSlider 樣式
QSlider::groove:horizontal {border: 1px solid #999999;height: 8px;background: #f0f0f0;border-radius: 4px;
}QSlider::handle:horizontal {background: #3498db;border: 1px solid #2980b9;width: 18px;margin: -5px 0;border-radius: 9px;
}QSlider::sub-page:horizontal {background: #3498db;border-radius: 4px;
}5.3 -> QTabWidget
QTabWidget::pane {border: 1px solid #cccccc;background: white;
}QTabWidget::tab-bar {alignment: center;
}QTabBar::tab {background: #f0f0f0;border: 1px solid #cccccc;border-bottom: none;padding: 5px 15px;border-top-left-radius: 4px;border-top-right-radius: 4px;
}QTabBar::tab:selected {background: white;margin-bottom: -1px;
}6 -> 代碼示例
6.1 -> 設置文本樣式
1. 在界面上創建 label
2. 編輯右側的 styleSheet 屬性，設置樣式
此處的語法格式同 CSS，使用鍵值對的方式設置樣式。其中鍵和值之間使用 ：分割。鍵值對之間使用 ；分割。
另外，Qt Designer 只能對樣式的基本格式進行校驗，不能檢測出哪些樣式不被 Qt 支持。比如 text-align: center 這樣的文本居中操作，就無法支持。
編輯完成樣式之后，可以看到在 Qt Designer 中能夠實時預覽出效果。
3. 運行程序，可以看到實際效果和預覽效果基本一致。
6.2 -> 實現切換夜間模式
1. 在界面上創建一個多行輸入框（Text Edit）和兩個按鈕
objectName 分別是?pushButton_light 和?pushButton_dark
2. 編寫按鈕的 slot 函數
#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);
}Widget::~Widget()
{delete ui;
}void Widget::on_pushButton_light_clicked()
{// 設置窗口樣式this->setStyleSheet("background-color: RGB(240, 240, 240);");// 設置輸入框樣式ui->plainTextEdit->setStyleSheet("background-color: white; color: black;");// 設置按鈕樣式ui->pushButton_light->setStyleSheet("color: black;");ui->pushButton_dark->setStyleSheet("color: black;");
}void Widget::on_pushButton_dark_clicked()
{// 設置窗口樣式this->setStyleSheet("background-color: black;");// 設置輸入框樣式ui->plainTextEdit->setStyleSheet("background-color: black; color: white;");// 設置按鈕樣式ui->pushButton_light->setStyleSheet("color: white;");ui->pushButton_dark->setStyleSheet("color: white;");
}
關于計算機中的顏色表示
計算機中使用 “像素” 表示屏幕上的一個基本單位（也就是一個發亮的光點）。
每個光點都使用三個字節表示顏色，分別是 R（red），G（green），B（blue）一個字節表示（取值范圍是 0-255，或者 0x00-0xFF）。
混合三種不同顏色的數值比例，就能搭配出千千萬萬的顏色出來。
- rgb(255, 0, 0) 或者 #FF0000 或者 #F00 表示純紅色。
- rgb(0,?255, 0) 或者 #00FF00 或者 #0F0 表示純綠色。
- rgb(0, 0, 255) 或者 #0000FF?或者 #00F?表示純藍色。
- rgb(255, 255, 255) 或者 #FFFFFF?或者 #FFF?表示純白色。
- rgb(0, 0, 0) 或者 #000000 或者 #000 表示純黑色。
當然，上述規則只針對一般的程序而言是這么設定的。實際的顯示器，可能是 8bit 色深或者 10bit 色深等，實際情況會更加復雜。
3. 運行程序，點擊 “日間模式”，就是淺色背景，深色文字；點擊 “夜間模式”，就是深色背景，淺色文字
感謝各位大佬支持！！！
互三啦！！！
