SwiftUI - 彩色列表项之间的空间

Question

我在NavigationView 中有一个 List 。 根据设计，它的每一行都有不同的颜色。 它们没有分隔线，而是每行之间有4 个点。 它们类似于此 HTML 代码片段中的行。

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

我需要在所有行上启用onDelete 。 也就是说，我想删除向左滑动手势上的行。

---

我已经尝试了很多。 我最接近的是在每个NavigationLink之间使用Spacer().deleteDisabled(true) 。 但是我不想要的行之间有超过4 个点的空间。

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

如何构建一个类似于我的 HTML 代码片段中的列表的列表？

Answer 1

这是相似的吗？

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

你绝对可以接近一个列表。 这个解决方案的删除视图看起来有点奇怪，但也许通过一些摆弄，也有办法解决这个问题。 首先，完全摆脱垫片。 然后，不要为listRowBackground参数使用纯色，而是创建一个自定义视图并使用它：

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

}

像这样实现它：

.listRowBackground(ListRowBackground())