How to set up SwiftUI toolbar to display in the center of the view

Question

I am experimenting with SwiftUI ToolbarItem in various positions in my view, such as in bottomBar and navigation. I am wondering if it is possible to center the ToolBarItem vertically in the view, as opposed to the top or bottom. When setting up the placement for ToolBarItem, I am not seeing a placement property for centering. Any idea how this ToolBarItem could be centered in the view?

Here is my code for the ToolBarItem, currently set to .bottomBar:

struct ContentView: View {
    @State private var cityName = ""
        
    var body: some View {
        NavigationView {
            VStack() {
                //some content
            }.navigationTitle("Weather")
            .toolbar {
                ToolbarItem(placement: .bottomBar) {
                    HStack {
                        TextField("Enter City Name", text: $cityName)
                            .frame(minWidth: 100, idealWidth: 150, maxWidth: 240, minHeight: 30, idealHeight: 40, maxHeight: 50, alignment: .leading)
                        Spacer()
                        Button(action: {
                            // some action
                        }) {
                            HStack {
                                Image(systemName: "plus")
                                    .font(.title)
                            }
                            .padding(15)
                            .foregroundColor(.white)
                            .background(Color.green)
                            .cornerRadius(40)
                        }
                    }
                }
            }
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Why do you want to center the system toolbar vertically? It's a system component meant to be used and displayed at the bottom of the screen. If you want something in the center of the screen, you shouldn't be using a toolbar... — Sam Spencer, Mar 01 '23 at 17:08

workingdog support Ukraine · Answer 1 · 2021-11-14T08:08:00.007

Try this approach for placing your toolbar elements in the middle of the ContentView.

It should look exactly like the .toolbar {...} you have, and it functions exactly as you expect. The main difference with this approach is that you can put the toolbar anywhere you like. You can also use GeometryReader for very fine placement in your view.

struct ContentView: View {
    @State private var cityName = ""
    
    var toolbar: some View {
        HStack {
            Spacer()
            TextField("Enter City Name", text: $cityName)
                .frame(minWidth: 100, idealWidth: 110, maxWidth: 140, minHeight: 30, idealHeight: 40, maxHeight: 50, alignment: .leading)
            Spacer()
            Button(action: {}) {
                Image(systemName: "plus").font(.title)
                .padding(15)
                .foregroundColor(.white)
                .background(Color.green)
                .cornerRadius(40)
            }
            Spacer()
        }
    }
    
    var body: some View {
        NavigationView {
            VStack {
                Spacer()
                toolbar
                Spacer()
            }.navigationTitle("Weather")
        }
    }
}

How to set up SwiftUI toolbar to display in the center of the view

1 Answers1