Search code examples
swiftuitextalignment

Swift - Why is text in middle of screen with a Spacer() added?

Full Screen Shot

Why is this text in the middle of the screen? There is a Spacer() at the very bottom.

import SwiftUI
struct AboutMyTestAppView: View {
var body: some View {
    VStack {    
        HStack {
            Image(systemName: "quote.bubble")
                .padding(.leading, 24)
            Text("Edition")
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.leading, 10)         
            Text("Professional")
                .fontWeight(.semibold)
                .frame(maxWidth: .infinity, alignment: .trailing)
                .padding(.trailing, 24)
        }   
    }
    .navigationBarBackButtonHidden(false)
    .navigationTitle("About My Test App")
    .navigationBarTitleDisplayMode(.inline)
    .navigationBarColor(backgroundColor: .gray, titleColor: .white)
    Spacer()
  } 
}
Solution

  • With your current setup the VStack and Spacer seem to be related more like a Master/Detail View since they exist at the same level an you likely have a NavigationView as their parent.

    https://developer.apple.com/documentation/swiftui/navigationview

    You can either make the Spacer a child of the VStack

    import SwiftUI
struct AboutMyTestAppView: View {
var body: some View {
    VStack {    
        HStack {
            Image(systemName: "quote.bubble")
                .padding(.leading, 24)
            Text("Edition")
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.leading, 10)         
            Text("Professional")
                .fontWeight(.semibold)
                .frame(maxWidth: .infinity, alignment: .trailing)
                .padding(.trailing, 24)
        }  
        Spacer() 
    }
    .navigationBarBackButtonHidden(false)
    .navigationTitle("About My Test App")
    .navigationBarTitleDisplayMode(.inline)
    .navigationBarColor(backgroundColor: .gray, titleColor: .white)

  } 
}

    Or create a parent VStack/Master

    import SwiftUI
struct AboutMyTestAppView: View {
var body: some View {
    VStack{
     VStack {    
            HStack {
                Image(systemName: "quote.bubble")
                    .padding(.leading, 24)
                Text("Edition")
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(.leading, 10)         
                Text("Professional")
                    .fontWeight(.semibold)
                    .frame(maxWidth: .infinity, alignment: .trailing)
                    .padding(.trailing, 24)
            }   
        }
        .navigationBarBackButtonHidden(false)
        .navigationTitle("About My Test App")
        .navigationBarTitleDisplayMode(.inline)
        .navigationBarColor(backgroundColor: .gray, titleColor: .white)
        Spacer()
    }
  } 
}