如何在MacOS多列导航视图中显示/隐藏列？

Question

我想在 macOS 上显示/隐藏 3 列 NavigationView 布局中的第二列。切换按钮确实隐藏了第二列的内容 - 但我希望它完全消失，就像用户将其拖走一样。

有什么想法吗？

struct ContentView: View {
    
    @State private var showSecondColumn = true
    
    var body: some View {
        
        NavigationView {
            
            // 1. Column / sidebar
            List {
                ForEach(0..<10) { i in
                    Text("Sidebar \(i)")
                }
            }
            .listStyle(.sidebar)
            
            // 2. Column - conditional
            if showSecondColumn {
                List {
                    ForEach(0..<10) { i in
                        Text("Second \(i)")
                    }
                }
                //  .frame(width: showSecondColumn ? 150 : 0) // does not work either
            }

            // 3. Column / Content
            Button(showSecondColumn ? "Hide second" : "Show second") {
                withAnimation {
                    showSecondColumn.toggle()
                }
            }
        }
    }
}

Answer 1

对于遇到此问题的其他人，我也遇到了同样的问题。我发现这篇文章基本上说列的数量在编译时是固定的，不能改变动态变化。

有点令人失望，但就其价值而言，苹果自己的笔记应用程序在未选择任何内容时只有一个空白的第三列，所以我想这是设计的一部分。