How to create List row seperate one another in SwiftUI

user_11195057 0
Viewed 1013

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

swiftui row uikit list ios
1 Answers

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