NavigationSplitView是用于导航的SwiftUI组件，在每个苹果平台上看起来都很棒。如果您想知道它是如何工作的或如何实现NavigationSplitView，这是开始查看的文章。

在我们开始之前，请花几秒钟关注我，为这篇文章鼓掌，这样我们就可以帮助更多的人了解这个有用的内容。

什么是NavigationSplitView

NavigationSplitView是一个组件，允许用户在iPhone Pro Max（仅在横向模式下）、iPad、Mac和Apple TV等大型设备上同时查看更多详细信息，特别是导航。虽然NavigationSplitView在大屏幕上看起来可能很棒，但在小屏幕上也运行良好。例如，在iPad（在滑动模式下）、iPhone SE或Apple Watch上，导航的额外细节被隐藏起来，并像常规的单列NavigationStack一样自动工作。如果您不熟悉NavigationStack的工作原理，请查看我在这里写的文章：https://medium.com/@
jpmtech/navigationstack-in-swiftui-d89a61bd8963

NavigationSplitView是什么样子的

我也想知道同样的事情，所以我运行了几个不同的模拟器来找到答案。在下面的屏幕截图中，我在第一、第二和第三视图中使用了红色、绿色和蓝色（因为RGB LED很棒）来说明导航SplitView的每个配置的工作原理。说到配置，苹果默认为我们提供了两种不同的配置。第一个是两列布局，第二个是三列布局。我在这里说“默认”，因为您可以在NavigationSplitView中嵌入NavigationStack，这样您就不必将所有导航都只放入三个视图中。如果您想直接跳转到实现自己的拆分视图，而不是看图片，请随时跳转到下一节，在那里您将了解如何构建自己的NavigationSplitView。

注意：在有多个方向屏幕截图的情况下，这意味着系统可以免费使用内置导航按钮，并按下它以获取新的屏幕截图。

在iPhone 15 Pro上查看2列拆分视图，纵向和横向视图如下所示（注意当没有足够的空间时，NavigationSplitView如何缩小到单列）：

在iPhone 15 Pro Max上查看2列拆分视图，纵向和横向视图如下所示：

在12.9英寸的iPad上查看2列分体视图，纵向和横向视图如下所示：

由于即使在3列布局中，iPhone Pro也不会从2列布局改变，我们将跳过显示2列布局显示的相同图像。

在iPhone 15 Pro Max上查看3列拆分视图，纵向和横向视图如下所示：

在12.9英寸的iPad上查看3列拆分视图，纵向和横向视图如下所示：

构建导航SplitView

现在我们知道每个配置是什么样子的以及它是如何运行的，让我们开始构建一个。

第一个代码块为我们提供了一个基本的数据结构，我们可以使用它，并允许我们轻松地将样本数据传递到下一个块的视图中。

// DataModel.swift
进口基金会

结构数据模型：可识别，可散列{
    让id = UUID（）
    让文本：字符串
}

类 SampleData {
    静态 let firstScreenData = [
        数据模型（文本：“火车”），
        数据模型（文本：“平面”），
        数据模型（文本：“汽车”），
]
    
    静态让 secondScreenData = [
        数据模型（文本：“慢”），
        数据模型（文本：“常规”），
        数据模型（文本：“快速”），
]
    
    静态 let lastScreenData = [
        数据模型（文本：“错误”），
        数据模型（文本：“so-so”），
        数据模型（文本：“右”），
]
}

下面的代码设置了三列NavigationSplitView，每个部分显示不同的数据列表。我们还在列表上方的文本组件中显示之前选择的项目，这演示了在NavigationSplitView中将数据从一个屏幕传递到下一个屏幕的样子（我们也可以使用视图模型或环境变量来完成相同的任务，但为了教程，这变得简单了）。NavigationSplitView的每个尾随闭包都会获取/显示传递给它的视图。

// ThreeColumnSampleCode.swift
导入SwiftUI

struct ThreeColumnSampleCode：视图{
    @State private var firstSelectedDataItem：数据模型？
    @State private var secondSelectedDataItem：DataModel？
    @State private var thirdSelectedDataItem：数据模型？
    
    var body：一些视图{
        导航SplitView {
            列表（SampleData.firstScreenData，选择：$firstSelectedDataItem）{项目
                NavigationLink（item.text，值：item）
}
.导航标题（“边栏”）
} 内容：{
            VStack（对齐：.leading）{
                如果firstSelectedDataItem！= nil {
                    文本（“之前选择的项目：\（firstSelectedDataItem!.text）”）
}
                列表（SampleData.secondScreenData，选择：$secondSelectedDataItem）{项目
                    NavigationLink（item.text，值：item）
}
.navigationTitle（“内容”）
}.填充（）
} 详细信息：{
            VStack（对齐：.leading）{
                如果secondSelectedDataItem！= nil {
                    文本（“先前选择的项目：\（secondSelectedDataItem!.text）”）
.padding（）
}
                列表（SampleData.lastScreenData，选择：$thirdSelectedDataItem）{项目
                    文本（item.text）
}
}
.navigationTitle（“详细信息”）
}
}
}

#预览 {
    ThreeColumnSampleCode（）
}

在iPad模拟器中的iPhone 15和12.9中运行此示例会给我们带来以下结果：

我们也可以通过简单地从三栏布局中删除“内容”部分，在两列布局中构建相同的示例。我们也可以使用NavigationStack在“详细信息”部分中继续导航。