【#开发日记】移动端UI适配与重构总结

昨天 13:5316 浏览

各位好，这是一篇开发日记，记录最近五个版本（v0.4.26 到 v0.4.30）在移动端交互、UI 自适应和稳定性上的完整攻坚过程。

一、v0.4.26：全局UI自适应与视觉重构

· 目标：解决刘海屏下顶部黑边、按钮遮挡、排版稀疏的问题。

· 改动：

· 分离背景层与交互层：背景色铺满物理屏幕边缘，按钮严格限制在安全区内。

· 右上角 5 个按钮收纳进“☰”菜单。

· 所有间距、字号、按钮尺寸改为按屏幕比例计算，不再写死像素。

· 卡片统一圆角、微描边，优化横屏按钮宽高比。

· 结果：刘海屏下无黑边，顶部信息排版饱满。

二、v0.4.27：收尾补丁与隐藏Bug修复

· 目标：修复上一版遗留的细节问题和测试中发现的隐患。

· 改动：

· 修复顶栏自身 padding 与外壳安全区叠加，导致校名被推到屏幕 32% 的 bug。

· 修复菜单/抽屉关闭时，遮罩节点未彻底销毁，导致底层按钮点不动的问题（四重校验：节点销毁、children清空、Yoga节点释放、父树摘除）。

· 优化横屏第二行四项数据的等宽分布，底部按钮最大宽度限制为屏宽 25%。

· 清理测试截图，将构建包体从 31MB 压缩到 10MB。

· 结果：LSP 0错0警，自测通过，文案自检 288 条无违规。

三、v0.4.28：屏幕方向自适应与玩家手动切换

· 目标：让玩家可以自由选择横屏或竖屏。

· 改动：

· 设置面板新增“屏幕方向”三选一，写入本地设置文件，重启后自动沿用。

· 横竖屏切换瞬间重新计算安全区（竖屏看顶部、横屏看左右）。

· 旋转时自动重算或关闭浮层，旧遮罩彻底销毁；指针入口加输入锁，0.35 秒后解锁，防止误触。

· 切换后按钮热区与视觉同步，连续切换 10 次内存有界、无闪退。

· 结果：真机截图与点击日志验证通过，横屏底部按钮长宽比从 6.24 优化至 4.9。

四、v0.4.29：护眼阅读与设置收纳

· 目标：解决近视玩家反馈的“文字眩晕”问题。

· 改动：

· 新增“声音与显示”子页面，包含音效、动态特效、护眼阅读三个区块。

· 护眼阅读包含三个开关：大字号模式（+30%）、舒缓背景（米色护眼配色）、高对比度文字。

· 全局行距统一到 1.8 倍，段落间距 +8~12px，卡片内边距 ×1.2。

· 正文颜色从纯白改为 #E8E4D9，标题金色改为暗金，降低刺眼感。

· 结果：WCAG 对比度达标，三个开关持久化成功，即时生效。

五、v0.4.30：全量回归与稳定性收口

· 目标：彻底根治界面抖动，全面排查按钮点击有效性。

· 核心修复（逐帧布局签名定位到 6 处根因）：

1. 顶栏第二行数值位数变化导致标签位移 → 数值列宽度写死 + 左对齐。

2. 校史纪事卡片高度随条目数变化 → 固定 3 行、单行省略号、高度写死。

3. 当前要务文案换行导致行数变化 → 单行省略号 + 卡片固定高度。

4. 状态描述语档位切换导致 1/2 行摆动 → 定高两行文本。

5. 底部提示行在滚动区外，行动点数字变化改变滚动区高度 → 定高两行。

6. 学宫状况数值列写死 48px 不随字号伸缩 → 改为 62px + FontScaled 缩放。

· 新增工具：EstimateTextWidth / TruncateToWidth / MakeEllipsisLabel / MakeFixedText。

· 结果：

· 20 次连点布局签名变化 0 次，停止后 90 帧 0 次。

· 全游戏按钮排查 80/80 通过（含关闭弹窗后立刻点底层、键盘弹起时点击、旋转后点击）。

· 全流程回归 × 横屏/竖屏/刘海屏三环境，75/75 通过。

· 连续切换屏幕方向 10 次，内存有界，无闪退。

· LSP 0错0警，构建成功，validate PASS，文案自检 288 条无违规。

· 累计 183/183 断言全部通过。

六、后续计划

下一步将进入 v0.5.0 的“校舍自由营造”开发，实装讲堂、斋舍、膳堂、藏书阁等设施系统，并逐步完成生源自然分层、地方势力系统，补齐唐朝篇的经营闭环。

TapTap 制造应用

9.8

测试下载已开启