当前位置：首页 > news >正文

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

news 2025/8/23 8:50:59

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

QSS基础语法

基本选择器

选择器 {属性名: 属性值;
}// 通用选择器
* { color: black; }// 类型选择器
QPushButton { background: red; }// 类选择器
.QPushButton { border: 1px solid; }// ID选择器
QPushButton#okButton { color: green; }// 子控件选择器
QComboBox::drop-down { width: 20px; }// 伪状态选择器
QPushButton:hover { background: blue; }

常用属性

/* 颜色和背景 */
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

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

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

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

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

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

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

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

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

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;
}

高级技巧

渐变效果

/* 线性渐变 */
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);

动态样式

// 根据应用程序状态改变样式
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; }");

使用资源文件

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

继承和覆盖

/* 基础按钮样式 */
.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;
}