LESSON 28 / 575 分钟

iPadOS:分栏、多窗口与指针

iPad 的重点不是把手机界面放大,而是根据可用空间组织工作。

用你的前端经验理解

响应式思维依然有用,但还要考虑分屏、窗口、键盘、指针和 Apple Pencil。

为什么需要它

iPad 的区别不只是屏幕更大,它也支持可变化窗口、键盘、指针和多任务。以设备型号判断“应该显示两栏”会在窄窗口失效。布局应该响应实际可用空间:宽时显示列表与详情,窄时把同一信息结构收拢为可导航的层级。

它是怎样工作的

NavigationSplitView 可以表达列表、内容与详情关系,但选中项仍应由业务状态明确管理。多个窗口通常共享仓库,却各有自己的选择和编辑状态。键盘快捷键要与当前焦点和功能对应,拖放则要明确接收的数据类型、重复导入与异步加载失败行为。

把关键概念连起来

1

布局

NavigationSplitView 可表达侧栏、列表和详情;空间不足时让导航自然收拢。

2

输入

提供硬件键盘快捷键、拖放和指针交互;与 Pencil 相关的创作需求再引入 PencilKit。

3

场景

多窗口可能同时查看或编辑同一数据。界面状态可独立,业务数据需要一致。

把手机阅读列表扩展为 iPad 工作区

  1. 宽窗口展示列表与文章,窄窗口先展示列表,选中后进入详情;不要复制两份互不关联的页面数据。
  2. 为每个窗口维护独立 selection,在共享仓库删除文章时,相关窗口都安全清理失效选择。
  3. 补上键盘添加与搜索入口,并测试指针悬停不能是唯一发现操作的方式,触控用户仍要可完成任务。

这里需要你亲自判断

不要只通过“是不是 iPad”决定布局;可用窗口宽度和 size class 更重要。

做一个小练习

画出阅读清单在窄窗口与宽窗口时的两种信息布局。

  1. 在宽、窄窗口切换时保持选中文章与未提交草稿。
  2. 打开两个窗口选择不同文章,检查是否发生不必要的联动。
展开参考思路与验收标准

宽窄布局应是同一任务的不同呈现,而不是两个行为不同的产品。选中项属于窗口,共享文章属于仓库;清楚分层后,多窗口会比堆尺寸判断更容易维护。

iPad 布局应主要依据什么?

继续查阅官方资料
Apple Developer 官方资料

本课聚焦核心认知。具体 API、系统要求与发布政策,以当前官方文档和工程验证为准。

答对理解题后即可标记完成