SwiftUI：如何在 macOS 11 上设置工具栏的标题？

Question

我有一个 SwiftUI 应用程序，它有两列和一个工具栏。 我正在尝试模拟最新的 macOS 应用程序并以与 Mail 相同的方式使用工具栏，即 select 侧边栏项目并将其显示为 window 的标题。

这是我的代码：

import SwiftUI

var listItems = ["Item 1", "Item 2", "Item 3", "Item 4"]
var secondItems = ["Second 1", "Second 2", "Second 3", "Second 4"]

struct ContentView: View
{
    
    @State var select: String? = "Item 1"
    var body: some View
    {
        VStack
        {
            NavigationView
            {
                List
                {
                    ForEach((0..<listItems.count), id: \.self)
                    {index in
                        NavigationLink(destination: SecondView(), tag: listItems[index], selection: $select)
                        {
                            Text(listItems[index])
                                .padding(.vertical, 2.0)
                        }
                    }
                    Spacer()
                }.frame(width:160)
            }
            
            .toolbar
            {
                Text("this is not the title")
                Button(action: {})
                {
                    Label("Upload", systemImage: "square.and.arrow.up")
                }
            }
        }
    }
}

struct SecondView: View 
{
    var body: some View 
    {
        NavigationView 
        {
            List
            {
                ForEach((0..<secondItems.count), id: \.self)
                {index in
                    NavigationLink(destination: Text(secondItems[index]))
                    {
                        Text(secondItems[index])
                            .frame(height: 20)
                    }
                }
            }.frame(width:150)
        }
        
    }
}

所以我得到一个像这样的工具栏：

但是，当我 select 第一个列表中的项目时，如何在工具栏中设置 window 的标题？

Answer 1

这是我解决它的方法：

import SwiftUI

var listItems = ["Item 1", "Item 2", "Item 3", "Item 4"]
var secondItems = ["Second 1", "Second 2", "Second 3", "Second 4"]
struct ContentView: View
{
    
    @State var select: String? = "Item 1"
    var body: some View
    {
        VStack
        {
            NavigationView
            {
                List
                {
                    ForEach((0..<listItems.count), id: \.self)
                    {index in
                        NavigationLink(destination: SecondView(), tag: listItems[index], selection: $select)
                        {
                            Text(listItems[index])
                                .frame(height: 20)
                        }
                    }
                    Spacer()
                    
                }
                                .listStyle(SidebarListStyle())
            }
            
            .toolbar
            {
                Text("this is not the title")
                Button(action: {})
                {
                    Label("Upload", systemImage: "square.and.arrow.up")
                }
            }
            .navigationTitle(select!)
            .navigationSubtitle("\(listItems.count) records")
            .navigationViewStyle(DoubleColumnNavigationViewStyle())
        }
    }
}

struct SecondView: View {

    var body: some View {
        NavigationView {
            List
            {
                ForEach((0..<secondItems.count), id: \.self)
                {index in
                    NavigationLink(destination: Text(secondItems[index]))
                    {
                        Text(secondItems[index])
                            .frame(height: 20)
                    }
                }
            }
        }
    }
}

Answer 2

HStack(spacing: 0) {
    ToolView()
    Divider()
    PanelView()
}
.frame(width: 290)
.toolbar(id: "id") {
    ToolbarItem(id: "sidbar", placement: .primaryAction) {
        Button {
            
        } label: {
            Label {
                Text("Stack")
            } icon: {
                Image("stack")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 20, height: 20)
                    .offset(y: 10)
            }
        }
    }
}

使用 id 创建ToolbarItem ，您可以通过右键单击工具栏来显示标题。 使用Button显示内容，标签和图像将适合工具栏。

注意：如果您有多个工具栏，请确保为每个工具栏提供一个id ，否则您仍然无法显示标题。 最好使用SF Symbols ，但如果您使用自定义字体，请确保调整其大小并进行偏移。

Answer 3

如果您试图更改当前设置为“工具栏”的文本，您需要设置导航标题。 这是通过.navigationTitle(String)和.navigationSubtitle(String)完成的。