【鸿蒙心迹】一多适配实战：把码上清单从手机搬到折叠屏

前言

系列前几篇都在"一台设备"里打转，这篇把应用放到折叠屏和平板上去。鸿蒙讲"一次开发、多端部署"（一多），听起来像口号，真做完一轮才发现它是一套具体的工程方法：断点怎么切、布局怎么让、哪些习惯要改。这篇用码上清单做样本，从手机跑到折叠屏再跑到平板。

一、先建断点心智：按窗口宽度，不按设备型号

一多的地基是断点（breakpoint）：系统按应用窗口的宽度把场景分成 sm、md、lg 三档——大致对应手机竖屏、折叠屏展开/小屏平板、大屏平板横屏。关键心智是：你适配的不是"设备"，而是"窗口"。折叠屏合上是 sm、展开是 md，同一个应用在一台设备上会横跨三档，按设备写死必错。

落地上不必自己监听宽度算断点，栅格容器直接带断点能力（下一节），复杂场景再用 mediaquery 订阅。

二、栅格：让列表自然分栏

待办列表在手机上一列正好，折叠屏展开后一列拉满整个宽屏就很难看了。用 GridRow/GridCol 改造：

GridRow() {
  GridCol({ span: { sm: 12, md: 6, lg: 4 } }) {
    TodoCard({ item: item })
  }
}

sm 占满 12 列、md 每行两卡、lg 每行三卡——布局逻辑写在 span 里，窗口一变自动重排。这是性价比最高的一步：几十行改动，应用在大屏上从"拉伸的手机页"变成"像样的大屏应用"。

导航栏同理：手机上底部 Tab，大屏上换成常驻侧边栏（SideBarContainer），内容区占满剩余宽度。判断条件就是断点，一份代码两端形态。

三、形态差异的三种处理

分栏之外，还会遇到"交互本身该不一样"的场景，按成本从低到高：

1. 尺寸类：间距、圆角、图标大小随断点微调，绑定断点变量即可；
2. 组件类：小屏用全屏弹窗的操作，大屏换成半模态（bindSheet 类能力）或靠侧面板，用户不用为点一个详情跳走整个页面；
3. 结构类：如折叠屏悬停态（上半屏看内容、下半屏操作），属于设备特性增强，做不了不影响主流程，做对了是惊喜。按"渐进增强"对待，别让它阻塞适配主线。

四、踩坑三条

1. 硬编码宽度在展开屏上当场爆炸：手机上 360vp 写死没问题，折叠屏一展开右侧一大片空白。改法不是调数字，是把"定宽"改成"弹性+断点"，让布局自己适应。
2. 断点切换时组件会重建：合上再展开折叠屏，跨断点后某些组件走重新创建，滚动位置、输入框内容会丢。解法是把关键状态上提到父级或应用级存储，组件重建无所谓，状态不能跟着死。
3. 大屏不等于放大的手机：只把字号图标等比放大的"一多"是假一多。判断标准很简单——大屏上信息密度是否变高了（同屏内容更多、操作路径更短），没有的话适配就没做完。

小结

一多做完，码上清单在手机、折叠屏、平板上都是体面的样子。下一篇聊数据持久化——待办越攒越多、跨设备同步的需求冒头之后，本地存储怎么设计才不会推倒重来。

*本文环境：DevEco Studio 5.x / HarmonyOS NEXT（API 14+）。断点定义与一多能力以官方《一多开发指导》为准。系列上一篇：《【鸿蒙心迹】ohpm 与包管理实录》。*