SwiftUI macOS Xcode 风格工具栏

Question

SwiftUI macOS Xcode 风格工具栏

7

我想使用SwiftUI在macOS应用程序中重新创建一个与苹果Notes应用程序类似的工具栏（我正在使用Xcode 12.3和macOS 11.1）：

我的尝试是使用NavigationView来获取主/细节设置（目前我不需要像原始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)
}

这将产生以下结果：

现在我的问题是：我如何更改工具栏左、右两侧的颜色？我还遇到了工具栏的行为问题。当主面板的尺寸增大时，尽管还有很多空间，但右侧工具栏的按钮会很早就消失：

我应该怎么做才能防止这种情况发生？

- DaPhil

2个回答

8

您需要做的是使用

.windowToolbarStyle(UnifiedWindowToolbarStyle(showsTitle: false))

因为它在用户通过标签切换应用程序时保留了正确的行为。

使用

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

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

- JuJoDi

1

你测试过侧边栏了吗？将工具栏样式设置为UnifiedWindowToolbarStyle(showsTitle: false)仍然会在详细视图侧的工具栏中显示白色背景，这正是@DaPhil试图避免的。如果你像我在答案中建议的那样，在工具栏下方放置一个分隔符，那么选项卡对我来说看起来还不错。 - Adam

是的，我已经测试过了，就像你描述的那样。根据我的阅读，他们要求背景颜色和工具栏类似于苹果笔记应用程序，右侧为“白色”，左侧为NSMaterialEffects.Material.sidebar。 - JuJoDi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adam · Accepted Answer

好的，我找到了一个可行的技巧：

将场景的 windowStyle 设置为 HiddenTitleBarWindowStyle，这会同时隐藏标题和移除白色背景：

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

请注意，我不会将场景名称设置为空字符串，因为这不再需要，并且还会使“窗口”菜单中的窗口名称混乱。

要在工具栏和详细视图内容之间强制插入分隔符，请将详细内容拉伸以填充整个空间，并在其后放置一个 Divider：

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

看起来就这样了！