如何在macOS上正确处理NavigationView中的选择?

时间:2020-04-30 14:08:47

标签: swift macos swiftui swiftui-navigationlink

我想根据边栏中的选择构建一个带有边栏和一些内容的普通macOS应用程序。

我有一个MainView,其中包含一个NavigationView和一个SidebarListStyle。它包含一个List和一些NavigationLink。这些具有选择的约束力。

我希望以下事情能起作用:

  1. 启动我的应用程序时,选择的值将被忽略。边栏中的项目都没有突出显示,详细信息窗格中也没有内容。

  2. 当我在侧栏中手动选择一个项目时,应该可以通过项目之间的向上/向下箭头键进行导航。由于选择/突出显示消失,此操作不起作用。

  3. 当我更新选择绑定的值时,它应该突出显示列表中没有发生的项目。

这是我的示例实现:

enum DetailContent: Int, CaseIterable {
    case first, second, third
}
extension DetailContent: Identifiable {
    var id: Int { rawValue }
}

class NavigationRouter: ObservableObject {
    @Published var selection: DetailContent?
}

struct DetailView: View {
    @State var content: DetailContent
    @EnvironmentObject var navigationRouter: NavigationRouter

    var body: some View {
        VStack {
            Text("\(content.rawValue)")
            Button(action: { self.navigationRouter.selection = DetailContent.allCases.randomElement()!}) {
                Text("Take me anywhere")
            }
        }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

struct MainView: View {
    @ObservedObject var navigationRouter = NavigationRouter()
    @State var detailContent: DetailContent? = .first

    var body: some View {
        NavigationView {
            List {
                Section(header: Text("Section")) {
                    ForEach(DetailContent.allCases) { item in
                        NavigationLink(
                            destination: DetailView(content: item),
                            tag: item,
                            selection: self.$detailContent,
                            label: { Text("\(item.rawValue)") }
                        )
                    }
                }
            }
            .frame(minWidth: 250, maxWidth: 350)
        }
            .environmentObject(navigationRouter)
            .listStyle(SidebarListStyle())
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .onReceive(navigationRouter.$selection) { output in
                self.detailContent = output
            }
    }
}

EnvironmentObject用于从DetailView内部传播更改。如果有更好的解决方案,我很高兴听到它。

因此问题仍然存在: 发生这种情况我做错了什么? 我曾希望Xcode 11.5 Beta 1可以解决,但事实并非如此。

1 个答案:

答案 0 :(得分:1)

找到tutorial from Apple后,很明显您不在macOS上使用NavigiationLink。而是绑定列表并将两个视图添加到NavigationView

通过对MainViewDetailView的这些更新,我的示例可以完美运行:

struct DetailView: View {
    @Binding var content: DetailContent?
    @EnvironmentObject var navigationRouter: NavigationRouter

    var body: some View {
        VStack {
            Text("\(content?.rawValue ?? -1)")
            Button(action: { self.navigationRouter.selection = DetailContent.allCases.randomElement()!}) {
                Text("Take me anywhere")
            }
        }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

struct MainView: View {
    @ObservedObject var navigationRouter = NavigationRouter()
    @State var detailContent: DetailContent?

    var body: some View {
        NavigationView {
            List(selection: $detailContent) {
                Section(header: Text("Section")) {
                    ForEach(DetailContent.allCases) { item in
                        Text("\(item.rawValue)")
                            .tag(item)
                    }
                }
            }
                .frame(minWidth: 250, maxWidth: 350)
                .listStyle(SidebarListStyle())
            DetailView(content: $detailContent)
        }
            .environmentObject(navigationRouter)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .onReceive(navigationRouter.$selection) { output in
                DispatchQueue.main.asyncAfter(deadline: .now() + .milliseconds(200)) {
                    self.detailContent = output
                }
            }
    }
}