ios – Card setting into two columns SwiftUI


I am trying to set card view vertically into two columns.
I have created two views – One is Product Main Catalog and second is for Catalog Details (which is the card).

I tried to call Catalog Details from Product Main Catalog according to data. I need to display card/cell in two columns but its not showing.

CardView

 var body: some View {
        VStack {
            VStack(spacing: 20) {
                Image("Image2")
                    .resizable()
                    .scaledToFit()**
                VStack {
                    Text("Product 1")
                        .font(.body)
                        .fontWeight(.bold)
                        .lineLimit(2)
                        .multilineTextAlignment(.center)
                }
                
            }
            .frame(minWidth: 176, maxWidth: 176, minHeight: 176, maxHeight: 176)**
            .padding(10)
            .background(Color(red: 200/255, green: 200/255, blue: 230/255))
            .cornerRadius(10)
        }
    }

Main – I am calling CardView here

var body: some View {
        VStack {
            HeaderView()
            HStack {
                ForEach(viewModel.products, id: \.productCode) { cat in
                    HStack {
                        CardView(type: .mediumProductCardView(viewModel: ProductCatalogViewModel(product: cat)))
                    }
                    .frame(maxWidth: .infinity)
                }
            }
        }
    }
}

struct HeaderView: View {
    var body: some View {
        HStack {
            VStack(alignment: .center, spacing: 5){
                Text("Products")
                    .font(.system(.largeTitle, design:.rounded))
                    .fontWeight(.black)
                Text("The quest for a balanced life")
                    .font(.title2)
            }
            //Spacer()
        }
    }
}

Current Result:

currently show like this

Want two columns like this:

Actual

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img