-3

I am trying to create a very simple SwiftUI view where I show an image with some text right below it. However, whenever I add a custom image from Assets(system images look fine), there is a little bit of extra space between the image and the text. See the red color between the text and the image. What am I missing here? enter image description here

import SwiftUI

struct CardTest: View {
    var body: some View {
        VStack() {
            Image("launcher")
            Text("Title")
            .background(Color.blue)
        }
        .background(Color.red)
        
    }
}

struct CardTest_Previews: PreviewProvider {
    static var previews: some View {
        CardTest()
    }
}
HangarRash
  • 7,314
  • 5
  • 5
  • 32
Cameron Henige
  • 368
  • 2
  • 17
  • 1
    Does this answer your question? [SwiftUI: How to remove margin between views in VStack?](https://stackoverflow.com/questions/58018633/swiftui-how-to-remove-margin-between-views-in-vstack) – lazarevzubov Mar 24 '23 at 06:13

1 Answers1

-3

It is weird that system images work find without doing anything, but adding spacing: 0 fixes this issue.


import SwiftUI

struct CardTest: View {
    var body: some View {
        VStack(spacing: 0) {
            Image("launcher")
            Text("Title")
            .background(Color.blue)
        }
        .background(Color.red)
        
    }
}

struct CardTest_Previews: PreviewProvider {
    static var previews: some View {
        CardTest()
    }
}
Cameron Henige
  • 368
  • 2
  • 17
  • 2
    It's not weird, it's a known feature of stack views in SwiftUI: It adds default padding depending on the type of the element. See https://developer.apple.com/documentation/swiftui/vstack/init(alignment:spacing:content:): "spacing – The distance between adjacent subviews, or nil if you want the stack to choose a default distance for each pair of subviews." – lazarevzubov Mar 24 '23 at 06:12