How to set a Limit for the the views inside a HStack?

Question

Good day, beginner SwiftUI & iOS developer here.

I'm not quite sure how else I could've worded this question, but I'll try my best to explain what I would like to achieve.

Right now, I have a VStack that contains a WebImage and Text view, and this VStack is nested inside a HStack. The views inside the VStack are inside a ForEach loop and are generated dynamically with the data I fetch.

When I display these on a screen, all of these views appear in a single line, as shown below.

However I would like for there to only be max two views per "line", not all four of them stacked into a single line. Is there a way to achieve this?

Here is the code:

        HStack(spacing: 20) {
        ForEach(attViewModel.students, id: \.self) { student in
            VStack {
                WebImage(url: URL(string: student.photo))
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 40, height: 40)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color("DarkGreen"), lineWidth: 3))
                    .compositingGroup()
                Text("\(student.name)")
                    .bold()
                    .compositingGroup()
                CustomRadioButton()
            }
            .padding()
            .overlay(RoundedRectangle(cornerRadius: 10)
                        .stroke(Color.orange, lineWidth: 2))
            .shadow(radius: 7)

        }
    }
    .frame(maxWidth: .infinity)

Answer 1

Here a possible approach for you:

struct ContentView: View {
    
    let arrayOfStudents: [String] = ["jessy", "joy", "joly", "jack"]
    
    var body: some View {

        GeometryReader { proxy in

            ScrollView(.horizontal) {
                
                HStack(spacing: .zero) {
                    
                    ForEach(arrayOfStudents, id: \.self) { student in
                        
                        VStack {
                            
                            Image(systemName: "person")
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .frame(width: 40, height: 40)
                                .padding()
                                .clipShape(Circle())
                                .overlay(Circle().stroke(Color.green, lineWidth: 3))

                            
                            Text(student)
                                .bold()
                                
                            
                            
                            Circle()
                                .strokeBorder(style: .init(lineWidth: 2))
                                .frame(width: 10, height: 10)
                            
                        }
                        .compositingGroup()
                        .padding()
                        .overlay(RoundedRectangle(cornerRadius: 10).stroke(Color.orange, lineWidth: 2))
                        .shadow(radius: 7)
                        .padding()
                        .frame(width: proxy.size.width/2.0)
                      

                          
                    }
                    
                }
                
            }
            .position(x: proxy.size.width/2.0, y: proxy.size.height/2.0)
            
        }

        
    }
    
}