How to create List row seperate one another in SwiftUI - ios

Question

I'm new in SwiftUI
I'm trying to create my section like this, where each row is separated with another. Kinda like section where the background is not connected one another. take a look at the pict: (picture from dribbble)
but mine ended up like this:
(I created the bg blue so that y'all can see the rows clearly)
here's my code:
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")
}
}
}
I've used listRowInsets but it's just stretch it.
How do I create that separation between rows?
Any help will be appreciated.
Thank you

Answer 1

I did not attempt a pixel perfect reproduction since I don't have the assets, but the following outlines one way you can accomplish this.
Comments are in the code to explain some of the key pieces:
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")
}
}
}