三列布局的 SwiftUI macOS 工具栏图标对齐方式

Question

根据这个问题，如何在 swiftUI 生命周期中为三列视图添加工具栏分隔符，我有一个稍微不同的问题。我正在尝试实现相同的目的，但第二列和第三列包含在一个视图中，该视图又添加到第一列旁边的 NavigationView 中，即边栏。

代码示例

import SwiftUI

@main
struct ThreeColumnsAppApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .frame(minWidth: 900, maxWidth: .infinity, minHeight: 600, maxHeight: .infinity)
        }
        .windowStyle(DefaultWindowStyle())
        .windowToolbarStyle(UnifiedWindowToolbarStyle(showsTitle: true))
    }
}

struct ContentView: View {
    var body: some View {
        
        NavigationView {
            Sidebar()
                .toolbar { Button(action: {}, label: { Image(systemName: "sidebar.left") }) }
            MainContentView()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

struct Sidebar: View {
    
    var body: some View {
        List {
            Text("Menu 1")
            Text("Menu 2")
            Text("Menu 3")
            Text("Menu 4")
        }
        .frame(minWidth: 250)
        .listStyle(SidebarListStyle())
    }
}

struct MainContentView: View {
    
    var body: some View {
        
        NavigationView {
            ListItemView()
            DetailView()
        }
        .navigationTitle("Items List")
        .navigationSubtitle("5 items found")
    }
}

struct ListItemView: View {
    
    var body: some View {
        
        List {
            Text("List item 1")
            Text("List item 2")
            Text("List item 3")
            Text("List item 4")
            Text("List item 5")
        }
        .frame(minWidth: 250)
        .listStyle(InsetListStyle())
        .toolbar {
            Button(action: {}, label: { Image(systemName: "arrow.up.arrow.down.square") })
        }
    }
}

struct DetailView: View {
    
    var body: some View {
        Text("Detail of list 1")
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .toolbar {
                Button(action: {}, label: { Image(systemName: "plus") })
                Button(action: {}, label: { Image(systemName: "minus") })
                Button(action: {}, label: { Image(systemName: "pencil") })
            }
    }
}

输出

如下图所示，应该位于第二列工具栏上的箭头图标与详细视图的工具栏图标一起被推到右侧。 NavigationView 似乎将 ListItemView 和 DetailView 工具栏视为一个单独的工具栏。

期望输出

问题

所以，我的问题是如何让工具栏图标与其视图对齐？

Answer 1

为了正确执行此操作，您需要在视图的三列中的每一列上有一个 ToolbarItem。例如，这个：

struct TripleNavView: View {
    
    var body: some View {
        NavigationView {
            
            Text("Column 1")
                .toolbar {
                    ToolbarItem {
                        Button(action: {}, label: {Image(systemName: "sidebar.left")})
                    }
                }
            Text("Column 2")
                .toolbar {
                    ToolbarItem {
                        Button(action: {}, label: {Image(systemName: "plus")})
                    }
                }
            Text("Column 3")
                .toolbar {
                    ToolbarItem {
                        Button(action: {}, label: {Image(systemName: "trash")})
                    }
                }
        }
        .navigationTitle("Title")
    }
}

产生这个：

重要的是 第 2 列和第 3 列 都需要有某种 ToolbarItem。如果您只在其中一列上放置一个按钮，那么 SwiftUI 会将它一直放置在工具栏的后缘，并破坏外观。

因此，如果您不想在特定列上使用按钮，请用 Spacer 代替按钮。

请注意，将其留空或使用 EmptyView() 将不起作用 - SwiftUI 将对其进行优化，并且就像您一开始就没有包含 ToolbarItem 一样！

三列布局的 SwiftUI macOS 工具栏图标对齐方式

SwiftUI macOS toolbar icons alignment for three column layout

macos

toolbar

swiftui

swiftui-navigationview