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,40 @@
/* ============================================================================
* 浅色主题样式表 —— qt_calculator_mainwindow_qssDay3 下午)
* 按按键功能分色:数字=浅蓝、运算=橙、等号=绿、括号=灰、清空/退格=红、显示区=米黄。
* 选择器认 objectNamebtn0/btnEquals/… 在 widget.ui 定义)。
* 由 themes.qrc 嵌入为资源 :/themes/light.qssmainwindow.cpp 用 QFile 读取后
* qApp->setStyleSheet 全局应用——把样式与 C++ 逻辑分离,便于独立编辑、热重载。
* ============================================================================ */
QMainWindow { background: #f5f5f5; }
QLineEdit#display, QTextEdit#expressionEdit {
background: #fffbe6; color: #222;
border: 1px solid #d0c8a0; border-radius: 4px;
font-size: 18px; padding: 4px;
}
QPushButton {
border: 1px solid #bbb; border-radius: 4px;
padding: 8px; font-size: 15px; min-height: 28px;
}
QPushButton#btn0, QPushButton#btn1, QPushButton#btn2, QPushButton#btn3,
QPushButton#btn4, QPushButton#btn5, QPushButton#btn6, QPushButton#btn7,
QPushButton#btn8, QPushButton#btn9, QPushButton#btnDot {
background: #e3f2fd; border-color: #90caf9; color: #0d47a1;
}
QPushButton#btnPlus, QPushButton#btnMinus, QPushButton#btnMul, QPushButton#btnDiv {
background: #ffe0b2; border-color: #ffb74d; color: #e65100;
}
QPushButton#btnEquals {
background: #c8e6c9; border-color: #81c784; color: #1b5e20; font-weight: bold;
}
QPushButton#btnLeftParen, QPushButton#btnRightParen {
background: #eceff1; border-color: #b0bec5; color: #37474f;
}
QPushButton#btnClear, QPushButton#btnBackspace {
background: #ffcdd2; border-color: #e57373; color: #b71c1c;
}
QPushButton:hover { background: #ddd; }
QPushButton:pressed { background: #bbb; }
QListWidget { background: #fafafa; alternate-background-color: #eeeeee; }
QStatusBar { background: #e0e0e0; }
QMenuBar { background: #eceff1; }
QDockWidget { color: #333; }