lijianfei.com

在 SwiftUI 中，NavigationSplitView 和 NavigationStack 是两种不同的导航视图结构，用于构建用户界面中的导航功能。它们的主要区别如下：

1. 结构和应用场景

• NavigationSplitView

  • 是一种三栏布局，专为在 iPad 和 Mac 上实现主从（Master-Detail）或更复杂的分屏导航设计的。
  • 支持 主视图 (Primary)、补充视图 (Supplementary) 和 详细视图 (Detail) 三个区域，可以根据设备和屏幕大小动态调整布局。
  • 适用于多层级数据浏览的应用场景，如邮件客户端或文件管理器。
  • 示例场景：iPad 上的邮件应用，其中左侧显示文件夹，中间显示邮件列表，右侧显示选中的邮件。

• NavigationStack

  • 是一个单栈导航，用于表示线性或层级式导航。
  • 适合需要页面依次推进的界面，比如从主页面导航到详细页面。
  • 适用于小屏设备（如 iPhone）或简单导航需求。

2. API 和使用方式

• NavigationSplitView

  NavigationSplitView {
      List(["Item 1", "Item 2"], id: \.self) { item in
          Text(item)
      }
  } detail: {
      Text("Detail View")
  }
  

  • 定义多个区域（主视图和详细视图），可以独立控制内容。
  • 根据平台和屏幕尺寸，自动调整布局，可能折叠为类似 iPhone 的单视图导航。

• NavigationStack

  NavigationStack {
      List(["Item 1", "Item 2"], id: \.self) { item in
          NavigationLink(item, destination: Text("\(item) Details"))
      }
  }
  

  • 只需提供根视图，后续的页面由用户导航逐步加载。
  • 更加线性，适合逐步推入视图的场景。

3. 适配和平台支持

• NavigationSplitView

  • 优化了 iPad 和 Mac 上的大屏体验。
  • 可以根据环境动态适配：在 iPhone 上自动折叠为单视图。

• NavigationStack

  • 更适合 iPhone 的简单线性导航。
  • 在大屏设备上可能显得局限，无法充分利用屏幕空间。

4. 灵活性

• NavigationSplitView

  • 提供更高的灵活性和复杂性，可以让用户同时查看多个视图区域。
  • 对于更复杂的导航模式，比如树状结构，表现更优。

• NavigationStack

  • 比较简单，关注单一的导航栈操作，适合页面间的逐步导航。

选择建议

• 如果你的应用需要在大屏设备上利用分屏功能（例如同时显示目录和内容），使用 NavigationSplitView。
• 如果应用是线性层级导航，或主要面向小屏设备（如 iPhone），使用 NavigationStack 即可。