下载与文件结构
设置页工程包含 main.cpp、数据模型、两份语言页面与 app.css。中文和英文页面结构一致；不使用 JavaScript。CMake 将 HTML/CSS 嵌入生成头，修改页面后重新构建即可。
- settings.zh.html / settings.en.html：界面结构与文字。
- app.css：布局、焦点与状态样式。
- main.cpp：窗口与事件；settings_state.h：进程内设置。
实际运行界面
左侧为课程导航，右侧包含个人偏好、运行信息和操作区。保存按钮由下一课中的 C++ 回调处理；这个工程只在内存中保存，退出后恢复默认值。通知复选框演示设置状态，不发送系统通知。
侧栏与内容区
app 使用 Flex 横向排列侧栏和工作区。侧栏固定宽度，内容区 flex:1；min-width:0 允许内容在有限宽度下收缩。表单面板使用同一组边距与边框。
.app { display: flex; min-height: 100vh; }
.sidebar { width: 184px; flex-shrink: 0; background: #fafbfc; border-right: 1px solid #e2e7ee; padding: 24px 14px; }
.wordmark { font-size: 19px; font-weight: 700; margin: 0 10px 32px; }
.sidebar-label { font-size: 11px; color: #6c788a; margin: 0 10px 10px; }
.nav-item { padding: 9px 12px; font-size: 13px; line-height: 1.4; margin-bottom: 4px; border-radius: 5px; color: #536174; }
.active { background: #e9f0ff; color: #235bcd; font-weight: 600; }
.workspace { flex: 1; min-width: 0; padding: 20px 28px; }
窄窗口布局
760px 以下收紧边距并纵向排列运行信息。560px 以下把应用改成纵向布局，侧栏只保留品牌名。可将阈值改为 640px，重新构建后观察变化；属性支持情况见 CSS 文档。
@media(max-width: 760px) {
.sidebar { width: 152px; padding: 20px 10px; }
.wordmark { font-size: 17px; }
.workspace { padding: 18px; }
.panel { padding: 16px; }
.details { flex-direction: column; gap: 12px; }
}
@media(max-width: 560px) {
.app { flex-direction: column; }
.sidebar { width: 100%; padding: 14px 18px; }
.wordmark { margin: 0; }
.sidebar-label, .nav-item { display: none; }
.workspace { padding: 18px; }
.actions { flex-wrap: wrap; }
}
编译与练习
运行中文版本后，也可以用 --english 打开英文页面。将窗口缩窄、扩大，并用 Tab 与 Shift+Tab 访问输入框、复选框和按钮。检查标签、焦点和状态区是否仍可见。
$cxxStandard = Read-Host SDK-standard
cmake -S . -B build -A x64 "-DCMAKE_CXX_STANDARD=$cxxStandard" -DKui_DIR=G:/SDK/kui/cmake
cmake --build build --config Release --parallel 4
ctest --test-dir build -C Release --output-on-failure
.\build\Release\settings_lab.exe
.\build\Release\settings_lab.exe --english动手练习与验收
用这些动作确认自己完成了本课，不必额外抄一份同样的代码。
- 给名称输入区增加一行帮助文本，不改变 id。
- 把主区域边距调小后检查状态区与按钮对齐。
- 分别运行默认、--compact、--english，检查文字与焦点可见。
文档有误或遗漏？
反馈此页问题 →