Files
scuc-qt-course/docs/teaching/examples/calculator_mainwindow_qss/README.md
T
张宗平 05a685c952 Day3 教学示例:增强版计算器接入 + QMainWindow/QSS 两版参考实现
- calculator_designer_ext(Day2 增强版:表达式求值 + 括号,递归下降解析器)接入 cmake
- calculator_mainwindow(Day3 上午):增强版计算器装进 QMainWindow,
  菜单/状态栏/历史停靠窗,纯代码 + 显式 connect,与 mainwindow_showcase 形成坑卡对照
- calculator_mainwindow_qss(Day3 下午):上午版 + QSS 双主题美化(按键分色/伪状态/深浅切换)
- 验证 mainwindow_showcase(QMainWindow 六大组件综合演示,.ui + .qrc)
- OUTLINE_4DAY.md / ASSIGNMENTS.md Day3 衔接增强版起点 + 参考实现指引
- 补提交 Day2 calculator/ 与 calculator_designer/ 参考实现(CMakeLists 已引用)
- 全量构建 28/28,4 目标离屏自测退出码 0

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-07 22:59:05 +08:00

3.4 KiB
Raw Blame History

Day3 下午参考实现:计算器 QMainWindow + QSS 双主题

对应教案 OUTLINE_4DAY.md Day3 下午「布局/控件 + QSS 美化」

  • ASSIGNMENTS.md Day3 下午作业。手工维护,非生成产物。

定位:上午版 + QSS 美化

../calculator_mainwindow/Day3 上午版)为 起点,只加 QSS:按键按功能分色、:hover/:pressed 视觉反馈、深/浅双主题切换。 菜单/停靠窗/状态栏/计算逻辑与上午版完全一致——QSS 与逻辑正交,这正是 Day3 下午 「美化」环节要传达的核心。

与上午版的差异(集中在 mainwindow.{h,cpp}

改动 位置 内容
双主题 QSS 字符串 mainwindow.cpp 顶部 kLightQss / kDarkQss 按键分色 + 伪状态
视图菜单「深色主题」 buildMenu() checkable QActiontoggledonToggleTheme
applyStyle(bool dark) mainwindow.cpp qApp->setStyleSheet(...) 全局切换
自测加主题断言 runSelfTest() 验证切换后 styleSheet() 含对应主题标识

calculatordesigner.{h,cpp} / expressionevaluator.{h,cpp} / widget.ui 与上午版 完全一致(自包含复制)。

QSS 教学要点(对应 OUTLINE_4DAY.md Day3 下午)

  1. ID 选择器认 objectNameQPushButton#btnEquals { ... } 命中的前提是控件 setObjectName("btnEquals")。本例的 objectName 在 widget.ui 里已定义 <widget class="QPushButton" name="btnEquals">),无需再 setObjectName—— 这是「样式写了没生效」头号原因(忘设 objectName)的反面教材。
  2. 按键分色用功能归类:数字键(btn0btn9,btnDot)浅蓝、运算键 btnPlus/Minus/Mul/Div)橙、等号(btnEquals)绿、括号灰、清空/退格红—— 用 ID 选择器分组,比给每个按钮单独写样式更易维护。
  3. 伪状态:hover / :pressed 不用手写鼠标事件就能做交互反馈。
  4. qApp->setStyleSheet 全局 vs widget->setStyleSheet 局部:本例用全局, 一次切换全部生效。坑卡:全局样式会被 widget 级样式覆盖,混用易级联失控 OUTLINE_4DAY.md Day3 下午「QSS 级联失控」卡)。
  5. 主题切换不碰逻辑applyStyle 只改 styleSheet,不动任何业务代码—— QSS 与逻辑正交的可维护性演示。

构建与运行

cmake --build build --target qt_calculator_mainwindow_qss

# 离屏自测(计算用例 + 主题切换改变 styleSheet 的断言,退出码 0 即全过)
PATH=E:/Qt/Qt5.14.2/5.14.2/mingw73_64/bin:$PATH \
QT_QPA_PLATFORM=offscreen \
  ./build/docs/teaching/examples/qt_calculator_mainwindow_qss.exe; echo "exit=$?"

# 有 GUI 环境:勾选「视图→深色主题」看整体配色切换
./build/docs/teaching/examples/qt_calculator_mainwindow_qss.exe

验收对照(ASSIGNMENTS.md Day3 下午)

  • 基础版:数字/运算/等号 3 色区分 ✓(本例 5 色,含括号/清空退格)
  • 基础版:布局随窗口缩放不重叠 ✓(QGridLayout + QMainWindow 区域协议)
  • 挑战版:hover/:pressed
  • 挑战版:结果显示框套样式 ✓(display/expressionEdit 米黄背景 + 圆角)
  • 挑战版:深/浅双主题切换 ✓(视图菜单「深色主题」)