SwiftUI导航SplitView

欢迎大家来到IT世界,在知识的湖畔探索吧!

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

欢迎大家来到IT世界,在知识的湖畔探索吧!

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

什么是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”）， 数据模型（文本：“右”）， ] }

欢迎大家来到IT世界,在知识的湖畔探索吧!

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

欢迎大家来到IT世界,在知识的湖畔探索吧!// 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在“详细信息”部分中继续导航。