一张 70×70 拼豆图只有 4900 个格子但每格放大到 11vp 并写入色号后纸面宽度会来到 804vp内容高度也超过普通手机的一屏。直接缩小能把全图塞进去却会让A12、F16这类三位色号失去可读性只做纵向滚动又看不到右侧列用一个Scroll同时期待横向和纵向拖动手势与内容约束也很难解释。本篇围绕拼豆制图的ExpandedChartPage()拆解一种稳定的二维浏览方式外层只负责横向内层只负责纵向纸张持有明确宽度页面状态负责进入与退出。重点不是“套两个滚动容器”而是让尺寸、方向、生命周期和交互提示形成同一份契约。一、先算清楚为什么不能继续压缩展开态的格子尺寸由expandedCellSize()决定。宽度达到 64 时每格取 11vpprivateexpandedCellSize(pattern:Pattern):number{if(pattern.width64){return11;}if(pattern.width48){return12;}return14;}privateexpandedPaperWidth(pattern:Pattern):number{return34pattern.width*this.expandedCellSize(pattern);}对 70 列图纸结果为纸面宽度 34 70 × 11 804vp 格子主体高度 70 × 11 770vp 上下坐标栏 16 × 2 32vp 底部留白 14vp360vp 手机屏幕即使扣除左右边距后只有三百多 vp804vp 的纸面不可能原尺寸完整展示。这里的正确目标不是“让内容不溢出”而是“保持格子可读并允许用户抵达任何一个坐标”。二、把二维问题拆成两个单轴容器页面使用外横内纵的结构Scroll(){Scroll(){Column({space:0}){this.ChartHeader(pattern.width,this.expandedCellSize(pattern));// 70 行格子this.ChartHeader(pattern.width,this.expandedCellSize(pattern));}.width(this.expandedPaperWidth(pattern))}.width(this.expandedPaperWidth(pattern)).height(100%).scrollable(ScrollDirection.Vertical).scrollBar(BarState.Auto)}.layoutWeight(1).width(100%).scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Auto)这段结构有三条关键约束外层视口宽度是100%内容宽度可以超过视口所以横向有可滚动距离。内层高度是100%纸面实际高度超过视口所以纵向有可滚动距离。两层scrollable()方向互斥横向位移不需要和纵向位移争夺同一个轴。三、纸张必须有确定宽度不能只依赖子节点撑开二维滚动最常见的空白故障是外层知道自己只有一屏宽却不知道内部纸张到底有多宽。格子虽然逐个设置了宽度布局测量阶段仍可能因为父级约束而压缩或裁切。拼豆制图同时给Column和内层纵向Scroll设置纸宽Column({space:0}){// 坐标与格子}.padding({right:14,bottom:14}).width(this.expandedPaperWidth(pattern))Scroll(){// 上述 Column}.width(this.expandedPaperWidth(pattern))这不是无意义的重复。前者规定纸张布局盒后者规定纵向滚动内容盒外层横向容器据此得到 804vp 的真实内容范围。若只留下width(100%)横向滚动条可能出现但无法抵达第 70 列。建议把计算结果集中为只读几何对象避免多个位置重复算式interfaceExpandedGeometry{cell:number;paperWidth:number;}functionexpandedGeometry(pattern:Pattern):ExpandedGeometry{constcellpattern.width64?11:pattern.width48?12:14;return{cell,paperWidth:34pattern.width*cell};}四、纵向容器为何放在横向容器里面如果结构反过来外层纵向、内层横向也能工作但编号图纸有一个实际偏好页面顶部标题和退出按钮应固定只有下方纸张区域参与拖动。外层横向容器占据剩余高度内部纵向容器把整张纸当作横向内容这样顶部栏不跟随任一轴移动。页面层级可以概括为ExpandedChartPage全屏 ├─ Header固定 ├─ 操作提示固定 └─ Horizontal Scroll剩余空间 └─ Vertical Scroll804vp 宽 └─ Chart Paper坐标栏 70 行 坐标栏若把整个页面包进纵向滚动用户向下查看第 60 行时标题也会离开视口退出入口变得难找固定头部能让大图浏览更像一个专用工作台。五、展开态应是页面状态不是另一个导航目标当前实现用isChartExpanded控制全屏分支if(this.activeTabnumberedthis.isChartExpanded){this.ExpandedChartPage(this.getSelectedPattern());}else{// 常规页面}if(!this.isChartExpanded){this.BottomNavigation();}点击缩略纸面进入展开态左上角返回和右上角关闭都把状态恢复为false。这种做法保留了当前图案、收藏状态和编号页上下文不需要额外传递路由参数。但它也带来一个必须明确的恢复规则只要离开numbered页就应保证展开态不会在下次进入时意外复现。可在切换底部标签时统一收口privateswitchTab(next:string):void{if(next!numbered){this.isChartExpandedfalse;}this.activeTabnext;}六、格子 Key 要在展开树中保持唯一普通纸面和展开纸面都使用同一批chartCells。展开树为 Key 加前缀ForEach(row,(cell:BeadCell){this.ChartCell(cell,this.expandedCellSize(pattern),true);},(cell:BeadCell)expanded-${cell.id})行 Key 同样使用expanded-row-。这样做能清楚表达“这是另一棵渲染树里的同一业务格子”也避免未来把缩略态和展开态放进同一个父容器时出现 Key 冲突。稳定 Key 不应包含当前滚动偏移或数组索引重排结果。格子 ID 已由row-col构成图案不变时就保持稳定横向或纵向滚动只改变可见区域不改变节点身份。七、滚动条、提示语和粗网格共同降低迷失感二维拖动的难点不止是实现还包括方向感。页面保留三种提示文案“拖动查看完整图纸”告诉用户内容可以移动。两个轴都使用BarState.Auto发生滚动时显示当前位置。ChartCell()每隔 8 行或 8 列画一条重线为大图提供局部参照。.border({width:(cell.row%80||cell.col%80)?1:0.5,color:(cell.row%80||cell.col%80)?ThemeTokens.gridHeavy:ThemeTokens.grid})还可以进一步增加固定角标例如显示“行 33—58 / 列 12—40”但这需要监听两个轴的偏移并换算可见范围。若没有可靠偏移数据宁可保留坐标栏和自动滚动条也不要显示可能错误的范围。八、性能边界4900 个节点不是无限画布当前展开页一次创建 4900 个Text节点。对固定 70×70 图纸这种实现直观且便于逐格显示色号但若尺寸扩展到 140×140节点数会变成 19600布局、测量和内存压力都会显著增加。可按规模分层≤ 70×70ArkUI 节点网格交互简单色号易读 70×70 120×120分块渲染只挂载附近区块 更大尺寸Canvas/PixelMap 绘制按视口缩放与平移分块时不要按单格虚拟化而应按 8×8 或 10×10 区块组织。这样粗网格、坐标换算和局部更新都有自然边界也能减少频繁创建小节点的开销。九、验收要沿两个轴走到尽头大图页面不能只看“能拖动”。建议至少执行以下步骤从编号页点击纸面确认底部导航隐藏、顶部退出入口仍可见。横向拖到最右确认第 70 列和右侧留白能完整出现。纵向拖到最下确认第 70 行、底部坐标栏和底部留白可见。在右下角连续做斜向手势确认两个轴都能继续响应。退出后重新进入确认选中的图案没有变化。在 48、64 两个宽度边界各放一张样本核对格子尺寸切换。若出现“只能横移不能下移”先查看内层是否拥有受限高度若“能下移但右侧永远缺几列”优先核对纸张与内层容器是否都使用expandedPaperWidth()若斜向拖动抖动则检查两层方向是否写反或某层仍保留默认方向。十、结语70×70 编号图的核心矛盾是“完整”和“可读”不能同时塞进一屏。拼豆制图用 804vp 的明确纸宽保住色号用外横内纵的两个单轴Scroll提供二维抵达能力再用固定头部、自动滚动条、稳定 Key 和粗网格维持方向感。这套结构适合固定规模的施工图、像素图、表格预览和地图切片。真正可靠的判断标准不是容器数量而是每一层是否只有一个清晰职责页面控制模式外层控制横向视口内层控制纵向视口纸张只负责按确定几何渲染内容。