iPhone Duo SwiftUI 布局怎么适配？2026 学生教程

症状：课程页在窄屏上按钮挤成一团，展开后又留下大片空白，折叠时还担心控件被挡住。
最快解法：先用灵活的 SwiftUI 容器按可用空间排布，再分别检查外屏、展开内屏和折叠姿态；不要用固定宽高锁死界面。

这篇适合正在做 SwiftUI 课程页面、刚学会 VStack 和 HStack，又担心不同屏幕姿态下内容被遮挡的学生。没有兼容 Mac、想通过模拟器练习的初学者，也可以在开始前核对 Xcode 环境要求。

先让课程页面跟着空间变化

做 iPhone Duo SwiftUI 布局适配，目标不是把一张设备截图原样复制到每种屏幕，而是让页面在空间变化时仍然能读、能滚动、能操作。SwiftUI 自适应布局可以先从 VStack、HStack、ScrollView 和系统安全区域开始，不必一上来写专用布局。

可以拿课程首页做练习：顶部是课程名称，中间是课程卡片，底部有“继续学习”按钮。先按内容关系分组，再检查有没有用固定宽高把卡片、标题或按钮钉在某个位置。Apple 的 SwiftUI 布局基础文档 介绍了内置布局容器；空间确实足够并且页面需要时，再考虑更复杂的布局方式。

三个容易被忽略的坑：

• 固定尺寸会把空间差异变成裁切问题。外屏可用空间较窄时，长标题和按钮标签可能被压缩；内屏变宽时，照搬固定宽度又可能让内容显得稀疏。
• 把所有内容塞进一行，不等于完成适配。一行放不下时，标题可以换行，次要信息可以放到后面；对课程清单而言，能够自然滚动通常比强行缩小文字更容易读。
• 背景和操作控件不该一概处理。“安全区域”可以理解为系统替重要内容留出的可见空间。SwiftUI 默认会顾及它；背景可以按设计延伸，但标题、输入框和按钮要检查是否仍然看得清、点得到。Apple 对 安全区域与背景延伸 有具体说明。

课程列表和详情页要不要一开始就做成左右并排？不必。先让窄空间下的单列结构正常工作；只有当可用空间足够、并排后仍容易阅读时，再考虑让课程列表与详情同时出现。Apple 的 自适应布局讲解 建议依据可用空间和 size class 调整界面，而不是根据设备名字或屏幕方向猜布局。

展开内屏：有空间再决定是否并排

展开后空间增加，课程列表和详情页可以继续单列，也可以在空间足够时主次并排。前者更容易保持阅读顺序；后者适合一边选课程、一边查看详情，但如果详情内容太窄，文字会频繁换行，反而增加阅读负担。

打开内屏后，界面是不是必须出现侧栏？不是。先看内容之间是否需要同时呈现：如果学生通常先选课程再打开详情，单列导航可能更清楚；如果作业要求同时比较多门课程，并排才可能有帮助。Apple 的开发讲解提到，iPhone Duo 内屏的 size class 与外屏不同，也提醒开发者避免只依据方向做布局判断。

SwiftUI 的 ViewThatFits 可以按提议的空间从候选视图中选出能放下的布局，适合有限的布局分支；但它不是所有页面都必须用的方案。先用基础容器做好内容层次，确认确实需要时，再阅读 ViewThatFits 官方文档。

用兼容的 Xcode 模拟器检查同一个页面

没有 iPhone Duo 真机，能不能先测布局？可以先用 Apple 提供的模拟器检查界面是否会随姿态变化，并记录遮挡、留白、滚动和操作是否正常；模拟器验证不能代替上市后的真机体验判断。

按下面步骤练习：

1. 先核对 Mac 和 Xcode。Apple 当前列出的 Xcode 27.1 Beta 要求 macOS Tahoe 26.6 或更高版本。电脑不符合时，先别把时间耗在反复安装上；确认兼容条件后再继续。
2. 建立简单课程页面。用 VStack 放标题、课程卡片和主要按钮，用 ScrollView 承载可能超出屏幕的内容。先让结构容易读懂，不追求复杂动画。
3. 检查固定宽高。逐项查看 .frame(width:height:) 是否真的必要。若只是为了在一张预览图里对齐而锁定尺寸，先试着移除或改成能随空间伸缩的布局。
4. 运行 iPhone Duo 模拟器。按 Apple 技术讲解中的流程，在 Device Hub 选择模拟器，并使用界面提供的控制切换打开、合上、旋转或折叠状态；具体能力以当前 Xcode Beta 和官方说明为准。
5. 每种状态都做同一轮检查。看标题是否完整、课程卡片是否可读、按钮是否容易操作、页面是否能滚动，以及留白是否影响理解。记录实际问题，再改布局并重新检查。