SwiftUI: How to set the title for the toolbar on macOS 11?

Question

I have a SwiftUI app that has two columns and a toolbar. I'm trying to emulate the latest macOS applications and use the toolbar in the same way that Mail does, i.e. select a sidebar item and show that as the title of the window.

Here is my code:

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

So I get a toolbar like this:

but how do I set the title of the window in the toolbar when I select an item in the first list?

Answer 1

Here is how I solved it:

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

If you are attempting to change the text that is currently set to "toolbar", you want to set the navigation title. This is done via .navigationTitle(String) and .navigationSubtitle(String).

Answer 3

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

Use id to create ToolbarItem and you can show the title with right click on the toolbar. Use Button to show the content, and the label and image will fit the toolbar.

NOTE: if you have multiple toolbars, make sure to provide each one with an id, or you still won't be able to show the title. It is best to use SF Symbols, but if you use a custom font, make sure to resize it, and offset it.