ARTICLE · INTELLIGENCE

战地情报 · 详情页

来自尧图项目组的一线实战观察与深度解析

页面没有报截断,短屏上确认按钮却消失了:HarmonyOS 7 怎么验关键任务始终可达

页面没有报截断,短屏上确认按钮却消失了:HarmonyOS 7 怎么验关键任务始终可达

页面没有报截断,短屏上确认按钮却消失了:HarmonyOS 7 怎么验关键任务始终可达

DevEco Studio 26.0 场景化体检把“截断”纳入多设备检测,官方多设备指南也明确提醒短屏高度受限时要保证关键区可见并支持滚动。但最难发现的不是文字少一行,而是页面看起来完整,确认按钮、错误提示或下一步入口落在可操作区域之外。短屏验收应该围绕任务终点,而不是围绕某个组件是否超出边界。

问题怎么复现

准备一个包含标题、说明、表单、错误提示和底部确认按钮的页面。分别在普通手机、短屏窗口和软键盘弹出状态下执行“填写错误值、修正、提交”。记录 viewportHeight、keyboardHeight、headerHeight、contentHeight、actionTop、scrollOwner、focusedField 和 submitVisibleRatio。若用户能看见输入框却无法在不丢失焦点的情况下找到确认按钮,任务可达性失败。

复现记录至少包含设备形态、窗口尺寸、字体或显示配置、关键状态、操作路径和截图时间。只保存一张最终截图,无法解释问题是在布局、状态恢复还是输入阶段发生。

机制拆解

先算关键区预算

可用高度等于窗口高度减去系统避让、键盘、固定头部和固定底部。正文可以滚动,关键动作必须有明确归属,不能同时被多个容器截断。

这里必须同时保存输入条件、设备或窗口形态、触发动作和最终可观察状态。工具报告用于缩小范围,任务是否可完成仍由同一条用户路径的读回结果决定。

滚动只能有一个主所有者

页面外层和表单内层同时滚动时,焦点跳转常把按钮留在错误容器之外。确定主滚动容器,错误定位与键盘避让都驱动同一容器。

这里必须同时保存输入条件、设备或窗口形态、触发动作和最终可观察状态。工具报告用于缩小范围,任务是否可完成仍由同一条用户路径的读回结果决定。

验收终点是动作可执行

体检报告发现布局风险后,还要跑任务断言:错误出现时可读,修正后按钮可见,点击后状态变化。截图只证明一个时刻。

这里必须同时保存输入条件、设备或窗口形态、触发动作和最终可观察状态。工具报告用于缩小范围,任务是否可完成仍由同一条用户路径的读回结果决定。

案例一:软键盘弹出后按钮被推到屏幕外

不要简单把整个页面上移。计算键盘与按钮区域的重叠量,驱动主滚动容器滚到“焦点字段 + 错误提示 + 确认按钮”可共同理解的位置;键盘关闭后保留合理阅读位置。

修复后用原始条件再次执行完整任务,并保留修改前后同一节点的可见性、可操作性和状态对照。

案例二:短屏中说明文字把主操作挤到第二屏

把说明区设为可折叠的次要信息,保持任务标题、当前字段和主操作优先;但不能直接隐藏错误原因。验收展开/收起两种状态下内容仍可访问。

第二个案例选择不同形态或不同状态,用来证明方案不是对单一截图的局部修补。

方案对比

方式优点风险
固定压缩所有间距改动快可读性和点击热区下降
给页面随意加滚动内容可见嵌套滚动与焦点错乱
关键区预算 + 单滚动所有者 + 任务断言可解释需要重构页面层级

我的选择:采用第三种。允许视觉随空间收缩,但不允许任务入口失去可达性。

工程侧模型

type ViewBudget={viewport:number;keyboard:number;system:number;fixed:number} function available(v:ViewBudget){return Math.max(0,v.viewport-v.keyboard-v.system-v.fixed)} function needsScroll(v:ViewBudget,content:number){return content>available(v)}

模型只表达稳定的决策边界,界面组件、窗口事件和工具结果通过适配器接入,避免把设备差异散落在每个页面。

可独立执行的状态断言

function available(v){return Math.max(0,v.viewport-v.keyboard-v.system-v.fixed)} if(available({viewport:700,keyboard:300,system:48,fixed:96})!==256)throw new Error('可用高度计算错误'); if(!(520>available({viewport:700,keyboard:300,system:48,fixed:96})))throw new Error('滚动需求漏判');

这些断言验证纯状态、几何或边界计算,不代表 API 26 工程已经编译,也不代表真机、模拟器特定镜像或应用市场审核已经通过。

封装与复用

封装 ViewportBudget、TaskAnchor 与 ReachabilityProbe。页面注册主操作和错误锚点,适配器统一处理窗口、键盘和系统避让变化。

复用层输出决策和证据,不强行统一所有页面视觉。每个页面仍可保留自身信息层级,但必须满足相同的任务可达性与状态连续标准。

验收清单

  • 短屏与键盘状态同时覆盖。
  • 页面只有一个主滚动所有者。
  • 错误提示和主操作都能被焦点导航到。
  • 点击热区不因压缩而变小。
  • 以完整任务成功而非截图通过作为结论。

验证边界

本文依据当前华为官方文档整理能力与约束,纯状态模型已在本机执行。当前本机 HarmonyOS SDK 为 API 24,且没有连接 HDC 设备,因此 API 26 编译、目标模拟器镜像行为、折叠真机连续性和平台审核结果仍属于待验证项。完成目标环境验证后,应把版本、设备、构建身份和读回结果补入证据包。

官方资料

  • DevEco Studio 场景化体检
  • 鸿蒙应用多设备通用适配指南
  • 多设备适配开发助手
  • 多设备预览器

总结

用关键区预算、滚动归属和任务终点断言解决短屏上的“内容都在,但操作做不完”。 适配不是让截图“看起来差不多”,而是让关键任务在形态变化后依然可见、可操作、可恢复。

RELATED READING

延伸阅读

更多一线实战笔记与深度复盘,助您持续精进