SwiftUI: How to remove margin between views in VStack?

42
votes

Using SwiftUI, I created a VStack, which contains some fixed elements and a list element. The reason is, that the user should only scroll the area under the fixed elements. Now I see a space between the second fixed element and the list. I don't know where this space is coming from and want to get rid of it, but have no idea, how. The area is marked in red.

struct DashboardView : View, CoreDataInjected {

    var body: some View {
        GeometryReader { geometry in
            VStack {
                ScopeSelectorView().frame(maxWidth: .infinity).background(ColorPalette.gray)
                BalanceNumberView().frame(maxWidth: .infinity)
                List {
                    DashboardNavigationView(
                        height: geometry.size.height - ScopeSelectorView.height - BalanceNumberView.height
                    ).frame(maxWidth: .infinity).listRowInsets(.zero)
                }
            }
        }.background(Color.red).edgesIgnoringSafeArea(.all)
    }
}

Screenshot of view

3
swiftuivstack

3 Answers

97
votes

Since you didn't pass a spacing argument to VStack, it is picking a default spacing based on context. If you want no spacing, pass 0 explicitly.

VStack(spacing: 0) {
    // content here
}
6
votes

Separately

You can use offset modifier on any view to make it looks different for each content separately:

VStack {
    Circle()
    Circle().offset(x: 0, y: -20)
    Circle().offset(x: 0, y: 40)
}

Note that it could be negative in both directions.

All at once

Also VStack and HStack have an argument called spacing and you can set it to 0 or any other number you need to apply it to all elements.

VStack(spacing: 0) {
    Circle()
    Circle()
}

Note that is could be negative if needed.

5
votes

I use this,

.padding(.top, -8)

More detail here,

VStack(spacing: 0) {
   List { ...
   }
   VStack{ ... }.padding(.top, -8)
}