Why does adding a frame() to an image add padding in between the image and it's sibling?

Question

Why does adding a frame() to an image add padding in between the image and it's sibling? E.g. why is there padding underneath the A, but not the B, in this example? Thank you!

struct ContentView: View {
    var body: some View {
        VStack {
            Text("A")
                .border(Color.red, width:1)
            Image(systemName: "globe")
                .frame(minHeight:50)
                .border(Color.black, width:1)
        }
        .border(Color.green, width:1)
        VStack {
            Text("B")
                .border(Color.red, width:1)
            Image(systemName: "globe")
                .border(Color.black, width:1)
        }
        .border(Color.green, width:1)

    }
}

Sweeper · Accepted Answer · 2023-07-26 02:48:05Z

1

I think this is because symbol images are treated like text by SwiftUI. Each symbol is a "glyph".

Layout out

VStack {
    Text("A")
    Image(systemName: "globe")
}

is a bit like laying out two lines of text (though not literally two lines, because lineSpacing doesn't have an effect on this). Because these are all text, the VStack tries to make it look like one whole "text block", and doesn't add extra space between them. That is how text is supposed to flow.

Once you add a frame, the VStack doesn't see them as the same text block anymore, and adds the default spacing it normally adds between views. You can see this in effect when you add non-symbol images, or other non-text views:

// this also adds default spacing
VStack {
    Text("A")
    Rectangle().fill(.red)
}

// this too!
VStack {
    Text("A")
    Image("some non-symbol image")
}

You can remove the default spacing by setting spacing: 0.

answered Jul 26, 2023 at 2:48

Sweeper

291k23 gold badges260 silver badges437 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Cashew Over a year ago

Thank you! I accepted your answer. May I ask if you know where there is documentation that explains this behavior? I don't think it's included in the VStack, Text or Image documentation.

Sweeper Over a year ago

@JohnCashew the initialiser documentation says “or nil if you want the stack to choose a default distance for each pair of subviews” for the spacing parameter. There is also this discussion.

Collectives™ on Stack Overflow

Why does adding a frame() to an image add padding in between the image and it's sibling?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related