0

I am trying to get both the leading toolbar item and the principal toolbar item to align by their bottom edges. I tried using spacers to push to bottom of their space. I put borders around the items for visual purposes. Looks like the leading toolbar item has a smaller height than the principal toolbar item even though there are these spacers in there that are supposed to fill in the empty space to push the items to the bottom of their div. What am I missing in my logic?

I want the bottom edge of "Log Out" to align with the bottom edge of "My App".

Screenshot

import SwiftUI

struct ContentView: View {
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
    var body: some View {
        NavigationStack {
            VStack {
                Text("Hello")
            }
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button(action: {
                        self.presentationMode.wrappedValue.dismiss()
                        }) {
                            VStack {
                                Spacer()
                                Text("Log Out")
                                    .foregroundColor(.white)
                            }
                        }.border(.yellow)
                }
                ToolbarItem(placement: .principal) {
                    VStack {
                        Spacer()
                        Text("Prompt")
                            .font(.system(size: 12))
                            .accessibilityAddTraits(.isHeader)
                            .foregroundColor(.white)
                            .border(.green)

                        Text("My App")
                            .font(.body.bold())
                            .accessibilityAddTraits(.isHeader)
                            .foregroundColor(.white)
                    }.border(.yellow)
                    
                }
            }
            .toolbarBackground(Color(red: 0/255.0, green: 20/255.0, blue: 129/255.0), for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
            .navigationBarBackButtonHidden(true)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
Adam
  • 2,070
  • 1
  • 14
  • 18

0 Answers0