How to create 2 in row titles in SwiftUI?

Question

I'm trying to achieve a 2 in row tiles in my SwiftUI app but I cannot.

The tiles are 1 in a row and they are underneath each other.

This is my current code:

ScrollView(.vertical){
        
        VStack(){
                      
                    VStack(alignment: .trailing, spacing: 6) {
                          Image("flower")
                                   .resizable()
                                   .frame(width: 160, height: 200)
                                   .clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
                                      
                       
                        Text("2/2/2021")
                                   .background(Color.white.opacity(0.2))
                                   .font(.caption)
                
                        
                        Text("Some Info goes here because it can...")
                                  .font(.callout)
                                  .frame(width: 160)
                    
                
                                }.onTapGesture {
                                           // Handle the action when the card is touched
                                }

                    VStack(alignment: .trailing, spacing: 6) {
                          Image("flower")
                                   .resizable()
                                   .frame(width: 160, height: 200)
                                   .clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
                                      

                        Text("2/2/2021")
                                    .background(Color.white.opacity(0.2))
                                    .font(.caption)
                
                        
                        Text("Some Info goes here because it can...")
                                    .font(.callout)
                                    .frame(width: 160)
                    
                
                                }.onTapGesture {
                                           // Handle the action when the card is touched
                                 }
            
        }
 
        }

This is what I'm trying to achieve:

But this is what I have so far with my code:

Could someone please shed a light on this?

@sheldor, I tried that but the HStack will put ALL the tiles next to each other. I only want 2 in a row. — drago, May 17 '21 at 11:54
If every tile is created individually then two HStacks inside the VStack? — sheldor, May 17 '21 at 11:57
check this link, you should find your answer-: https://www.appcoda.com/learnswiftui/swiftui-gridlayout.html — Tushar Sharma, May 17 '21 at 12:00
VStack with 2 HStack and each HStack contains the inner VStack from your code above. Or try working with a grid as mentioned — Joakim Danielson, May 17 '21 at 12:06
Does this your answer: https://stackoverflow.com/a/65890000/14733292 — Raja Kishan, May 17 '21 at 12:22

score 2 · Accepted Answer · answered May 17 '21 at 13:42

It's pretty easy with LazyVGrid, specify the number of columns you want to display and add the views

struct TestView : View {
    
    var body : some View {
        let gridItems = [GridItem(.flexible()), GridItem(.flexible())]
        ScrollView {
            LazyVGrid(columns: gridItems, content: {
                ForEach(0..<20) { i in
                    ZStack {
                        RoundedRectangle(cornerRadius: 12)
                            .fill(Color.red)
                            .frame(width: 160, height: 200)
                        Text("\(i)")
                            .foregroundColor(.white)
                            .font(.largeTitle)
                    }
                }
            }).padding()
        }
    }
}

Timmy · Answer 2 · 2022-06-03T08:37:41.577

I have created a Pure SwiftUI Collection View:

struct CollectionView<Content: View>: View {
    var arrayCount: Int
    let content: (_ index: Int) -> Content
    var body: some View {
        ScrollView {
            VStack(spacing: 20) {
                ForEach(0..<getDimesion().0) { index in
                    HStack {
                        Spacer()
                        ForEach(index * 2..<(index * 2) + 2) { index2 in
                            content(index2)
                            Spacer()
                        }
                    }
                }
                if getDimesion().1 {
                    HStack {
                        Spacer()
                        content(arrayCount - 1)
                        Spacer()
                        content(arrayCount - 1)
                            .hidden()
                        Spacer()
                    }
                }
                Spacer()
            }
        }
    }
    func getDimesion() -> (Int, Bool) {
        var toReturn = (0, false)
        if arrayCount.isMultiple(of: 2) {
            toReturn = (arrayCount / 2, false)
        }else {
            toReturn = ((arrayCount - 1) / 2, true)
        }
        return toReturn
    }
}

Usage:

CollectionView(arrayCount: array.count) { index in
    Image("Jupiter")
         .resizable()
         .frame(width: 160, height: 200)
         .clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
}

Unfortunately, it doesn't work with Identifiable yet!

How to create 2 in row titles in SwiftUI?

2 Answers2