Space between views in SwiftUI

Question

As you can see, there is a strange white space between my VStack (the blue area) and ZStack views (the gray area). I don't understand why and I want to get rid of it. I expected that it has something to do with spacing.

the problem on iphone 14 canvas

Here is my code:

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            TabView(selection: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Selection@*/.constant(1)/*@END_MENU_TOKEN@*/) {
                VStack {
                        VStack(spacing: 0) {
                            Text("Remaining Budget")
                            Text("Rp 1.000.000")
                                .font(.title)
                                .padding(7)
                            Text("February 2023")
                            HStack() {
                                VStack(alignment: .leading) {
                                    Text("Budget")
                                    Text("Rp 1.500.000")
                                }
                                Spacer()
                                VStack(alignment: .leading) {
                                    Text("Expense")
                                    Text("Rp 1.500.000")
                                }
                            }
                            .padding(.top)
                            .font(.system(size: 14, weight: .bold))
                        }
                        .padding([.top, .leading, .trailing, .bottom])
                        .background(Rectangle()
                            .fill(.blue.gradient)
                            .ignoresSafeArea(edges: [.top, .bottom]))
                        .foregroundColor(.white)
                        .font(.custom("Avenir-Heavy", size: 20))
                    ZStack {
                        Color(.secondarySystemBackground)
                    }
                }.tabItem {
                    Label("Home", systemImage: "house.fill")
                }.tag(1)
                Text("Tab Content 2").tabItem { Label("Category", systemImage: "square.split.2x2.fill")
                }.tag(2)
                Text("Tab Content 2").tabItem {
                    Image(systemName: "plus.square")
                        .scaledToFit()
                }.tag(3)
                Text("Tab Content 2").tabItem { Label("Charts", systemImage: "chart.bar.fill")
                }.tag(4)
                Text("Tab Content 2").tabItem { Label("Settings", systemImage: "gearshape.fill")
                }.tag(5)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

I've tried changing the spacing parameter like VStack(spacing: 0) but it won't work.

score 3 · Answer 1 · answered Mar 09 '23 at 08:09

3

VStacks have a default spacing of 8. You can write VStack(spacing: 0) {} if you don't want any

answered Mar 09 '23 at 08:09

Oscar Berggren

81
7

where did you find that it is 8? – grandsirr Mar 09 '23 at 09:06
I believe all paddings are 8 by default. If you just write .padding(.top) it will also be 8. I think I saw it in a youtube video a long time ago – Oscar Berggren Mar 09 '23 at 09:23
I asked that because i looked at the official doc digged into the swift code, and was not able to find it – grandsirr Mar 09 '23 at 09:27
Actually, there seems to be no default padding but it's calculated based on platform/phone etc https://stackoverflow.com/questions/65368402/what-is-the-default-value-of-the-padding-modifier-in-swift – Oscar Berggren Mar 09 '23 at 10:00

score 0 · Answer 2 · answered Mar 09 '23 at 09:20

The whitespace is coming from the spacing on the second VStack. Set this to spacing: 0 as well. The spacing is added after elements in the VStack. By changing the 3rd you are only affecting what is in that blue area, not after it.

 var body: some View {
    VStack {
        TabView {
            VStack(spacing: 0) { //  Set to 0. Here is where the spacing is being added.
                    VStack(spacing: 0) {
                        Text("Remaining Budget")
                        Text("Rp 1.000.000")
                            .font(.title)
                            .padding(7)

Space between views in SwiftUI

2 Answers2