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

【问题标题】：SwiftUI - Space between colored list itemsSwiftUI - 彩色列表项之间的空间
【发布时间】：2020-11-10 10:11:02
【问题描述】：

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

.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 代码 sn-p 中的列表的列表？

【问题讨论】：

@Omid 我不想有分隔线。我想在每行之间有 4 个点的空间。它应该看起来像列表？你运行过代码sn-p吗？
你试过 Spacer().frame(height:4)
@SimonePistecchia 是的。它没有效果。
仅获取 HTML 中的视图，您不能在删除时使用。您必须使用滑动手势制作另一个自定义单元格。

标签： ios swiftui swiftui-list

【解决方案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)
           
        }
    }
}

【讨论】：

【解决方案2】：

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

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

}

这样实现：

.listRowBackground(ListRowBackground())

【讨论】：