为macOS中的三列NavigationView定义中间列宽度

Question

下面是macOS应用程序中三列NavigationView的示例。我为Sidebar和Itembar定义了minWidth，但只有Sidebar尊重宽度值。Itembar似乎忽略了它。是否有一种方法来定义中间列视图的宽度(由Itembar视图表示)?

import SwiftUI
struct Group {
let name: String
let items: [String]
}
let groups = [
Group(name: "Group A", items: ["Item 1", "Item 2"]),
Group(name: "Group B", items: ["Item 3"]),
Group(name: "Group C", items: ["Item 4", "Item 5", "Item 6"])
]
struct Sidebar: View {
@State private var selection: String?

var body: some View {
List(groups, id: .self.name) { group in
NavigationLink(group.name, destination: Itembar(items: group.items), tag: group.name, selection: $selection)
}
.frame(minWidth: 150)
.listStyle(SidebarListStyle())
.toolbar {
Button(
action: {
NSApp.keyWindow?.contentViewController?.tryToPerform(#selector(NSSplitViewController.toggleSidebar(_:)), with: nil)
}, label: {
Label("Toggle sidebar", systemImage: "sidebar.left")
})
}
}
}
struct Itembar: View {
let items: [String]
@State private var selection: String?

var body: some View {
List(items, id: .self) { item in
NavigationLink(item, destination: DetailView(detailText: item), tag: item, selection: $selection)
}
.frame(minWidth: 100)
}
}
struct DetailView: View {
let detailText: String
var body: some View {
Text("The selection is (detailText)")
}
}
struct ContentView: View {
var body: some View {
NavigationView {
Sidebar()
Text("Select a Group")
Text("Select an Item")
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

Answer 1

1. 当没有选择项时，中间列的大小根据Text("Select a Group")占位符计算，当某些项被选中时，则根据List大小计算。所以你需要设置minWidth在两个地方一致的行为
2. 看起来中间列有系统minWidth: 200，所以你不能用一个较低的值覆盖它，只能用一个较大的

struct Itembar: View {
let items: [String]
@State private var selection: String?

var body: some View {
List(items, id: .self) { item in
NavigationLink(item, destination: DetailView(detailText: item), tag: item, selection: $selection)
}
.frame(minWidth: middleColumnMinWidth)
}
}
struct ContentView: View {
var body: some View {
NavigationView {
Sidebar()
Text("Select a Group")
.frame(minWidth: middleColumnMinWidth)
Text("Select an Item")
}
}
}
private let middleColumnMinWidth: CGFloat = 300