SwiftUI generates unwanted space around an Image

Question

The following code produces a simple VStack with Text views that show no spacing in-between them (rows 1 & 2).

However, adding an image to the 3rd row (green) adds unwanted spacing above and below the entire row.

struct ContentView: View {
  var body: some View {
    VStack {
      HStack {
        Text("one thing")
      }.background(Color(.yellow))
      HStack {
        Text("nothing")
      }.background(Color(.red))
      HStack {
        Text("three")
        Image(systemName: "star")
          .resizable()
          .frame(width: 8, height: 8)
      }.background(Color(.green))
      HStack {
        Text("three things")
      }.background(Color(.red))
    }
  }
}

How can I avoid the additional unwanted space?

The space shows independent of image size (even with an image just a few pixels in dimension).

And, of course, I'd like to know why the space is generated.

Thanks for any help

Screenshot of above code:

score 9 · Accepted Answer · answered Dec 23 '19 at 02:16

You may adjust the spacing of VStack:

var body: some View {
            VStack (spacing: 0) {
                 HStack {
                   Text("one thing")
                 }.background(Color(.yellow))
                 HStack {
                   Text("nothing")
                 }.background(Color(.red))
                 HStack {
                   Text("three")
                   Image(systemName: "star")
                     .resizable()
                     .frame(width: 8, height: 8)
                 }.background(Color(.green))
                 HStack {
                   Text("three things")
                 }.background(Color(.red))
               }
             }

Duh, yeah. Works perfectly. Still would like to know why the spacing is increased by adding an image... — nine stones, Dec 24 '19 at 17:51
this took too long to find thank you for the help. my image was inside 3 VStacks, and weirdly enough it was the middle VStack’s spacing that I had to set to 0 to fix this. — Chris McElroy, Aug 23 '20 at 07:12

SwiftUI generates unwanted space around an Image

1 Answers1

Linked