How to remove bottom default padding from List view in SwiftUI

981 views Asked by At

I'm trying to remove the bottom padding on a List view when another view is being defined after it so that the List view is sitting on top of the other one. Not overlaying. There seems to be some extra space created from the List and I'm not sure how to remove that to achieve what I want. Here's what I have.

List {
    ForEach(0...2, id: \.self) { color in
        Text("\(color)")
    }.listRowInsets(EdgeInsets())
}

Rectangle().fill(Color.red)

Here's what that looks like. You can see that there is a gap between row 2 and the red rectangle. What I'd like is for the boundaries of those two views to be adjacent to each other.

layout

EDIT: I've tried embedding the code in a VStack but that doesn't remove the white gap we see below.

Looking at this answer, it seems like wrapping the list in a VStack would remove the gap but it’s not from what we can see here?

VStack(spacing: 0) {
    VStack(spacing: 0) {
        List {
            ForEach(0...0, id: \.self) { number in
                Text("1")
                    .listRowBackground(Color.blue)
                Text("2")
            }.listRowBackground(Color.gray)
        }
    }

    VStack(spacing: 0) {
        HStack(spacing: 0) {
            Rectangle()
                .fill(Color.red)
            Rectangle()
                .fill(Color.red)
        }
        HStack(spacing: 0) {
            Rectangle()
                .fill(Color.red)
            Rectangle()
                .fill(Color.red)
        }
    }
    .aspectRatio(1.0, contentMode: .fill)

    VStack {
        List {
            Text("1")
                .listRowBackground(Color.purple)
            Text("2")
                .listRowBackground(Color.pink)
            Text("3")
                .listRowBackground(Color.blue)
            Text("4")
                .listRowBackground(Color.orange)
        }
    }
}

enter image description here

I've tried multiple variations of VStacks with spacing equals 0 and haven't found how to remove that gap that's created by the List view. If there are more rows added, it begins to fill up but I'm trying to just have two rows with no white gap sit above the red rectangle.

We can see the List view highlighted below includes that gap.

enter image description here

0

There are 0 answers