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