专题：布局与适配

折叠屏展开后只是把单列卡片拉得很宽，信息密度没有增加；折叠后双栏又挤得无法阅读。适配重点应是内容结构随可用空间变化。

先理解问题

窗口断点适合决定一栏还是两栏，但断点来自内容约束。主从页面还要定义选择状态、详情展示和返回行为，不能仅改变 flexDirection。

实现路径

1. 先量出列表与详情各自最低可用宽度，再加间距形成候选断点。
2. 窄屏采用列表到详情的导航，宽屏同时展示两者，共享同一个选择身份。
3. 窗口变窄时保留当前选择，明确转换成详情页还是回到列表。

核心示例

type Layout = 'single' | 'master-detail';
export function chooseLayout(width: number): Layout {
  const listMin = 280;
  const detailMin = 400;
  const gap = 24;
  return width >= listMin + detailMin + gap ? 'master-detail' : 'single';
}

这些尺寸只是示例内容预算。真实产品还应考虑系统字体、侧边导航与安全区占用，必要时按内容测量选择布局。不要仅凭设备名称断定当前窗口足够宽。

容易忽略的边界

展开与折叠可能发生在编辑、视频播放或请求中。重建整棵页面树会丢失状态，应该让业务身份和草稿位于可跨布局保留的层级。

怎么验证

• 编辑中切换宽窄布局：草稿不丢。
• 选中记录在双栏和单栏之间保持一致。
• 极窄分屏仍有可用降级。

多屏适配是信息组织与状态连续性问题，窗口尺寸只是启动决策的输入。

适用范围与参考

示例用于说明设计与排查方法，非完整应用，也不代表已经过设备实测。 组件片段需接入对应项目；文中自定义函数、示意协议和策略数值需按业务补齐。迁移到 OHOS 时应另外核对适配层支持。

• 相关官方文档与接口背景