将切换侧边栏按钮放置在侧边栏工具栏上

Question

我有一个三列布局的 macOS 应用程序，第一列是侧边栏。我有一个按钮可以切换，使用户能够隐藏边栏。

在 Xcode 和其他 macOS 上，切换侧边栏按钮位于侧边栏顶部的工具栏上，当侧边栏隐藏时成为主工具栏的一部分。

例如，在 Xcode 上打开边栏：

当你隐藏侧边栏时：

我已将带有切换侧边栏的工具栏添加到包含我的侧边栏的视图，并将另一个工具栏添加到第二列，但切换侧边栏仍然出现在主工具栏上，在第二列的顶部。

我错过了什么吗？这是代码：

    // sidebar view, first of three columns
    struct ContentView: View {
       @State var selection: Set<Int> = [0]
       var body: some View {
          NavigationView {
              List(selection: self.$selection) {
                    NavigationLink(destination: AllData()) {
                        Label("All Data", systemImage: "note.text")
                    }
                    .tag(0)
                    Label("Trash", systemImage: "trash")
                }
                .listStyle(SidebarListStyle())
                .toolbar {
                    ToolbarItem(placement: .navigation) {
                        Button(action: toggleSidebar, label: {
                                Image(systemName: "sidebar.left") }).help("Toggle Sidebar")
                    }
                }
          }
       }
       func toggleSidebar() {
            NSApp.keyWindow?.firstResponder?.tryToPerform(#selector(NSSplitViewController.toggleSidebar(_:)), with: nil)
        }
    }

// second column view, with the rest of the toolbar
struct AllData: View {
   var body: some View {
       NavigationView {
           List(filteredData) {
                // list items here.
           }
           .toolbar {
             ToolbarItem(placement: .automatic) {
                Button("Press Me") {
                    print("Pressed")
                }
             }
             ToolbarItem(placement: .automatic) {
                Button("Press Me too") {
                    print("Pressed too")
                }
             }
         }
       }           
   }
}

Answer 1

试试这个：

 ToolbarItem(placement: .primaryAction) {

Answer 2

如果您在边栏上使用 .frame 修饰符，那么您可以设置最小宽度、理想宽度和最大宽度的约束。

我发现 minWidth: 148 确保侧边栏不会折叠到 SwiftUI 将工具栏按钮移到导航工具栏的后缘和双人字形扩展器后面（需要单击）的程度。

因此您的代码可能如下所示...

    ...
    var body: some View {
        NavigationView {
            List(selection: self.$selection) {
                NavigationLink(destination: AllData()) {
                    Label("All Data", systemImage: "note.text")
                }
                .tag(0)
                Label("Trash", systemImage: "trash")
            }
            .listStyle(.sidebar) //<-- from iOS 14 and macOS 10.15
            .frame(minWidth: 148, idealWidth: 160, maxWidth: 192, maxHeight: .infinity)
            .toolbar {
                ToolbarItem(placement: .primaryAction) {
                    Button(action: {
                        toggleSidebar
                    }, label: {
                        Image(systemName: "sidebar.left") 
                    })
                    .help("Toggle Sidebar")
                }
            }
      }
   }
   ...

PS。我注意到 .primaryAction 和 .status 修饰符都将侧边栏按钮放在相似的位置，尽管我没有对此进行彻底测试或完成任何研究。

将切换侧边栏按钮放置在侧边栏工具栏上

Placing the toggle sidebar button on the sidebar toolbar

macos

swiftui