SwiftUI macOS Xcode样式工具栏 [英] SwiftUI macOS Xcode Style Toolbar

问题描述

我想在macOS应用程序中使用SwiftUI重新创建类似于Apples Notes App的工具栏(我正在使用Xcode 12.3和macOS 11.1):

I like to recreate a toolbar similar to Apples Notes App using SwiftUI in a macOS app (I am using Xcode 12.3 and macOS 11.1):

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

My attempt was to use a Navigation View to get the Master/Detail setup (for now I do not need a third panel like the original Notes App has). I am interested in how to get the appearance right, e.g. background color and behavior of the buttons in the toolbar. I tried out some approaches, the best I came up with for the moment is this for the main file:

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)
}

会产生如下结果:

现在我的问题是:如何更改工具栏左右部分的颜色?我也有工具栏的行为问题.当增加主面板的大小时，工具栏右侧的按钮会尽早消失，尽管还有很多空间:

Now my question is: How can I alter the color of the left and right parts of the toolbar? I also have problems with the behavior of the toolbar. When the master panel's size is increased, the buttons of the right part of the toolbar are disappearing very early although there is a lot of space left:

我该怎么做才能防止这种情况?

What do I have to do to prevent it?

推荐答案

好吧，我发现了一个可行的技巧:

Okay, I found a trick that works:

1. 将场景的 windowStyle 设置为 HiddenTitleBarWindowStyle ，这会隐藏标题并删除白色背景:

1. Set the scene's windowStyle to HiddenTitleBarWindowStyle, which both hides the title and removes the white background:

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

(请注意，我不再将场景名称设置为空字符串，因为不再需要它，而且它也使"Window"菜单中的窗口名称弄乱了)

(Note that I don't set the scene name to an empty string, as that's no longer needed and it messed up the window name in the "Window" menu too)

1. 要在工具栏和详细信息视图内容之间使用分隔符，请拉伸详细信息内容以填充整个空间，并在其后放置一个 Divider :

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

那似乎做到了！

这篇关于SwiftUI macOS Xcode样式工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！