QT之QSS的使用方法和常用控件的样式设置

QSS（Qt Style Sheets）是QT中用于界面美化的强大工具，类似于CSS但针对QT控件进行了优化。下面将详细介绍QSS的使用方法和常用控件的样式设置。

QSS基础语法

基本选择器

cpp 复制代码

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


// 通用选择器
* { color: black; }

// 类型选择器
QPushButton { background: red; }

// 类选择器
.QPushButton { border: 1px solid; }

// ID选择器
QPushButton#okButton { color: green; }

// 子控件选择器
QComboBox::drop-down { width: 20px; }

// 伪状态选择器
QPushButton:hover { background: blue; }

常用属性

cpp 复制代码

/* 颜色和背景 */
color: #ff0000;
background-color: rgba(255, 0, 0, 128);
background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 red, stop:1 blue);

/* 边框 */
border: 2px solid #ccc;
border-radius: 5px;
border-top: 1px dashed black;

/* 字体 */
font-family: "Microsoft YaHei";
font-size: 14px;
font-weight: bold;
font-style: italic;

/* 尺寸和边距 */
width: 100px;
height: 30px;
padding: 5px;
margin: 10px;

常用控件QSS设置

QPushButton

cpp 复制代码

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

QPushButton:hover {
    background-color: #45a049;
}

QPushButton:pressed {
    background-color: #3d8b40;
}

QPushButton:disabled {
    background-color: #cccccc;
    color: #666666;
}

QLineEdit

cpp 复制代码

QLineEdit {
    border: 2px solid #ddd;
    border-radius: 4px;
    padding: 8px;
    font-size: 14px;
    background-color: white;
}

QLineEdit:focus {
    border-color: #2196F3;
    background-color: #f8fdff;
}

QLineEdit[echoMode="2"] { /* 密码模式 */
    font-family: "Courier New";
}

QComboBox

cpp 复制代码

QComboBox {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px;
    background: white;
    min-width: 6em;
}

QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 20px;
    border-left: 1px solid #ccc;
}

QComboBox::down-arrow {
    image: url(:/icons/arrow-down.png);
    width: 12px;
    height: 12px;
}

QComboBox QAbstractItemView {
    border: 1px solid #ccc;
    background: white;
    selection-background-color: #2196F3;
}

QCheckBox & QRadioButton

cpp 复制代码

QCheckBox, QRadioButton {
    spacing: 5px;
    color: #333;
}

QCheckBox::indicator, QRadioButton::indicator {
    width: 16px;
    height: 16px;
}

QCheckBox::indicator:unchecked {
    border: 1px solid #ccc;
    background: white;
}

QCheckBox::indicator:checked {
    border: 1px solid #2196F3;
    background: #2196F3;
    image: url(:/icons/checkmark.png);
}

QRadioButton::indicator:unchecked {
    border: 1px solid #ccc;
    border-radius: 8px;
    background: white;
}

QRadioButton::indicator:checked {
    border: 1px solid #2196F3;
    border-radius: 8px;
    background: #2196F3;
}

QSlider

cpp 复制代码

QSlider::groove:horizontal {
    border: 1px solid #999999;
    height: 8px;
    background: qlineargradient(x1:0, y1:0, x2:0, y2:1, 
                              stop:0 #B1B1B1, stop:1 #c4c4c4);
    border-radius: 4px;
}

QSlider::handle:horizontal {
    background: qlineargradient(x1:0, y1:0, x2:1, y2:1, 
                              stop:0 #b4b4b4, stop:1 #8f8f8f);
    border: 1px solid #5c5c5c;
    width: 18px;
    margin: -2px 0;
    border-radius: 3px;
}

QSlider::sub-page:horizontal {
    background: #2196F3;
    border-radius: 4px;
}

QProgressBar

cpp 复制代码

QProgressBar {
    border: 2px solid grey;
    border-radius: 5px;
    text-align: center;
    background-color: #f0f0f0;
}

QProgressBar::chunk {
    background-color: #4CAF50;
    border-radius: 3px;
    width: 10px;
    margin: 0.5px;
}

QTabWidget

cpp 复制代码

QTabWidget::pane {
    border: 1px solid #ccc;
    background: white;
}

QTabBar::tab {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                              stop: 0 #f6f7fa, stop: 1 #dadbde);
    border: 1px solid #ccc;
    border-bottom: none;
    padding: 8px 16px;
    margin-right: 2px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

QTabBar::tab:selected {
    background: white;
    border-color: #ccc;
    border-bottom-color: white;
}

QTabBar::tab:hover:!selected {
    background: #e0e0e0;
}

QGroupBox

cpp 复制代码

QGroupBox {
    font-weight: bold;
    border: 2px solid #ccc;
    border-radius: 5px;
    margin-top: 1ex;
    padding-top: 10px;
    background-color: #f9f9f9;
}

QGroupBox::title {
    subcontrol-origin: margin;
    subcontrol-position: top left;
    left: 10px;
    padding: 0 8px;
    background-color: #2196F3;
    color: white;
    border-radius: 3px;
}

QMenu & QMenuBar

cpp 复制代码

QMenuBar {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}

QMenuBar::item {
    padding: 5px 10px;
    background: transparent;
}

QMenuBar::item:selected {
    background: #2196F3;
    color: white;
}

QMenu {
    background-color: white;
    border: 1px solid #ccc;
}

QMenu::item {
    padding: 5px 20px;
}

QMenu::item:selected {
    background-color: #2196F3;
    color: white;
}

QMenu::separator {
    height: 1px;
    background: #ccc;
    margin: 5px 0;
}

高级技巧

渐变效果

cpp 复制代码

/* 线性渐变 */
background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
                          stop:0 white, stop:1 black);

/* 辐射渐变 */
background: qradialgradient(cx:0.5, cy:0.5, radius: 0.5,
                          fx:0.5, fy:0.5,
                          stop:0 white, stop:1 black);

/* 锥形渐变 */
background: qconicalgradient(cx:0.5, cy:0.5, angle:0,
                          stop:0 white, stop:1 black);

动态样式

cpp 复制代码

// 根据应用程序状态改变样式
void updateStyle(bool isDarkMode) {
    QString style;
    if (isDarkMode) {
        style = "QWidget { background: #333; color: white; }";
    } else {
        style = "QWidget { background: white; color: black; }";
    }
    qApp->setStyleSheet(style);
}

// 动态修改单个控件样式
button->setStyleSheet("QPushButton { background: red; }");

使用资源文件

cpp 复制代码

/* 在QRC文件中添加图片资源 */
QPushButton#iconButton {
    background-image: url(:/images/button-bg.png);
    border: none;
}

QCheckBox::indicator:checked {
    image: url(:/icons/checkmark-white.png);
}

继承和覆盖

cpp 复制代码

/* 基础按钮样式 */
.MyButton {
    min-width: 80px;
    padding: 8px;
    border-radius: 4px;
}

/* 特定类型按钮 */
.MyButton.primary {
    background: #2196F3;
    color: white;
}

.MyButton.danger {
    background: #f44336;
    color: white;
}

.MyButton.warning {
    background: #ff9800;
    color: white;
}

调试技巧

使用Qt Designer：实时预览样式效果
样式表继承检查 ：使用qApp->styleSheet()查看当前样式
选择器优先级：ID选择器 > 类选择器 > 类型选择器

注意事项

性能考虑：复杂的样式可能影响性能
平台差异：不同平台下样式表现可能不同
样式继承：子控件会继承父控件的样式
资源管理：及时释放不再使用的样式资源

通过合理使用QSS，你可以创建出美观、专业的QT应用程序界面。记得在实际项目中根据需求调整样式，并保持良好的代码组织结构。

好文收藏参考：【QT】使用QSS进行界面美化

QT之QSS的使用方法和常用控件的样式设置

目录

QSS基础语法

基本选择器

常用属性

常用控件QSS设置

QPushButton

QLineEdit

QComboBox

QCheckBox & QRadioButton

QSlider

QProgressBar

QTabWidget

QGroupBox

QMenu & QMenuBar

高级技巧

渐变效果

动态样式

使用资源文件

继承和覆盖

调试技巧

注意事项