Question

我在 NavigationView 中有一个列表。根据设计，其每一行都有不同的颜色。他们没有分隔线，但是每行之间有 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())

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

如何构建与我的HTML代码段中的列表相似的列表？

2 个答案: