How to center a text in the second row with respect to an image in the row below in SwiftUI?

user_3973801 0
Viewed 37

In the screenshot below, the purple image is not aligned horizontally with the globe symbol. I'm trying to center the navigation title with respect to the logo above it which I can totally do with a VStack. However I don't know how to align the logo itself with the navigation trailing item (globe in the screenshot). Any tips? ideas? tutorials? thank you!

struct ContentView: View {
var body: some View {
    NavigationView {
        Text("Hello")
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button {} label: {Image(systemName: "globe")}
                }
                
                ToolbarItemGroup(placement: .principal) {
                    VStack {
                        Image("image")
                            .resizable()
                            .frame(width: 64.0, height: 24.0)
                        Text("Navigation Title")
                    }
                }
            }
    }
    .navigationBarTitleDisplayMode(.inline)
}

}

enter image description here

swiftui
1 Answers

Just do same for leading toolbar item (because items are independent and one alignment does not affect other - only size of bar)

Tested with Xcode 13.4 / iOS 15.5

*borders are for better visibility

demo

Text("Hello")
    .toolbar {
        ToolbarItem(placement: .navigationBarLeading) {
            VStack(alignment: .leading) {
            Button {} label: {Image(systemName: "globe")}
                    .frame(height: 24.0)
                Text("X").foregroundColor(.clear)
                }.border(.red)
        }

        ToolbarItemGroup(placement: .principal) {
            VStack {
                Image("picture")
                    .resizable()
                    .frame(width: 64.0, height: 24.0)
                Text("Navigation Title")
            }.border(.green)
        }
    }
user_122990300
Related