swiftui - SwiftUI 中具有不同列的侧边栏

Question

我正在使用 SwiftUI 2 附带的新侧边栏以及在三列大屏幕中导航的可能性。有关其工作原理的示例可以在这里找到: https://www.hackingwithswift.com/quick-start/swiftui/how-to-add-a-sidebar-for-ipados

它工作正常，但我想向前迈出一步，在我的主菜单中制作一些选项，显示三列，但其他选项只有两个。

这里是一些演示代码的示例。

import SwiftUI

struct ContentView: View {
    var body: some View{
        NavigationView{
            List{
                Section(header: Text("Three columns")){
                    NavigationLink(
                        destination: ItemsView(),
                        label: {
                            Label("Animals",systemImage: "tortoise")
                        })
                    NavigationLink(
                        destination: ItemsView(),
                        label: {
                            Label("Animals 2",systemImage: "hare")
                        })
                }
                Section(header: Text("Two columns")){
                    NavigationLink(
                        destination: Text("I want to see here a single view, without detail"),
                        label: {
                            Label("Settings",systemImage: "gear")
                        })
                    NavigationLink(
                        destination: Text("I want to see here a single view, without detail"),
                        label: {
                            Label("Settings 2",systemImage: "gearshape")
                        })
                }
            }
            .listStyle(SidebarListStyle())
            .navigationBarTitle("App Menu")
            
            ItemsView()
            DetailView(animal: "default")
            
        }
    }
}

struct ItemsView: View{
    let animals = ["Dog", "Cat", "Lion", "Squirrel"]
    var body: some View{
        List{
            ForEach(animals, id: \.self){ animal in
                NavigationLink(
                    destination: DetailView(animal: animal)){
                    Text(animal)
                }
            }
        }
        .listStyle(PlainListStyle())
        .navigationTitle("Animals")
    }
}

struct DetailView: View{
    var animal: String
    var body: some View{
        VStack{
            Text("🐕")
                .font(.title)
                .padding()
            Text(animal)
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewLayout(.sizeThatFits)
    }
}

例如，如果您在 iPad Pro(12.9 英寸)的横向模式下运行代码，您可以看到树列。首先是应用程序菜单(侧边栏)。如果单击前两个选项之一(动物和动物 2)，您可以看到动物列表(第二列)，当您单击某些动物时，您将到达第三列(详细 View )。 但是，当我单击菜单的最后两个选项(“设置”和“设置 2”)时，我只想显示两列。有任何线索如何实现它吗？

如果未选择菜单中的某些第一个选项(使用 NavigationLink 中的选定参数)，我尝试隐藏该部分，但没有成功。似乎不可能(或者我不知道)知道在侧栏中选择了哪个选项。

欢迎任何想法!

Answer 1

我花了几天时间才弄清楚。

在不同的iPad设备和多任务模式上测试，一切正常。(iOS14+，尚未在iOS13上测试)

最小示例:

extension UISplitViewController {
    open override func viewDidLoad() {
        super.viewDidLoad()
        self.show(.primary) // show sidebar, this is the key, toke me days to find this...
        self.showsSecondaryOnlyButton = true
    }
}

struct ContentView: View {
    @State var column: Int = 3
    var body: some View {
        switch column {
        case 3: // Triple Column
            NavigationView {
                List {
                    HStack {
                        Text("Triple")
                    }
                    .onTapGesture {
                        column = 3
                    }
                    HStack {
                        Text("Double")
                    }
                    .onTapGesture {
                        column = 2
                    }
                }
                Text("Supplementary View")
                Text("Detail View")
            }
        default: // Double Column
            NavigationView {
                List {
                    HStack {
                        Text("Triple")
                    }
                    .onTapGesture {
                        column = 3
                    }
                    HStack {
                        Text("Double")
                    }
                    .onTapGesture {
                        column = 2
                    }
                }
                Text("Supplementary View")
            }
        }
    }
}

我的另一个答案:设置侧边栏默认选定的项目。

结合这两个解决方案，我构建了一个 2&3 列共存样式的应用程序。

SwiftUI, selecting a row in a List programmatically