别让 iPad 版只是放大 iPhone：用 AI + NavigationSplitView 做双栏界面 (2026)

如果 iPad 横屏打开你的 App，用户还是只能在「列表页 → 详情页」之间来回跳，通常不是功能少，而是没有利用大屏空间。SwiftUI 的 NavigationSplitView 可以把一个列表/详情流程整理成侧边栏和详情栏；当空间变窄时，它又会收合成单栏导航。1

这很适合一个人做 vibe coding 的 PM：你先决定哪些内容应该同时看见，再让 AI 按这个产品约束改现有页面，不必先画一套 iPad 专属设计稿。

先判断页面适不适合

优先挑一个有稳定「选中一项，查看对应详情」关系的页面，例如：

项目列表 + 项目详情
邮件或消息列表 + 会话内容
文件夹 + 文件列表 + 文件详情
收藏列表 + 内容详情

首页卡片流、一次只填一个步骤的表单、强依赖全屏图片的页面，不适合作为第一块改造对象。先找一个列表和详情关系清楚的页面，AI 才容易在不改业务逻辑的情况下完成调整。

先写一张栏位表

别直接对 AI 说「帮我适配 iPad」。先把页面的分工写成四列，避免 AI 自己猜布局：

栏位	放什么	用户点什么	没有选中时显示什么
Sidebar	项目、分类或文件夹	切换一级范围	默认选中最近使用项，或保持空状态
Detail	当前选中项的主要内容	编辑、继续进入下一层	一句说明和下一步提示
Detail 内部下一层	编辑页、评论或附件	继续打开子页面	沿用现有返回路径

如果你的页面没有明确的侧边栏内容，就不要为了「看起来像 iPad App」硬塞一栏。双栏是为了减少来回跳转，不是为了增加视图数量。

让 AI 只改一个页面

把下面这段连同栏位表、当前页面截图和相关 SwiftUI 文件交给 AI 编码工具：

请先阅读当前项目中 [页面名称] 的导航和数据模型，再做一次最小改动：
1. 用 NavigationSplitView 把现有列表/详情流程改成 Sidebar + Detail 两栏。
2. Sidebar 使用现有数据和选中状态，不要创建演示数据或假页面。
3. 点击列表项时，Detail 立即显示对应内容；没有选中项时显示明确的占位说明。
4. 保留现有编辑、返回、保存和错误处理逻辑，不要顺手重写其它页面。
5. 在 iPad 横屏显示两栏，在窄尺寸和 iPhone 上允许系统收合为单栏，不能假设所有设备都同时显示两栏。
6. 如果当前代码使用 NavigationStack，请先列出保留它和把它放进 Detail 栏的理由，再提交修改。
7. 最后输出：改了哪些文件、如何运行、需要我验收的设备和状态。

Apple 对 NavigationSplitView 的定位就是两栏或三栏导航，前导栏的选择会控制后续栏位的内容。1 对 PM 来说，最重要的不是记住初始化器，而是把「选中谁」和「详情显示什么」这两个状态说清楚。

让 AI 检查两个常见坑

1. 不要承诺竖屏也一直双栏

Apple 在 iPad 的说明里展示了两栏和三栏布局：横屏有更多机会并排显示，竖屏或紧凑空间下，侧边栏可能收起，用户通过按钮重新打开；紧凑尺寸会折叠成堆栈。2

所以验收标准应该写成「横屏优先双栏，竖屏能顺畅打开侧边栏，iPhone 能正常返回」，不要写成「所有设备都必须同时显示列表和详情」。

2. 不要让现有详情页重复套导航

如果详情内部还要进入编辑页、评论页或附件页，可以让 Detail 栏继续承载现有的 NavigationStack。让 AI 先检查当前页面的导航层级，避免出现两个返回按钮、点击一次却跳两层，或详情页被重复包进导航容器。

Apple 的导航示例也把 NavigationSplitView 和 NavigationStack 组合使用，并提醒不要把 navigationDestination 放进 List、LazyVGrid 这类延迟加载容器内部。3 你不需要先理解所有 API，只要把这条作为 AI 的代码检查项。

PM 可以独立完成的验收

用模拟器或真机跑下面 6 步，先看一个页面是否成立：

iPad 横屏打开页面，确认侧边栏和详情栏都能看见，且没有遮住标题或底部操作。
点侧边栏中的三个不同项目，确认详情内容跟着切换，没有跳到错误项目。
iPad 旋转到竖屏，确认侧边栏收起后仍能重新打开，详情内容没有丢失。
在没有选中项目的初始状态下打开页面，确认用户知道下一步该点哪里。
用 iPhone 打开同一页面，确认它变成单栏流程，返回按钮和原来的编辑路径仍然可用。
从详情进入编辑、保存，再切换侧边栏项目，确认保存结果没有被切换动作覆盖。

发现问题时，不要只说「iPad 适配有问题」，直接把下面这张缺陷单发回 AI：

设备与方向：iPad 11 英寸，横屏/竖屏，或 iPhone [型号]
操作路径：从 [页面] 选择 [项目]，再执行 [动作]
实际结果：[例如旋转后详情为空、返回按钮出现两次]
期望结果：[写成用户能看到的结果]
限制：只修导航容器和选中状态，不改变业务数据和其它页面

这项改造的产品价值

它把一个产品决策复用到不同屏幕：在 iPad 横屏，用户可以边选边看；在竖屏和 iPhone，系统按可用空间收合成熟悉的单栏路径。Apple 也把 NavigationSplitView 作为多栏 App 的导航方式，并说明它会在窄屏环境适配为单栏堆栈。3

但它不会自动修好详情页内部的固定宽度、过长按钮或弹窗遮挡。第一轮只改导航栏位，验收通过后，再让 AI 针对详情页做大字号、横竖屏和空状态检查，范围会更可控。

别让 iPad 版只是放大 iPhone：用 AI + NavigationSplitView 做双栏界面