CODEWITHSUNDEEP
swiftuivstack
tosi
tosi

Reputation: 877

SwiftUI: How to remove margin between views in VStack?

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

Upvotes: 73

Views: 44282

Answers (4)

Abdul Mannan Asif
Abdul Mannan Asif

Reputation: 41

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

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

Upvotes: 4

Mojtaba Hosseini
Mojtaba Hosseini

Reputation: 119128

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.

Upvotes: 8

BollMose
BollMose

Reputation: 3498

I use this,

.padding(.top, -8)

More detail here,

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

Upvotes: 13

rob mayoff
rob mayoff

Reputation: 385500

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
}

Upvotes: 159

Related Questions