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:
Want two columns like this:




