SwiftUI macOS Xcode 风格工具栏

Question

我喜欢在 macOS 应用程序中使用 SwiftUI 重新创建类似于 Apple Notes 应用程序的工具栏（我使用的是 Xcode 12.3 和 macOS 11.1）：

我的尝试是使用导航视图来获取主/详细信息设置（目前我不需要像原始 Notes 应用程序那样的第三个面板）。我对如何获得正确的外观感兴趣，例如工具栏中按钮的背景颜色和行为。我尝试了一些方法，目前我想到的最好的方法是主文件：

import SwiftUI

@main
struct App_Without_Name_in_Window_Top_AreaApp: App {
    var body: some Scene {
        WindowGroup("") { // <-- The ("") will remove the app name in the toolbar
            ContentView()
        }
        .windowToolbarStyle(UnifiedCompactWindowToolbarStyle())
    }
}

对于内容视图：

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Master")
                .frame(minWidth: 200, maxWidth: 300, minHeight: 300, alignment: .leading)
                .padding()
                .toolbar {
                    ToolbarItem(placement: .status) {
                        Button(action: {
                            myToggleSidebar()
                        }) {
                            Image(systemName: "sidebar.left")
                        }
                    }
                }
                .presentedWindowToolbarStyle(ExpandedWindowToolbarStyle())
            
            
            Text("Detail")
                .frame(minWidth: 200, alignment: .center)
                .toolbar {
                    ToolbarItem(placement: .navigation) {
                        Button(action: {
                            print("Button pressed")
                        }) {
                            Image(systemName: "bold.italic.underline")
                        }
                    }
                    
                    ToolbarItem(placement: .navigation) {
                        Button(action: {
                            print("Button pressed")
                        }) {
                            Image(systemName: "lock")
                        }
                    }
                }
        }
        .frame(minWidth: 500, minHeight: 300)
    }
}

func myToggleSidebar() {
    NSApp.keyWindow?.firstResponder?.tryToPerform(#selector(NSSplitViewController.toggleSidebar(_:)), with: nil)
}

产生这样的结果：

现在我的问题是：如何改变工具栏左右部分的颜色？我对工具栏的行为也有疑问。当主面板尺寸增大时，工具栏右侧部分的按钮很早就消失了，尽管还留有很多空间：

我必须做什么来预防它？

Answer 1

好吧，我发现了一个有效的技巧：

1. 将场景的

   windowStyle

   设置为

   HiddenTitleBarWindowStyle

   ，既隐藏标题又删除白色背景：

WindowGroup {
    ContentView()
}
.windowToolbarStyle(UnifiedCompactWindowToolbarStyle())
.windowStyle(HiddenTitleBarWindowStyle())

（请注意，我没有将场景名称设置为空字符串，因为不再需要它，并且它也弄乱了“窗口”菜单中的窗口名称）

2. 要在工具栏和详细视图内容之间强制设置分隔线，请拉伸详细内容以填充整个空间，并在其后面放置一个

   Divider

   ：

Text("Detail")
    .frame(minWidth: 200, maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
    .background(VStack {
        Divider()
        Spacer()
    })
    .toolbar { ...

看来可以了！

Answer 2

你想要的就是使用

.windowToolbarStyle(UnifiedWindowToolbarStyle(showsTitle: false))

因为当用户点击应用程序时它保留了正确的行为

使用

.windowToolbarStyle(UnifiedCompactWindowToolbarStyle())
.windowStyle(HiddenTitleBarWindowStyle())

当用户打开新选项卡时，由于工具栏的颜色而导致奇怪的行为。

Answer 3

试试这个：

    internal func setupToolbar() {
    let toolbar = NSToolbar(identifier: UUID().uuidString)
    toolbar.delegate = self
    toolbar.displayMode = .labelOnly
    toolbar.showsBaselineSeparator = false
    toolbar.allowsUserCustomization = true
    toolbar.autosavesConfiguration = true
    toolbar.sizeMode = .small
    toolbar.allowsExtensionItems = true
    if #available(macOS 15.0, *) {
        toolbar.allowsDisplayModeCustomization = true
    } else {
            // Fallback on earlier versions
    }
    window?.titleVisibility = toolbarCollapsed ? .visible : .hidden
    window?.toolbarStyle = .unifiedCompact
    window?.titlebarSeparatorStyle = .automatic
    window?.toolbar = toolbar
}