Qt 样式表 QSS

基本语法

QSS 语法和 CSS 几乎一样：

选择器 {
    属性: 值;
    属性: 值;
}

/* 支持的选择器 */
QPushButton              /* 类选择器 */
QPushButton#okBtn        /* ID 选择器 */
QPushButton[flat="true"] /* 属性选择器 */
QWidget > QPushButton    /* 子控件 */
QWidget QPushButton      /* 后代 */

设置方式

// 方式 1：全局样式（作用于整个应用）
qApp->setStyleSheet(
    "QPushButton { background: #4CAF50; color: white; }"
);

// 方式 2：单个控件
button->setStyleSheet(
    "QPushButton { background: red; }"
);

// 方式 3：从文件加载
QFile f(":/style.qss");
f.open(QFile::ReadOnly);
qApp->setStyleSheet(f.readAll());

常用控件样式

QPushButton

QPushButton {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
}

QPushButton:hover {
    background: #45a049;
}

QPushButton:pressed {
    background: #3d8b40;
}

QPushButton:disabled {
    background: #cccccc;
    color: #888888;
}

QLineEdit

QLineEdit {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 14px;
}

QLineEdit:focus {
    border-color: #4CAF50;
    /* 去掉默认的蓝色焦点框 */
    outline: none;
}

QTableView / QTableWidget

QTableView {
    border: 1px solid #e0e0e0;
    gridline-color: #f0f0f0;
    selection-background-color: #e8f5e9;
    alternate-background-color: #fafafa;
}

QTableView::item {
    padding: 4px 8px;
}

QHeaderView::section {
    background: #f5f5f5;
    border: none;
    border-bottom: 2px solid #e0e0e0;
    padding: 6px 8px;
    font-weight: bold;
}

QScrollBar

QScrollBar:vertical {
    width: 8px;
    background: transparent;
}
QScrollBar::handle:vertical {
    background: #c0c0c0;
    border-radius: 4px;
    min-height: 30px;
}
QScrollBar::handle:vertical:hover {
    background: #a0a0a0;
}
QScrollBar::add-line:vertical,
QScrollBar::sub-line:vertical {
    height: 0;
}

伪状态

:hover          /* 鼠标悬停 */
:pressed        /* 按下 */
:checked        /* 选中（CheckBox/RadioButton） */
:disabled       /* 禁用 */
:enabled        /* 启用 */
:focus          /* 获得焦点 */
:selected       /* 被选中（列表/表格项） */
:read-only      /* 只读 */
:editable       /* 可编辑 */
:indeterminate  /* 半选状态 */

子控件

/* QComboBox 下拉箭头 */
QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 20px;
}
QComboBox::down-arrow {
    image: url(:/arrow-down.png);
}

/* QSpinBox 上下按钮 */
QSpinBox::up-button { subcontrol-position: top right; }
QSpinBox::down-button { subcontrol-position: bottom right; }

/* QTabWidget 标签 */
QTabBar::tab { padding: 8px 16px; }
QTabBar::tab:selected { border-bottom: 2px solid #4CAF50; }

暗色主题实战

void setDarkTheme() {
    qApp->setStyleSheet(R"(
        * {
            color: #c9d1d9;
            background: #0d1117;
        }
        QMainWindow, QDialog {
            background: #0d1117;
        }
        QPushButton {
            background: #21262d;
            border: 1px solid #30363d;
            padding: 6px 12px;
            border-radius: 6px;
        }
        QPushButton:hover {
            background: #30363d;
            border-color: #58a6ff;
        }
        QLineEdit, QTextEdit, QPlainTextEdit {
            background: #161b22;
            border: 1px solid #30363d;
            border-radius: 6px;
            padding: 6px 10px;
            color: #c9d1d9;
        }
        QLineEdit:focus {
            border-color: #58a6ff;
        }
        QTableView {
            background: #161b22;
            border: 1px solid #30363d;
            gridline-color: #21262d;
            selection-background-color: #1f3a5f;
        }
        QHeaderView::section {
            background: #21262d;
            border-bottom: 1px solid #30363d;
            color: #c9d1d9;
        }
        QScrollBar:vertical {
            background: #0d1117;
            width: 8px;
        }
        QScrollBar::handle:vertical {
            background: #30363d;
            border-radius: 4px;
        }
        QMenuBar {
            background: #161b22;
            border-bottom: 1px solid #30363d;
        }
        QStatusBar {
            background: #161b22;
            border-top: 1px solid #30363d;
        }
    )");
}

// 在 QApplication 构造后调用
int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
    setDarkTheme();
    // ...
}

QSS vs QPalette

	QSS	QPalette
灵活度	高（CSS 语法）	低（固定角色）
学习曲线	低（熟悉 CSS 即可）	中
性能	略低（解析样式表）	高
覆盖范围	大部分控件	所有控件
推荐场景	日常开发首选	全局颜色调色

调试技巧

// 1. 查看控件实际样式
qDebug() << button->styleSheet();

// 2. 查看应用了哪些样式规则
// 运行：QT_DEBUG_PLUGINS=1 ./myapp

// 3. 常见问题
// - 样式不生效 → 检查选择器优先级
// - 子控件不继承 → 检查父子关系
// - 某些属性被忽略 → 该控件不支持此属性
//   (例如 QPushButton 不支持 color 继承，需直接设置)