@Env 避让区更新了页面还盖住系统栏：HarmonyOS 7 沉浸式布局别缓存一次边距

页面首次进入时读取安全区，顶部标题正常；旋转屏幕、切到悬浮窗或折叠设备改变形态后，状态栏高度已经变化，按钮却仍压在系统区域下面。官方最新窗口沉浸式文档明确说明，窗口模式、旋转、折叠形态和跨设备流转都可能触发避让区域变化。真正的问题通常不是 @Env 没更新，而是应用把第一次边距缓存成了永久布局参数。

验证边界：本文依据华为开发者官网截至 2026-09-25 可访问的资料整理。文中的状态机、去重器和坐标计算已经在 Node.js 宿主环境执行断言；当前本机仍是 API 24 SDK，且没有连接 HDC 真机，因此不把这些断言写成 API 26 编译或真机实测。涉及窗口、拖拽和跨设备能力的正式交付，仍需在 API 26 SDK、模拟器或对应真机上补齐接口编译、交互录像与日志证据。

先复现，不要先改样式

常见实现会在页面初始化阶段计算 top = avoidArea.topRect.height，随后只监听窗口宽度。这样一来，尺寸回调先到时页面使用新宽度和旧避让区，避让区回调后又只更新局部组件，形成一帧错位甚至永久覆盖。另一个隐患是把状态栏、导航条、键盘和折痕全部加总，某些模式下区域发生重叠，页面会被重复缩进。先用旋转、全屏/悬浮切换和键盘弹出三组步骤复现，才能知道是陈旧快照还是重复扣减。

根因藏在哪一层

把窗口宽高、系统避让区、键盘占用和递增世代组合为不可变快照。任何来源变化都只更新自己的字段，并把计算推迟到同一微任务；布局层只消费最新完整快照。区域合并使用矩形并集，不把重叠高度简单相加。这样既能避免旧值和新值混搭，也能在日志里还原一次布局由哪些输入决定。

interface Insets { top:number; right:number; bottom:number; left:number }
interface LayoutSnapshot { width:number; height:number; insets:Insets; generation:number }

export function mergeSnapshot(current:LayoutSnapshot, patch:Partial<LayoutSnapshot>): LayoutSnapshot {
  return { ...current, ...patch, generation: current.generation + 1 };
}

export function contentRect(s:LayoutSnapshot) {
  return { x:s.insets.left, y:s.insets.top,
    width:Math.max(0,s.width-s.insets.left-s.insets.right),
    height:Math.max(0,s.height-s.insets.top-s.insets.bottom) };
}

案例一：横屏切回竖屏，标题栏仍保留横屏边距

记录每次窗口与避让区事件的世代号。横屏尺寸先到时只生成候选快照，避让区随后到达后再提交同一帧布局；若在 16ms 内没有第二个事件，也提交当前最新值，避免等待卡死。验收时对比最终内容矩形，而不是只看标题有没有移动。

案例二：键盘和底部导航区被重复扣减

键盘区域可能覆盖底部导航区域，不能直接把两者高度相加。先将区域投影成窗口坐标中的矩形，再取并集；输入框滚动只使用最终可见矩形。键盘收起后，恢复的是内容锚点，不是初始化时的固定像素。

为什么这套修法更稳

观察项	容易写错	更可靠的处理
状态来源	初始化时读一次边距	每次变化生成带世代的快照
事件顺序	哪个回调先到就立即重排	同一帧合并后统一提交
区域计算	多个高度直接相加	转换到窗口坐标后求并集
验证证据	只截一张正常页面	记录输入快照与最终内容矩形

这套方案比“给每种设备写一个 padding”更稳定，因为它只依赖窗口事实。新增折叠形态、自由窗口或跨设备流转时，业务页面不需要知道设备名称，只要继续消费同一种布局快照。快照还能序列化进问题日志，线上出现遮挡时可以直接回放。

可直接复用的排查表

• 旋转、悬浮窗、分屏和折叠切换都会更新快照。
• 系统栏与键盘重叠时只扣减一次。
• 页面不缓存首次 AvoidArea。
• 布局日志包含宽高、避让区和世代号。
• 屏幕朗读焦点不会落到不可见区域。

官方资料与适用范围

• 窗口沉浸式
• 多设备通用适配指南

沉浸式布局最怕的不是少一段边距，而是同时使用两个时刻的窗口事实。把输入合成快照，遮挡问题才从“偶现”变成可复现、可测试的工程规则。