工具栏垫片在 3 面板设计中不起作用

Question

我有一个 3 面板 SwiftUI macOS 应用程序（运行 macOS Monterey Beta 9、Xcode 13 Beta 5），我正在向窗口添加工具栏项。

其中一些工具栏项目之间有Spacer，但我得到了这种奇怪的行为： 在侧边栏的工具栏区域，两个按钮之间有一个Spacer，但似乎不起作用。而在详细信息面板中，Spacer 只是半工作状态。

这里是示例代码：

var body: some View {
    NavigationView {
        Text("Sidebar")
            .frame(minWidth: 200)
            .toolbar {
                Button(action: {}) { Image(systemName: "sidebar.left") }
                Spacer() // Comment out this line, and detail panel works fine
                Button(action: {}) { Image(systemName: "play.fill") }
            }
        Text("Middle")
            .frame(minWidth: 200)
            .toolbar {
                Button(action: {}) { Image(systemName: "trash") }
            }
            .navigationTitle("Test")
        Text("Detail")
            .frame(minWidth: 200)
            .toolbar {
                Button(action: {}) { Image(systemName: "scribble") }
                Spacer() // Comment out this line, and sidebar panel works fine
                Button(action: {}) { Image(systemName: "ellipsis.circle") }
            }
    }
}

奇怪的是，从侧边栏中删除Spacer 似乎可以解决详细信息面板上的问题。这也可以反过来工作，因此从详细信息面板中删除 Spacer 会修复侧边栏。

这是预期的行为（我编辑了图像）：

这可能是什么问题？

Answer 1

你可以试试这样的：

struct ContentView : View {
    
    var body: some View {
        NavigationView {
            Text("Sidebar").frame(minWidth: 200)
                .toolbar {
                    ToolbarItemGroup (placement: .principal) {
                        HStack {
                            Button(action: {}) { Image(systemName: "sidebar.left") }
                            Spacer()
                            Button(action: {}) { Image(systemName: "play.fill") }
                        }
                    }
                }
            Text("Middle").frame(minWidth: 200)
                .toolbar {
                   ToolbarItemGroup (placement: .principal) {
                    HStack {
                        Text("Test").bold()
                        Spacer()
                        Button(action: {}) { Image(systemName: "trash") }
                    }
                   }
                }
            Text("Detail").frame(minWidth: 200)
                .toolbar {
                    ToolbarItemGroup (placement: .principal) {
                        HStack {
                            Button(action: {}) { Image(systemName: "scribble") }
                            Spacer()
                            Button(action: {}) { Image(systemName: "ellipsis.circle") }
                        }
                    }
                }
        }
    }
}