SwiftUI mysterious spacing between large Text and TextField in VStack

user_2719660 0
Viewed 800

I'm having trouble figuring out why there's some spacing below my text. 

struct testView: View {

    @State private var notes = ""
    var body: some View {
        VStack {
            Text("Larg Text").font(.system(size: 70))
            .background(Color.red)

            TextField("Add a note", text: $notes)
            .background(Color.red)

            Spacer()
        }
        .background(Color.yellow)
    }
}

enter image description here

For some reason, there's this mysterious space between Text and TextField. This space seems to decrease if I

  • Decrease the font size
  • Do not specify a font size
  • Don't use a TextField after Text view
  • Don't use a Text view before TextField

In other words, this font size–dependent spacing seems to only happen between Text and TextField. I'm utterly confused. I'd like to get rid of this space.

Appreciate your help!

swiftui swift
1 Answers

It is default automatic spacing. The solution is to specify explicitly

VStack(spacing: 0) {     // << here !!
    Text("Larg Text").font(.system(size: 70))
    .background(Color.red)

    TextField("Add a note", text: $notes)
    .background(Color.red)

    Spacer()
}
user_122990300
Related