简介：面向QT桌面应用开发者的一套界面美化示例工程，主要解决控件样式单一、界面交互质感不足的问题，适合希望在现有项目中改善视觉表现的初中级开发者参考。压缩包约4.9MB，共75个文件，以12个cpp源文件、10个头文件和3个ui界面文件为主，配有8个css样式表、14张png图片、ttf字体、qm翻译文件及qrc资源文件，另含pro工程配置与exe可执行文件，覆盖界面设计、样式定义到资源组织的工程结构。已有1193人学习下载。工程围绕按键、提示框和表格等常用控件展开，可参考其自定义绘制、QSS配色、布局适配等实现思路，便于理解QT界面美化的组织方式，并将可复用组件抽取到自己的项目中，减少重复搭建界面的时间。其中样式表与布局管理的配合，能帮助开发者建立统一的视觉规范，并针对不同分辨率调整控件尺寸。
1. QT美化不是换一张皮：从一套小工程看清样式、资源与窗口行为
QT美化最容易翻车的地方，不是 QSS 语法，而是样式、资源路径、窗口行为和 DPI 缩放搅在一起。我拆的这套小工程把界面拆成主题变量、QRC 资源、无边框标题栏和几个可复用控件，目标不是做一套炫酷皮肤，而是让普通桌面工具在 1080P 与 4K 屏上都不糊、不串色、不拖影。
它适合已经能用 Qt 写窗口，但一改 QSS 就遇到边角发黑、控件错位、换肤卡顿的开发者；新手可以照着命令跑通，熟手重点看分层和参数边界。
这套东西不解决业务逻辑，只解决界面层的可维护性：颜色从哪来、图标怎么换色、标题栏怎么拖、换主题时哪些控件该重刷。先把这几个边界定住，后面加页面才不会越改越乱。
2. 先定分层再写样式：QSS、QRC 与自定义标题栏的职责边界
一套界面美化工程能不能维护，通常在第 2 天就暴露：昨天调好的按钮，今天换个页面又变回系统默认；本地跑得好好的 QSS，打包后图标全丢。我的血泪经验是，先把资源、主题变量和窗口行为拆开，再谈圆角和阴影。
2.1 资源目录与 QRC 映射：换肤先换掉相对路径
很多工程把 QSS 放在源码目录，代码里写QFile("style/app.qss")，在开发环境里能跑，装到别的目录就找不到文件。常见做法是把可编辑资源留在assets/，通过resources.qrc编进二进制，运行时统一走:/theme/...。前缀和别名要一次定死，QSS 里的url()也按同一套路径写，别一半用相对路径一半用 qrc 路径。
<RCC> <qresource prefix="/theme"> <file alias="app.qss">assets/qss/app.qss</file> <file alias="icons/close.svg">assets/icons/close.svg</file> <file alias="icons/check.svg">assets/icons/check.svg</file> </qresource> </RCC>prefix="/theme"决定了运行时前缀，alias决定资源在 qrc 里的短路径。上面两个文件最终对应:/theme/app.qss和:/theme/icons/close.svg。别在 QSS 里写assets/icons/close.svg，那是源码目录结构，不是运行时资源路径。
QString readTextResource(const QString &path) { QFile f(path); if (!f.open(QIODevice::ReadOnly | QIODevice::Text)) { qWarning() << "resource missing:" << path; return {}; } return QString::fromUtf8(f.readAll()); }QIODevice::Text会处理换行符差异，fromUtf8保证中文注释和字体名不乱码。返回值空字符串时不要继续setStyleSheet，否则界面会悄悄退回系统默认样式，看起来像“QSS 没生效”，实际是资源路径错了。qrc 路径区分大小写，Close.svg和close.svg是两个资源。
提示：QSS 里的图片地址统一写成
:/theme/icons/xxx.svg，不要依赖当前工作目录。
2.2 用主题变量组织 QSS：把颜色从控件代码里抽出来
Qt 的 QSS 没有 CSS 那种原生变量，常见做法是在加载时做一次占位符替换。工程里只维护一份app.qss，颜色写成{{accent}}、{{panel}}、{{line}}这种标记，亮色和暗色主题各自给一组值。这样按钮、卡片、状态点都引用同一套颜色，改主色时不用全局搜索十六进制。
QString renderTheme(QString qss, const QHash<QString, QString> &vars) { for (auto it = vars.cbegin(); it != vars.cend(); ++it) { qss.replace(it.key(), it.value()); } return qss; } QHash<QString, QString> light{ {"{{accent}}", "#2f7cf6"}, {"{{accentHover}}", "#1f6ae0"}, {"{{accentPressed}}", "#1856bd"}, {"{{panel}}", "#ffffff"}, {"{{line}}", "#e6e8ee"}, {"{{text}}", "#1f2937"} }; QString qss = renderTheme(readTextResource(":/theme/app.qss"), light); qApp->setStyleSheet(qss);renderTheme只做字符串替换，不解析 QSS 语法，所以占位符要足够独特。用{{text}}而不是@text，可以避免@text把@textMuted的前半段替换掉。主题变量表建议放在单独的.cpp或 JSON 里，但不要在paintEvent里反复读取文件，界面重绘时读磁盘会把帧率拖垮。
QSS 里配合动态属性使用：
QWidget#SideBar { background: {{panel}}; border-right: 1px solid {{line}}; } QLabel#Title { color: {{text}}; font-size: 10pt; font-weight: 600; } QPushButton[role="primary"] { color: #ffffff; background: {{accent}}; border: none; border-radius: 8px; padding: 7px 16px; min-height: 32px; } QPushButton[role="primary"]:hover { background: {{accentHover}}; } QPushButton[role="primary"]:pressed { background: {{accentPressed}}; }[role="primary"]是属性选择器，控件代码里要执行btn->setProperty("role", "primary")。属性最好在show()之前设置；如果运行中修改，必须对控件做unpolish/polish，否则样式表不会重新匹配。font-size用pt，边框和圆角用px，混用会让高 DPI 下的字号和间距对不上。
2.3 自定义标题栏的最小闭环：拖拽、双击最大化、按钮状态
无边框窗口不是把系统标题栏一删就完事。最小闭环至少要有拖拽、双击最大化/还原、最小化按钮，以及最大化后不跟着鼠标乱跑。标题栏本身用普通QWidget拼，按钮用QToolButton或QPushButton，窗口标志在MainWindow构造函数里设置。
static QPoint mouseGlobalPos(QMouseEvent *e) { #if QT_VERSION >= QT_VERSION_CHECK(6, 0, 0) return e->globalPosition().toPoint(); #else return e->globalPos(); #endif } class TitleBar : public QWidget { Q_OBJECT public: explicit TitleBar(QWidget *parent = nullptr) : QWidget(parent) { setFixedHeight(44); auto *layout = new QHBoxLayout(this); layout->setContentsMargins(12, 0, 8, 0); auto *title = new QLabel("Demo", this); layout->addWidget(title); layout->addStretch(); auto *minBtn = new QToolButton(this); minBtn->setText("-"); connect(minBtn, &QToolButton::clicked, this, [this] { window()->showMinimized(); }); layout->addWidget(minBtn); } protected: void mousePressEvent(QMouseEvent *e) override { if (e->button() == Qt::LeftButton) { m_dragOffset = mouseGlobalPos(e) - window()->frameGeometry().topLeft(); e->accept(); return; } QWidget::mousePressEvent(e); } void mouseMoveEvent(QMouseEvent *e) override { if (e->buttons() & Qt::LeftButton) { window()->move(mouseGlobalPos(e) - m_dragOffset); e->accept(); return; } QWidget::mouseMoveEvent(e); } void mouse <p> <a href="https://download.csdn.net/download/mario_z/10193766" style="color:#ec7500;font-size:14px;"> 本文还有配套的精品资源，点击获取 </a> <img alt="menu-r.4af5f7ec.gif" src="https://csdnimg.cn/release/wenkucmsfe/public/img/menu-r.4af5f7ec.gif" style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;"> </p>
