前言上一章 讲了首页待办行WorkItem如何组织标题、说明和状态标签。本篇继续看它外面的一层为什么首页主体要放在Scroll里。工业现场首页往往不是固定不变的。今天可能只有三条待办明天可能增加异常复核、模板确认、夜班交接、待报工批次同一个页面还要面对不同手机高度、系统字体缩放和底部导航占用空间。如果首页根容器完全固定内容一多就可能被遮挡或挤压。注塑工程师助手在 M1 阶段就把首页主体放进Scroll。这不是因为当前内容已经很多而是提前保证后续扩展时现场待办可以自然向下滚动底部导航仍然保持稳定。一、项目结构与文件概览本篇主要看entry/src/main/ets/features/home/HomeDashboard.ets。相关页面入口在entry/src/main/ets/pages/Index.ets底部导航在entry/src/main/ets/components/BottomNavigation.ets。HomeDashboard负责首页正文BottomNavigation负责固定底部入口。入口页把两者放在同一个外层Column中正文区域使用.layoutWeight(1)占据剩余高度底部导航固定在下方。理解这个布局后再看Scroll的作用会更清楚。二、首页外层结构首页组件的外层代码如下Componentexportstruct HomeDashboard{summary:DashboardSummarynewDashboardSummary(0,0,0,0);build(){Scroll(){Column({space:18}){// 标题区、指标区和现场待办区}.width(100%).padding({left:16,right:16,top:18,bottom:24})}.width(100%).height(100%).align(Alignment.TopStart).scrollBar(BarState.Off).backgroundColor(ThemeTokens.pageBackground)}}外层是Scroll里面是一个纵向Column。Column({ space: 18 })负责把标题区、四张指标卡和现场待办区按顺序排下去Scroll负责在内容高度超过可见区域时提供滚动能力。这里的关键点是Scroll不是替代Column而是包住Column。Column仍然负责内容布局Scroll负责可视区域和滚动行为。三、为什么当前内容不多也要用 Scroll当前 M1 首页只有四张指标卡和三条待办看起来不使用Scroll也能显示。但技术教程不能只看当前截图还要看后续功能会怎样增长。现场待办区很可能继续增加调机复核、异常关闭、模板确认、批次报工、夜班交接都可能成为首页提醒。如果根容器没有滚动能力新增内容只能压缩已有组件或者被底部导航挡住。使用Scroll后首页可以保持顶部指标卡稳定下面的待办列表随着内容增加自然滚动。用户仍然能扫到首屏重点也能向下查看后续事项。四、Scroll 与底部导航的关系在入口页中首页正文被这样渲染HomeDashboard({summary:demoBusinessRepository.dashboardSummary()}).layoutWeight(1)BottomNavigation({selectedTab:$selectedTab,onSelect:(tabId:string){this.selectedTabthis.navigationStore.select(tabId);this.closeDetail();}})HomeDashboard占据底部导航之外的剩余空间底部导航不参与首页正文滚动。这样用户滚动首页时底部入口仍然在屏幕下方主导航不会跟着内容一起滑走。如果把底部导航也放进同一个Scroll用户向下滑动时导航可能离开可视区域如果首页正文没有.layoutWeight(1)底部导航又可能被内容挤出屏幕。当前结构把滚动正文和固定导航分开是更适合工具型 App 的方式。五、scrollBar(BarState.Off) 的取舍首页设置了.scrollBar(BarState.Off)这表示隐藏滚动条视觉不表示禁用滚动。工业现场首页通常强调扫读滚动条本身不是核心信息隐藏它可以让界面更干净。但如果页面内容超过一屏用户仍然可以滑动。这里要注意不同产品对滚动条的取舍可能不同。如果是长列表、记录表或需要明确滚动位置的页面保留滚动条可能更合适。首页当前内容属于看板摘要隐藏滚动条是合理选择。六、顶部对齐为什么重要HomeDashboard的Scroll设置了.align(Alignment.TopStart)顶部对齐能保证内容从屏幕上方开始阅读。对于首页看板来说用户第一眼应该看到标题和指标而不是内容被居中放在屏幕中间。前面 M1 调整过页面顶部对齐也是为了让占位页和真实首页都符合工具型页面的阅读习惯。如果短内容被垂直居中页面看起来像空状态提示而不是工作台。工业工具的首页应该默认从顶部开始承载信息。七、和 WorkItem 的关系WorkItem已经通过maxLines和省略号保护了单条待办的高度但这只解决“单条不撑爆”的问题。Scroll解决的是“多条内容放得下”的问题。两个层级不能互相替代。可以这样理解WorkItem保护行内结构Scroll保护页面容器。行内结构稳定页面容器可滚动首页才能既整齐又可扩展。后续如果待办数据改为数组并使用ForEach渲染外层Scroll仍然成立。只要待办数量增加用户就可以继续向下浏览不需要重写首页外壳。八、常见错误第一个错误是把所有内容固定在一个不可滚动的Column里。短屏设备或字体放大后底部内容很容易被遮挡。第二个错误是让整个页面一起滚动包括底部导航。这样用户滑到底部时可能失去主入口不利于频繁切换模块。第三个错误是为了避免滚动强行压缩字体和间距。工业现场信息需要清楚可读过度压缩反而降低效率。第四个错误是把滚动当成兜底不控制单条内容高度。即使页面能滚动某条特别长的待办也不应该在首页占据过多空间。九、验证口径验证首页Scroll时可以看三件事。第一默认首页能从顶部显示标题、指标卡和现场待办。第二底部导航没有遮挡首页正文。第三当待办内容增加或设备高度变小时正文区域应该能上下滚动而底部导航保持在外层页面底部。M1 测试报告已经记录首页首屏中标题、4 个指标、3 条待办和底部导航可见首页内容没有横向溢出指标卡没有相互覆盖底部导航没有遮挡页面正文。本篇基于这份结果解释布局选择不额外声明更多设备形态已经验证。十、如果不用 Scroll页面会怎样坏掉不用Scroll的页面在短内容时不一定马上出问题所以这个坑常常被忽略。真正的问题会在内容增加、屏幕变矮或系统字体变大时出现。首页指标卡和待办区都属于纵向内容如果外层只是固定高度Column底部待办可能被底部导航遮住用户看不到最后一条提醒。另一种坏法是开发者为了让内容塞进一屏开始压缩字号、行距和卡片高度。这样看似解决了遮挡实际牺牲了现场扫读效率。工业页面不能为了避免滚动而把关键信息压到看不清。滚动是移动端很自然的能力应该在合适的容器层使用它。还有一种坏法是让指标卡、待办卡、底部导航都参与同一个滚动区域。用户向下查看待办后底部导航可能离开固定位置想切换模块时还要再滑回来。对工具型 App 来说这会增加不必要操作。十一、Scroll 里的内容仍然要有尺寸约束很多人以为加了Scroll内部内容就可以无限增长。其实这只是把“放不下”变成“可滚动”并没有解决组件自身的阅读问题。WorkItem仍然需要maxLines指标卡仍然需要固定高度外层Column仍然需要统一间距。可以把首页分成两层保护。第一层是组件内部保护标题最多一行说明最多两行卡片高度固定。第二层是页面容器保护当多个组件加起来超过可视区域时由Scroll承担滚动。两层缺一不可。这种分层很适合后续业务页面。机台列表需要列表项高度和列表容器共同保护异常详情需要字段组高度和页面滚动共同保护报表页需要图表区域尺寸和筛选结果滚动共同保护。B-005 讲首页其实是在建立工业 UI 的通用布局习惯。十二、什么时候不该使用 Scroll并不是所有区域都应该套Scroll。底部导航不应该滚动因为它是主入口短小的状态标签不需要滚动因为它们应该被压缩成一两个词弹窗里的关键确认操作也不应该因为内容过长而把按钮挤到用户找不到的位置。判断一个区域是否适合滚动可以看它是不是“内容主体”。首页正文是内容主体适合滚动底部导航是页面框架不适合滚动。待办列表如果独立成为一个长列表也可以滚动单条待办本身不应该滚动而应该省略并进入详情页查看完整内容。这个边界写清楚后读者就不会把Scroll当成万能容器。它解决的是内容区可视范围问题不解决信息架构和组件尺寸问题。九、Scroll 承载待办列表的真实原因很多初学者会把Scroll理解成“内容太多时才加的容器”。在这个首页里即使当前只有三条现场待办也值得使用Scroll因为页面的可用高度并不稳定。不同设备高度、系统字体缩放、底部导航高度、未来新增指标都会改变内容区剩余空间。只要其中一个因素变化原本刚好能显示的列表就可能被挤压。Scroll的价值在于给页面留出增长空间。首页上半部分是标题和指标卡下半部分是现场待办底部还有固定导航。正文区域如果不可滚动新增一条待办可能直接被底部导航遮住正文可滚动后布局仍然能保持完整用户也能通过滑动查看剩余内容。对于工业现场应用来说这比追求首屏塞满所有信息更可靠。本项目还关闭了滚动条显示。关闭滚动条不是为了隐藏内容而是为了减少视觉噪声。现场看板的主要阅读对象是数字、标题和状态标签滚动条在这种短列表场景中不是必要信息。需要注意的是scrollBar(BarState.Off)不会取消滚动能力只是改变视觉表现。十、Scroll 与底部导航的关系底部导航固定在Index.ets的最下方HomeDashboard使用.layoutWeight(1)占据剩余空间。这个组合让页面形成明确的两层结构上方是可滚动内容区下方是固定操作入口。用户滑动首页时导航仍然可见用户切换页签时正文区域被替换底部导航仍然保留。如果把Scroll放错层级就容易出现两类问题。第一类是底部导航也被卷入滚动区用户滑到底部前看不到导航入口。第二类是正文区域没有拿到完整高度列表末尾被固定导航盖住。当前写法把滚动限制在HomeDashboard内部再由外层layoutWeight(1)分配空间边界比较清楚。排查这类问题时不要只看某一行代码。先看页面根节点是不是Column再看正文组件是否使用layoutWeight(1)最后看滚动容器是否只包住正文内容。这个顺序能帮助读者把 ArkUI 的父子布局关系串起来。十一、待办项增加后的验证方法验证Scroll是否起作用可以先把待办项数量从三条临时扩展到五条或六条观察页面是否仍能从标题滚到最后一条。这个验证不需要额外图片运行时只要确认三件事指标区没有被压扁最后一条待办可以通过滑动看到底部导航始终停留在页面底部。如果增加数据后页面出现横向溢出优先检查WorkItem内的文本省略规则而不是怀疑Scroll。如果出现纵向内容被截断优先检查滚动容器高度和父级.layoutWeight(1)。如果底部导航跟着内容一起滚动说明滚动容器包裹范围过大需要回到Index.ets调整层级。这个验证方式也适合后续真实接口接入。接口返回的数据量不可控首页必须对“比演示数据更多”的情况有预案。Scroll、省略规则和固定导航一起构成了这个预案。十四、小结Scroll在首页里承担的是页面容器职责。Column负责组织标题、指标和待办Scroll负责在内容变长时提供滚动能力layoutWeight(1)让正文区域和底部导航互不挤压。对工业 App 首页来说提前使用Scroll是一种面向扩展的设计当前三条待办能整齐显示后续更多现场事项也能自然承载。