ArkUI Grid：货架缺位格坐标映射与禁选回退【鸿蒙心迹】

素材说明本文所有界面、DevEco Studio、模拟器和 HiLog 配图均为人工制作的技术演示非真实编译截图、真机测试或上架审核结果。代码供工程设计讨论需结合目标 SDK 在项目中编译和验证。一、点中的是第三格业务却认成了第四个位置我给一个仓储盘点小工具改货架选位时最先遇到的并不是 Grid 的样式问题。货架有三层每层四个格子一共十二个物理坐标。但现场有些位置临时被锁定有的是设备检修有的是物料尚未验收。界面仍然要让操作员看见它们不能简单从数组中删掉。删掉以后后面的卡片自动往前补位屏幕上看似整齐实际位置编码却全错了。这个 Demo 叫ShelfAtlas页面是ShelfSlotPage演示任务SH-3412。最终要展示的规则版本是rev5R1C3、R2C2、R3C2三格禁选其他九格可用。操作员之前选了R2C2规则更新时它突然变成禁选格页面将选择修复到同一行右侧最近的R2C3标记FALLBACK_OK。这些数值全部是专门为文章构造的静态演示数据不对应真实仓库。问题看起来像“禁用按钮”但我更在意三件事物理坐标不能随着数据过滤改变禁选格点击时不能把旧选择清空规则变化后不能把一个已经失效的选中值继续带到提交接口。一个环节做错用户看到的蓝框和真正提交的货格 ID 就可能不是同一位置。二、先把十二个物理槽位建完整再决定谁能点ArkUI 的Grid和GridItem用来组织网格显示四列可以通过columnsTemplate声明。这里没有使用系统提供的仓储选位服务——系统负责布局位置编号、可选规则和回退策略全部放在应用层。之所以坚持先建完整矩阵是因为ForEach的数据顺序是渲染输入不能拿过滤后数组的下标充当物理列号。这段代码解决坐标错位生成十二个固定 ID锁定集合只改变可选标记不删除位置。row、col从零基索引计算但界面展示一基编号如果将来有第五列需要同时调整总数和列数不能只改视图模板。interfaceShelfCell{id:string;row:number;col:number;locked:boolean;}functionmakeShelfCells(lockedIds:string[]):ShelfCell[]{constlockednewSetstring(lockedIds);constcells:ShelfCell[][];for(letindex0;index12;index){constrowMath.floor(index/4)1;constcol(index%4)1;constidR${row}C${col};cells.push({id,row,col,locked:locked.has(id)});}returncells;}返回数组长度始终是十二。禁选位置R1C3仍占第一行第三列第二行第二列也不会因为撤掉一张卡片变成“第二行第一列”。维护时要保证规则接口返回的是稳定坐标 ID而不是临时渲染下标。若后台传来R8C1这样的越界值应当记录配置异常而不是把它插入布局。这个版本只在固定三乘四模型下演示跨尺寸布局和动态扩容不在本例结论范围内。三、点击禁选格时不要先清空已选择值我曾见过一种写法点击任意单元格先给selectedId赋值再在异步判断中发现禁选把状态改回去。结果是页面短暂高亮了不允许选择的格子。更麻烦的是如果中间已经触发确认操作回退值和提交值可能发生竞态。这段代码解决交互顺序先验证 ID 必须存在、且当前非禁选才允许改变选择。非法点击返回原值不产生中间过渡状态。提交层还会再次按最新规则校验不能把点击拦截等同于安全保证。functionchooseShelfCell(requestId:string,cells:ShelfCell[],selectedId:string):string{constmatchedcells.find((cell:ShelfCell)cell.idrequestId);if(!matched||matched.locked){returnselectedId;}returnmatched.id;}functionavailableCount(cells:ShelfCell[]):number{returncells.filter((cell:ShelfCell)!cell.locked).length;}这样操作员点击R1C3界面维持原来的有效选中不会发生“红框跳一下再回来”。当原选中就是禁选值时则不能套用这条规则那不是普通点击而是规则热更新带来的数据修复。两种情况必须分开处理交互拦截保留合法状态规则修复主动寻找替代位置。页面销毁后不再保留触摸回调如果接入远程规则订阅还需在离开页面时解绑监听。四、规则从 rev4 到 rev5选中的格子必须重新验算这个场景的关键证据不是第一次点击而是后台规则变化。rev4时只有R1C3和R3C2被锁R2C2可以正常选中。切到rev5后新增锁定R2C2仍让蓝框停在原处就等于向操作员撒谎。我采用一个可解释的回退先看旧位置是否仍可选否则优先找同一行中列号大于旧列号的最近空位再找同一行其他空位如果整行都锁才扫描全货架。这段代码解决热更新回退不是根据当前屏幕上的可见索引找下一格而是按固定坐标排序如果全锁定则返回空 ID提交按钮应禁用绝不能悄悄选到第一个数组元素。functionrepairShelfSelection(oldId:string,cells:ShelfCell[]):string{constactivecells.find((c:ShelfCell)c.idoldId);if(active!active.locked)returnoldId;constoldcells.find((c:ShelfCell)c.idoldId);if(!old)returncells.find((c:ShelfCell)!c.locked)?.id??;constrowcells.filter((c:ShelfCell)c.rowold.row!c.locked);constrightrow.find((c:ShelfCell)c.colold.col);if(right)returnright.id;if(row.length0)returnrow[0].id;returncells.find((c:ShelfCell)!c.locked)?.id??;}样例的旧位置是R2C2同排最近的右侧空位恰好是R2C3。这个策略不是系统规定的交互规范而是仓储业务可以向使用者解释的明确规则其他行业也许应当直接清空并要求重新选择。更重要的是修复行为要落在一次受控的规则替换流程里更新锁定集合、重建完整矩阵、校验并修复所选 ID然后才将新版本发布给界面。不能让锁定集已经变更、选中值还停在旧数据上。开发演示图固定显示左侧ShelfAtlas/entry/src/main/ets/pages/ShelfSlotPage.ets目录、中间的repairShelfSelection代码、右侧格子矩阵和底部 HiLog。演示日志为SH-3412 rev5 locked3 available9 selectedR2C3 stateFALLBACK_OK。日志只是文章中的预期业务轨迹不是假装真实运行的控制台录屏。核对图片时最应该检查的是编号位置第一行第三格、第二行第二格、第三行第二格必须一直被占位。五、页面显示和提交快照不能只靠同一个变量进入页面时可以先拿到rev4的快照但确认动作必须读取提交时的最新版本。假设操作员在旧页签里停留许久远端已经进入rev5即便他从未再点击一次旧的R2C2也不能过关。界面在演示结束时显示十二个物理槽位、三个禁选、九个可选选中R2C3但后台真正落库还应携带坐标和规则修订号再由服务端对照权威规则复核。我把手机演示图做成不带边框的纯屏幕形式。状态栏有时间、网络信号、Wi-Fi 和电量主标题是“货架选位演示”任务SH-3412规则rev5底部状态FALLBACK_OK。这种图的作用是说明工程验收希望看见什么不代表真的在 HarmonyOS 设备上完成操作。尤其是“可选 9/12”与“禁选 3 格”必须同时成立不能为了画面好看随意改其中一个数字。六、把最容易漏掉的三个边界留在验收表第一是空货架或全锁定。空结果不应访问cells[0]全锁定也不允许默认选中第一项两者都应明确给出不可提交状态和空值原因。第二是规则逆序到达应用只有在新修订号更大时才替换本地快照不能把rev5又被迟到的rev4覆盖。本文没有写网络订阅实现只给出了选位层如何消费可靠版本的接口边界。第三是坐标与视觉顺序发生变化。纵向屏幕可能有四列折叠屏横向可能希望展示六列如果货架的物理行列仍是三乘四就不能仅凭 Grid 的屏幕换列给物理坐标重新编号。正确做法是让业务坐标成为身份键让视觉布局是独立的投影。当前示例选择四列完全是为了演示直观实际项目应继续针对无障碍焦点、屏幕旋转和超长文本测量做设备级测试。这次改造让我重新确认了一件事网格能把卡片摆整齐但不能替业务守住“这个格子究竟在哪里”。在规则热更新的瞬间先把数据身份、禁选判定和回退选择做成纯函数再把结果交给 ArkUI 展示故障就更容易复现也更容易向一线人员解释。本文使用的所有数据和截图均属静态演示尚无目标 SDK 编译或真机验证结论。七、参考资料与复查范围华为官方 ArkUI 网格元素拖拽文档说明了 Grid、GridItem 的布局与交互背景本文没有启用拖拽动画https://developer.huawei.com/consumer/cn/doc/HarmonyOS-Guides/arkts-grid-element-drag-exchange 。ArkTS 基础能力及容器使用参照官方简介https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-overview 。请根据项目实际 SDK 版本复查组件属性及边界行为。本文仓储锁定规则、回退次序和任务编号皆为应用层演示设计。