Qt 进阶 02｜QSS 实战：按钮、进度条美化 + 整套暗黑风格界面落地

一、圆角渐变按钮美化

结合圆角、渐变、悬浮、按压状态，实现现代风格按钮：

qss

/* 圆角渐变按钮 */ QPushButton { background: qlineargradient(x1:0,y1:0,x2:0,y2:1, stop:0 #74b9ff, stop:1 #0984e3); color: #ffffff; border: none; border-radius: 6px; font-size: 13px; min-height: 30px; } QPushButton:hover { background: qlineargradient(x1:0,y1:0,x2:0,y2:1, stop:0 #a2d2ff, stop:1 #006ccb); } QPushButton:pressed { background: #0769b8; }

二、进度条 QProgressBar 美化

修改轨道、填充色、圆角，去除默认样式：

qss

QProgressBar { border-radius: 4px; background-color: #eeeeee; text-align: center; } QProgressBar::chunk { background-color: #00b894; border-radius: 4px; }

三、全局暗黑风格主题（整套通用）

适用于窗口、标签、输入框、按钮全套暗黑配色，直接给主窗口设置即可全局生效：

qss

/* 主窗口背景 */ QWidget { background-color: #2b2b2b; color: #e0e0e0; font-size: 12px; } /* 标签 */ QLabel { color: #cccccc; } /* 单行输入框 */ QLineEdit { background-color: #3c3f41; border: 1px solid #555555; border-radius: 3px; padding: 4px; } QLineEdit:focus { border-color: #0099ff; } /* 普通按钮（暗黑版） */ QPushButton { background-color: #4a4a4a; border: none; border-radius: 4px; color: #f0f0f0; min-height: 28px; } QPushButton:hover { background-color: #5c5c5c; } QPushButton:pressed { background-color: #383838; }

四、代码加载外部 QSS 文件（项目标准用法）

cpp

运行

// 加载qss文件实现换肤 QFile file(":/style/dark.qss"); if(file.open(QFile::ReadOnly)) { QString style = QLatin1String(file.readAll()); this->setStyleSheet(style); file.close(); }

小结

复杂界面推荐拆分多个 QSS 文件分类管理；进度条、滑块等控件需要使用子控件伪元素::chunk单独修饰。