SwiftUI: 如何在 macOS 中使用 NavigationView？

Question

我有两个分开的Xcode项目，我正在使用它们来学习SwiftUI：

1. 在Mac上进行真正的macOS项目（而不是Catalyst）。
2. 一个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上启动应用程序时，我会得到这个窗口：

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

有什么办法可以解决这个问题吗？也许我漏掉了什么？或者这可能只是一个错误吗？

- Salavat Khanov

---

我希望这只是一个暂时的故障，因为我在苹果的教程中到了这一步，但不得不退出：我已经非常努力地寻找替代品，并尝试使用SwiftUI在macOS上实现主细节应用程序的方法，但我无法弄清楚我们应该使用什么替代品。 - green_knight

Answer 1

这是我的代码，似乎可以使用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)
        }
    }
}

这将产生这样一个窗口：

- iphaaw

Answer 2

我没有答案，但我正在尝试做同样的事情，并有一些观察结果，或许它们会有所帮助:

添加目标视图：

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

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

此外，添加以下代码

 .onAppear { print("DetailView called") } 

细节视图显示，即使它没有被显示，当按钮被点击时，视图确实被调用。

编辑：它在那里！视图被分隔线隐藏了，请向左拖动以查看细节视图。

编辑2：Xcode beta 2会出现“'NavigationView'在macOS上不可用”的消息。

- rougement

---

“'NavigationView' 在 macOS 上不可用” 真遗憾。 - Salavat Khanov

在我的Xcode 11b2中，NavigationView和NavigationButton都无法使用。 - green_knight

在 beta 3 中，他们重新添加了 NavigationView：您可以使用两个新的样式属性来设置 NavigationView 的样式：stack 和 doubleColumn。默认情况下，iPhone 和 Apple TV 上的导航视图在视觉上反映出导航堆栈，而在 iPad 和 Mac 上，则显示分割视图样式的导航视图。（51636729）当使用 doubleColumn 样式时，创建导航视图时可以提供两个视图 - 第一个是主视图，第二个是详细视图。例如：NavigationView { MyMasterView() MyDetailView() } .navigationViewStyle(.doubleColumn) - Salavat Khanov

我看到他们把它加回来了，但我仍然无法让详细视图在窗口右侧拖动分隔符后显示出来。你有任何可用的代码吗？ - rougement

你们最终解决了这个问题吗？我也遇到了同样的问题。 - Mark McGookin

Answer 3

NavigationSplitView

NavigationSplitView是一个视图，它以两列或三列的形式呈现视图，其中前导列中的选择控制后续列中的呈现。

- user3339784

---

如果您的窗口有一个工具栏，目前还没有办法隐藏切换侧边栏按钮。 - XY L