企业官网建设流程全解析

自由窗口弹窗越缩越偏：锚点坐标、窗口坐标和屏幕坐标别混用

全屏时点击工具栏按钮，弹窗正好出现在按钮下方；把应用拖成自由窗口并移动到屏幕右侧，弹窗开始偏几十像素，连续缩放后甚至跑到另一个窗口上。问题通常不是弹窗宽度，而是把组件局部坐标直接当成屏幕坐标。自由窗口可移动、可缩放并带标题栏，坐标原点会持续变化。

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

现场为什么越修越偏

页面里常同时出现组件局部坐标、窗口内容坐标和屏幕全局坐标。若锚点测量得到局部位置，却又加上已经包含标题栏偏移的窗口位置，就会重复平移；窗口移动后缓存的屏幕坐标也会过期。弹窗还需考虑避让区和屏幕边界，简单固定向下展开会在窗口边缘被裁切。

三套坐标怎样分层

坐标服务明确输入和输出空间：localToWindow 只处理组件层级，windowToScreen 只叠加窗口当前原点。每次窗口移动、缩放或避让区变化都使锚点缓存失效。定位器先计算候选方向，再在当前可见矩形内夹紧；无法完整显示时选择上方或侧边，而不是只改 x/y。

interface Point { x:number; y:number } interface Rect { x:number; y:number; width:number; height:number } export function toScreen(local:Point, component:Point, windowOrigin:Point):Point { return { x:local.x+component.x+windowOrigin.x, y:local.y+component.y+windowOrigin.y }; } export function clampPopup(p:Point,size:{width:number;height:number},safe:Rect):Point { return { x:Math.min(Math.max(p.x,safe.x),safe.x+safe.width-size.width), y:Math.min(Math.max(p.y,safe.y),safe.y+safe.height-size.height) }; }

案例一：窗口移动后弹窗仍出现在旧位置

窗口原点变化必须使屏幕坐标缓存失效。点击时重新组合当前 componentOffset 与 windowOrigin；若窗口正在拖动，可以暂时关闭弹窗或在下一稳定帧重定位，不能沿用移动前结果。

案例二：锚点靠近右下角，弹窗被裁切

先尝试下方，再根据安全矩形判断是否完整容纳；不够时切换到上方或左侧，最后才做夹紧。记录最终方向和触发原因，避免用户只看到弹窗突然跳位却无法排查。

封装成一个坐标服务

坐标服务把转换集中在一处，菜单、气泡、拖拽预览和右键面板都能复用。类型上可以给不同坐标空间加品牌标记，减少把两个数字对象直接相加的机会。

窗口验收清单

• 所有坐标字段标明 local/window/screen。
• 窗口移动和缩放会使缓存失效。
• 标题栏与系统避让区只叠加一次。
• 四个屏幕边缘都有方向切换用例。
• 多显示器或外接屏下重新获取安全矩形。

官方资料与适用范围

• 自由窗口简介
• 窗口沉浸式

自由窗口把过去固定的屏幕原点变成实时变量。坐标空间分得越清楚，弹窗就越不需要靠不断加减“神秘偏移量”维持。