SwiftUI: How to remove margin between views in VStack?

Question

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)
    }
}

score 135 · Accepted Answer · answered Sep 19 '19 at 21:27

135

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
}

answered Sep 19 '19 at 21:27

rob mayoff

375,296
67
796
848

1

VStack(spacing: -120) { // content here }. negative numbers can be used too. Try changing -120 to best look. – araferna May 09 '20 at 15:31
2

Even I add 'spacing: 0' the space is still there. – BollMose Nov 27 '20 at 03:13
1

@BollMose maybe your subviews are defining a space above or below? – ScottyBlades Apr 11 '21 at 00:09

BollMose · Answer 2 · 2020-11-28T13:44:39.693

10

I use this,

.padding(.top, -8)

More detail here,

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

edited Nov 28 '20 at 13:44

answered Nov 27 '20 at 03:12

BollMose

3,002
4
32
41

1

Thank you for this code snippet, which might provide some limited, immediate help. A [proper explanation](https://meta.stackexchange.com/q/114762/349538) would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please [edit] your answer to add some explanation, including the assumptions you've made. – wscourge Nov 27 '20 at 07:27

score 8 · Answer 3 · edited Nov 17 '21 at 17:21

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.

score 0 · Answer 4 · answered Aug 18 '23 at 23:42

0

You have to pass a Spacing Argument in V Stack for example...

VStack(spacing: 0) {
    Text("list one")
        .padding()
    Text("list one")
        .padding()
}

answered Aug 18 '23 at 23:42

Abdul Mannan Asif

1

SwiftUI: How to remove margin between views in VStack?

4 Answers4

Separately

All at once

Linked

Related