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