ioslistswiftuiuikitrow

How to create List row seperate one another in SwiftUI


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)

enter image description here

but mine ended up like this: (I created the bg blue so that y'all can see the rows clearly)

enter image description here

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


Solution

  • 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.

    enter image description here

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