SwiftUI：如何在 macOS 中使用 NavigationView？答案

【问题标题】：SwiftUI: how to use NavigationView in macOS?SwiftUI：如何在 macOS 中使用 NavigationView？
【发布时间】：2019-10-30 05:07:11
【问题描述】：

我有两个独立的 Xcode 项目用于学习 SwiftUI：

Mac 上真正的 macOS 项目（不是 Catalyst）。
一个 iOS 项目 (iPhone)。

下面的代码创建了一个简单的NavigationView 主从视图：

import SwiftUI

struct ListView : View {
    var body: some View {
        NavigationView {
            List() {
                NavigationButton(destination: Text("detail 1")) {
                    Text("row 1")
                }
                NavigationButton(destination: Text("detail 2")) {
                    Text("row 2")
                }
            }
        }
    }
}

#if DEBUG
struct ListView_Previews : PreviewProvider {
    static var previews: some View {
        ListView()
    }
}
#endif

它在 iOS 上按预期工作????

但是在 macOS 项目上，与上面相同的代码不能以相同的方式工作????

当我在 Mac 上启动应用程序时，我得到了这个窗口

当我点击任何一行时，详细视图只会折叠/消失，从不显示详细视图。

任何想法如何解决这个问题？也许我错过了什么？或者这只是一个错误？

【问题讨论】：

我希望这是一个暂时的故障，因为我在 Apple 的教程中达到了这一点，不得不退出：我一直在努力寻找替代品，以及一种在 macOS 中使用 SwiftUI 实现主从应用程序的方法，但我无法确定我们应该改用什么。

标签： ios macos swiftui

【解决方案1】：

我没有答案，但我正在尝试做同样的事情并有一些意见要补充，也许它们会有所帮助：

添加目标视图：

NavigationButton(destination: DetailView()) {
            Text("Show Detail")
        }

在 NavigationView 上设置宽度可防止右侧视图消失。

另外，添加

 .onAppear { print("DetailView called") }

到详细视图显示，即使它没有被显示，实际上在单击按钮时也会调用该视图。

编辑：它就在那里！视图被分隔线隐藏，向左拖动可查看详细视图。

编辑 2：Xcode beta 2 给出“'NavigationView' 在 macOS 中不可用”消息。

【讨论】：

"'NavigationView' 在 macOS 中不可用" 无赖
NavigationView 和 NavigationButton 在我的 Xcode 11b2 中都不可用。
在 beta 3 中，他们重新添加了 NavigationView：您可以使用两个新的样式属性设置 NavigationView 的样式：stack 和 doubleColumn。默认情况下，iPhone 和 Apple TV 上的导航视图在视觉上反映了导航堆栈，而在 iPad 和 Mac 上，显示的是拆分视图样式的导航视图。 (51636729) 当使用 doubleColumn 样式时，您可以在创建导航视图时提供两个视图 - 第一个是主视图，第二个是详细视图。例如：NavigationView { MyMasterView() MyDetailView() } .navigationViewStyle(.doubleColumn)
我看到他们将其添加回来，但如果不从窗口右侧拖回分隔线，我仍然无法显示详细视图。你有任何工作代码吗？
你们有没有想过这个问题？我也有同样的问题

【解决方案2】：

这是我使用 Xcode 12.2 beta 3 修复它的代码：

import SwiftUI

var listItems = ["Item 1", "Item 2", "Item 3", "Item 4"]
var secondItems = ["Second 1", "Second 2", "Second 3", "Second 4"]

struct ContentView: View
{
    
    @State var select: String? = "Item 1"
    var body: some View
    {
        VStack
        {
            NavigationView
            {
                List
                {
                    ForEach((0..<listItems.count), id: \.self)
                    {index in
                        NavigationLink(destination: SecondView(), tag: listItems[index], selection: $select)
                        {
                            Text(listItems[index])
                                .padding(.vertical, 2.0)
                        }
                    }
                    Spacer()
                    
                }.frame(width:160)
                                .listStyle(SidebarListStyle())
            }
            
            .toolbar
            {
                Text("this is not the title")
                Button(action: {})
                {
                    Label("Upload", systemImage: "square.and.arrow.up")
                }
            }
            .navigationTitle("My Title")
            .navigationViewStyle(DoubleColumnNavigationViewStyle())
        }
    }
}

struct SecondView: View {

    var body: some View {
        NavigationView {
            List
            {
                ForEach((0..<secondItems.count), id: \.self)
                {index in
                    NavigationLink(destination: Text(secondItems[index]))
                    {
                        Text(secondItems[index])
                            .frame(height: 20)
                    }
                }
            }.frame(width:150)
        }
    }
}

这会产生一个像这样的窗口：

【讨论】：