如何在 SwiftUI 中創建彼此分開的列表行

Question

我是 SwiftUI 的新手

我正在嘗試像這樣創建我的部分，其中每一行都彼此分隔。 有點像背景沒有相互連接的部分。 看圖：（圖片來自dribbble）

但我的結果是這樣的：（我創建了 bg blue 以便你們都可以清楚地看到行）

這是我的代碼：

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