CODEWITHSUNDEEP
iosswiftuimkmapview
alex
alex

Reputation: 127

SwiftUI simple question following Apple's guide

I just started to follow Apple's SwiftUI course on there site named creating and combining views.

And I noticed a strange behaviour I cant understand in the code there showing in the ContentView struct, here is the code and an image of the result.

struct ContentView: View {
var body: some View {
    VStack {
        MapView()
            .edgesIgnoringSafeArea(.top)
            .frame(height: 300)
        
        CircleImage()
            .offset(y : -130)
            .padding(.bottom, -130)

        VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            HStack {
                Text("Joshua Tree National Park")
                    .font(.subheadline)
                Spacer()
                Text("California")
                    .font(.subheadline)
            }
        }
        .padding()
        
        Spacer()
    }
}

}

enter image description here

Noting special here, but when changing the order of the modifiers for the MapView to.

        MapView()
            .frame(height: 300)
            .edgesIgnoringSafeArea(.top)

The center of the circleView is not in the bottom of the mapView anymore, see image.

enter image description here

I noticed that this will not happen when I remove the Spacer() in the bottom,

So, what really happens here ? why the order of the modifiers matters ? and how the Spacer() effect other views in that way?

Thanks for the help.

Upvotes: 1

Views: 57

Answers (1)

ibrahimyilmaz
ibrahimyilmaz

Reputation: 2335

Why modifier order matters.

Because you're creating a frame without ignoring the safe area on your second code.

Also when you add spacer your bottom sheet just becomes higher. So it looks good but it's not effective at all.

In this case, it's better you put your circular image and bottom content in the same container. So it will be always centered. For example:

VStack {
    CircleImage()
        .offset(y : -130)
        .padding(.bottom, -130)
    
    VStack(alignment: .leading) {
        Text("Turtle Rock")
            .font(.title)
        HStack {
            Text("Joshua Tree National Park")
                .font(.subheadline)
            Spacer()
            Text("California")
                .font(.subheadline)
        }
    }
    .padding()
    
    Spacer()
}

Upvotes: 1

Related Questions