2

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

Petesta
  • 1,623
  • 3
  • 19
  • 29
  • You'll need a `VStack` outside the list and rectangle – aheze May 18 '21 at 19:50
  • But it would be hard to make the list have an auto-height – aheze May 18 '21 at 19:50
  • @aheze it's not that I want the list to have an auto-height, it's more that I don't want that gap to exist between the row and the rectangle. Even after embedding the above code into a VStack and specifying `spacing: 0`, the result was still the same. – Petesta May 18 '21 at 19:52
  • Does this answer your question https://stackoverflow.com/a/62057285/12299030? – Asperi May 19 '21 at 04:28

0 Answers0