如何创建彼此分开的列表行？

Question

我正在尝试创建这样的部分，其中每一行都与另一行分开。有点像背景彼此不连接的部分。看一下图片：（图片来自dribbble）

但是我的结果是这样的： （我创建了背景蓝色，以便大家可以清楚地看到行）

这是我的代码：

import SwiftUI

struct ProductPageView: View {
    
    init() {
            UITableView.appearance().backgroundColor = .clear // Uses UIColor
        }
    
    var body: some View {
        NavigationView {
            ZStack {
                Color.blue.edgesIgnoringSafeArea(.all)
                VStack {
                    List {
                        ForEach(arrayProduct, id: \.name) { dataProduct in
                            ProductListCell(item: dataProduct)
                        }
                        .listRowInsets(EdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10))
                    }
                    .listStyle(InsetGroupedListStyle())
                }
            }
            .navigationTitle("Produk")
        }
    }
}

我用过

listRowInsets

，但它只是拉伸它。 如何在行之间创建分隔？

Answer 1

我没有尝试像素完美的再现，因为我没有资源，但以下概述了实现此目的的一种方法。

代码中的注释解释了一些关键部分：

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            ZStack {
                Color.blue.edgesIgnoringSafeArea(.all)
                VStack {
                    // This handles the display of the
                    // section header
                    HStack {
                        // The text & spacer are grouped
                        // so that you can pad accordingly
                        Text("Stuff")
                        Spacer()
                    }
                    .padding(.bottom, 2)
                    .padding(.leading, 10)
                    // A VStack contains your list of items
                    VStack {
                        ForEach(0...3, id: \.self) { element in
                            // Each grouping (a product for you)
                            // will exist within this top level
                            // HStack
                            HStack {
                                // A new HStack (or another view of
                                // your choice) will contain the views
                                // that compose your product entry
                                HStack {
                                    Text("\(element)")
                                    Spacer()
                                }
                                .padding() // Provides some buffer around the product
                                .background(Color.white)
                                .contentShape(Rectangle()) // For tapping
                                .cornerRadius(5.0)// Rounding!
                            }
                            // Custom padding can tailor your spacing needs
                            .padding([.top, .bottom], 2)
                            .padding([.trailing, .leading], 10)
                        }
                    }
                    Spacer()
                }
            }
            .navigationTitle("Produk")
        }
    }
}

Answer 2

这很简单（我花了很多时间学习）。您还可以调整填充、不透明度、角半径和填充。只需将以下内容添加到列表底部即可：

List {
...
}
.listRowBackground(
    Rectangle()
         .fill(Color(.white).opacity(0.35))
         .cornerRadius(10.0)
         .padding(4))

Answer 3

我想你正在寻找

.listRowSpacing()

import SwiftUI

struct LessonsListView: View {
    var lessons: [Lesson]
    
    var body: some View {
        List(lessons, id: \.self) { lesson in
            Text(lesson.title)
        }
        .listRowSpacing(8.0)
    }
}

struct Lesson {
    public let title: String
    public let imageUrl: String
    public let contentUrl: String
    
    public static func sample() -> Lesson {
        Lesson(title: "Sample", imageUrl: "https://1.bp.blogspot.com/-z5l5dld_EbI/XqwLu-fyW4I/AAAAAAAAApg/axV9j0Q4RKsvNyUVoh8E5RDpxxafbuwegCLcBGAsYHQ/s1600/MayMeme.jpg", contentUrl: "https://stackoverflow.com")
    }
}

extension Lesson: Hashable {
    
}

#Preview {
    LessonsListView(lessons: [Lesson.sample(), Lesson.sample()])
}