How to create List row seperate one another?

Question

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?

Answer 1

I think you're looking for .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()])
}

Answer 2

It's quite easy (I had to spend a lot of time learning). You can also adjust the fill, opacity, corner radius, and padding. Just add the following to the bottom of your list:

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

Answer 3

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