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

Answer 1

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