QSS 教学示例重构:双主题样式抽离为外部 .qss 资源(QFile 运行时加载)

把原先硬编码在 mainwindow.cpp 里的 kLightQss / kDarkQss 两个 C++ 字符串,
拆成独立的 themes/light.qss、themes/dark.qss,由 themes.qrc(AUTORCC)编译进
可执行文件,applyStyle() 用 QFile 读取后 qApp->setStyleSheet 应用。

教学要点(QSS 最佳实践):
- 样式与逻辑彻底分离:设计师/非程序员可直接编辑 .qss,不必碰 C++;
- 开发期改 .qss 重跑即生效,不必改 C++ 重编译;
- 多主题物理分文件,编辑器对 .qss 有语法高亮。

README 同步更新差异表、最佳实践条目与目录结构。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
张宗平
2026-07-09 16:50:31 +08:00
parent 82b726ab3e
commit 12950da129
5 changed files with 141 additions and 99 deletions
@@ -0,0 +1,38 @@
/* ============================================================================
* 深色主题样式表 —— qt_calculator_mainwindow_qssDay3 下午)
* 整体深底浅字,功能分色保留但调暗,便于和浅色对照验证「切换生效」。
* 资源路径 :/themes/dark.qssthemes.qrc 嵌入)。
* ============================================================================ */
QMainWindow { background: #2b2b2b; color: #eee; }
QLineEdit#display, QTextEdit#expressionEdit {
background: #3a3a2a; color: #fffbe6;
border: 1px solid #6b6b4a; border-radius: 4px;
font-size: 18px; padding: 4px;
}
QPushButton {
border: 1px solid #555; border-radius: 4px;
padding: 8px; font-size: 15px; min-height: 28px; color: #eee;
}
QPushButton#btn0, QPushButton#btn1, QPushButton#btn2, QPushButton#btn3,
QPushButton#btn4, QPushButton#btn5, QPushButton#btn6, QPushButton#btn7,
QPushButton#btn8, QPushButton#btn9, QPushButton#btnDot {
background: #1565c0; border-color: #42a5f5; color: #e3f2fd;
}
QPushButton#btnPlus, QPushButton#btnMinus, QPushButton#btnMul, QPushButton#btnDiv {
background: #d84315; border-color: #ff7043; color: #ffe0b2;
}
QPushButton#btnEquals {
background: #2e7d32; border-color: #66bb6a; color: #c8e6c9; font-weight: bold;
}
QPushButton#btnLeftParen, QPushButton#btnRightParen {
background: #455a64; border-color: #78909c; color: #eceff1;
}
QPushButton#btnClear, QPushButton#btnBackspace {
background: #c62828; border-color: #ef5350; color: #ffcdd2;
}
QPushButton:hover { background: #666; }
QPushButton:pressed { background: #888; }
QListWidget { background: #333; alternate-background-color: #3d3d3d; color: #eee; }
QStatusBar { background: #1f1f1f; color: #eee; }
QMenuBar { background: #37474f; color: #eee; }
QDockWidget { color: #eee; }