SwiftUI - Space between colored list items

Question

I have a List in NavigationView . As per the design, each of its rows has a different color. They do not have seperator line, but instead there is a 4 points between each of the rows. They are similar to the rows in this HTML code snippet.

 .max-w-414px { max-width: 414px !important; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="container max-w-414px mt-5"> <div class="row"> <div class="col-12 pr-0 mb-2 bg-primary rounded d-flex justify-content-end"> <div class="bg-danger py-3 px-4 rounded text-light">Delete</div> </div> <div class="col-12 py-4 mb-2 bg-primary rounded"></div> <div class="col-12 py-4 mb-2 bg-primary rounded"></div> <div class="col-12 py-4 mb-2 bg-primary rounded"></div> <div class="col-12 py-4 mb-2 bg-primary rounded"></div> <div class="col-12 py-4 mb-2 bg-primary rounded"></div> <div class="col-12 py-4 mb-2 bg-primary rounded"></div> <div class="col-12 py-4 mb-2 bg-primary rounded"></div> <div class="col-12 py-4 mb-2 bg-primary rounded"></div> <div class="col-12 py-4 mb-2 bg-primary rounded"></div> </div> </div>

I need to have onDelete enabled on all of the rows. That is to say, I want to delete rows on Swipe-left gesture.

---

I have tried a lot. The closest that I have come to is to use a Spacer().deleteDisabled(true) between Each NavigationLink . But there is more than 4 points space between the rows that I do not want.

struct ListView: View {
    var body: some View {
        NavigationView {
            List {
                ForEach(0..<20) { index in
                    NavigationLink(destination: TaskView()) {
                        Text("List")
                    }
                    .listRowBackground(Color.green)
                    Spacer(minLength:1)
                        .deleteDisabled(true)
                }
                .onDelete(perform: { indexSet in
                    
                })
            }
            .padding(.horizontal)
            .environment(\.defaultMinListRowHeight, 50)
        }
    }
}

struct ListView_Previews: PreviewProvider {
    static var previews: some View {
        ListView()
    }
}

How to build a List similar to the list in my HTML code snippet?

Answer 1

is this similar?

struct ListView: View {
    var body: some View {
        
        NavigationView {
            List {
                ForEach(0..<20) { index in
                    
                        NavigationLink(destination: TaskView()) {
                            Text("List")
                                .padding(.horizontal)
                        }
                        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
                        .listRowInsets(EdgeInsets(top: 2, leading: 10, bottom: 2, trailing: 10))
                        .background(Color.blue)
                        .cornerRadius(4.0)
                }
                .onDelete(perform: { indexSet in
                    
                })
            }
            .environment(\.defaultMinListRowHeight, 50)
           
        }
    }
}

Answer 2

You can definitely get close with a List. The delete view looks a little weird with this solution, but maybe with some fiddling there's a way to fix that, too. First, get rid of the spacer entirely. Then, instead of using a solid color for your listRowBackground parameter, create a custom view and use it:

struct ListRowBackground: View {
var body: some View {
    ZStack {
        Color.white
        Color.blue
            .cornerRadius(8)
            .padding(.vertical, 4)
    }
}

}

Implement it like this:

.listRowBackground(ListRowBackground())