ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

自由窗口切回前台选中项变了:窗口焦点和业务焦点为什么必须分开

自由窗口切回前台选中项变了:窗口焦点和业务焦点为什么必须分开 自由窗口切回前台选中项变了窗口焦点和业务焦点为什么必须分开两个自由窗口并排工作用户在左侧列表选中一条记录点击右侧浏览器查资料再切回应用列表高亮却跳到了第一项。官方自由窗口文档指出窗口被点击或触摸后会提升 Z 轴并获取焦点。窗口重新获得焦点是系统事实但它不等于用户重新选择了第一条业务数据。验证边界本文依据华为开发者官网截至 2026-09-25 可访问的资料整理。文中的状态机、去重器和坐标计算已经在 Node.js 宿主环境执行断言当前本机仍是 API 24 SDK且没有连接 HDC 真机因此不把这些断言写成 API 26 编译或真机实测。涉及窗口、拖拽和跨设备能力的正式交付仍需在 API 26 SDK、模拟器或对应真机上补齐接口编译、交互录像与日志证据。重复执行从哪里来很多页面把onWindowFocus、组件onFocus和业务 selectedId 绑在一起窗口激活就给第一个可聚焦元素焦点焦点回调又顺便更新选中项。鼠标点击标题栏、AltTab 返回或弹窗关闭都会触发这条链导致业务状态无故改变。必须分别复现窗口失焦、键盘焦点迁移和鼠标选中才能看清谁误写了 selectedId。幂等边界怎么定义建立三层状态windowActive 只控制动画和资源恢复keyboardFocusId 只服务键盘与无障碍导航selectedId 表示用户明确选择的业务对象。窗口重新激活时恢复上次键盘焦点但只有点击、Enter 或业务命令可以改变 selectedId。若原焦点元素已删除寻找最近合法焦点也不自动改业务选择。interface FocusState { windowActive:boolean; keyboardFocusId?:string; selectedId?:string } export function onWindowActive(s:FocusState,active:boolean):FocusState { return { ...s, windowActive:active }; } export function onKeyboardFocus(s:FocusState,id:string):FocusState { return { ...s, keyboardFocusId:id }; } export function onUserSelect(s:FocusState,id:string):FocusState { return { ...s, selectedId:id, keyboardFocusId:id }; }案例一点击窗口标题栏返回应用标题栏点击只让窗口激活不应触发列表第一项的业务选择。页面恢复资源后把键盘焦点放回之前的控件若用户没有继续操作详情区仍显示原 selectedId。日志应区分 WINDOW_ACTIVE 与 USER_SELECT。案例二选中项被删除后重新获得焦点业务层先明确 selectedId 失效并选择空状态或相邻项焦点层再寻找可聚焦控件。不要让焦点框移动反过来决定删除后的业务对象否则鼠标、键盘和屏幕朗读会产生不同结果。失败、重试与回滚观察项容易写错更可靠的处理窗口激活激活就选第一项只恢复资源和视觉状态键盘焦点焦点等于选中独立记录可导航控件业务选中任意 focus 回调都写入只接受明确用户意图异常恢复找不到焦点就清空页面分别修复焦点与业务状态三层状态分离后自由窗口、弹窗和多显示器切换都不会随意改业务选择。封装统一的状态迁移函数还能用事件序列测试 AltTab、鼠标和键盘三种路径。可复用门禁窗口激活不会修改 selectedId。键盘焦点与鼠标高亮含义明确。删除控件后分别恢复焦点和业务状态。日志标记焦点事件来源。触控、键鼠和屏幕朗读路径结果一致。官方资料与适用范围自由窗口简介多设备通用适配指南自由窗口让焦点变化变得频繁。只有把“窗口正在使用”“键盘在哪里”和“用户选了什么”分开任务才能在来回切换中保持连续。
返回列表