swiftui - 如何为 HStack 中的视图设置限制？

Question

美好的一天，这里是 SwiftUI 和 iOS 开发者的初学者。

我不太确定我还能如何措辞这个问题，但我会尽力解释我想要达到的目标。

现在，我有一个包含 WebImage 和 Text 视图的 VStack，并且这个 VStack 嵌套在 HStack 中。VStack 中的视图位于 ForEach 循环中，并使用我获取的数据动态生成。

当我在屏幕上显示这些视图时，所有这些视图都显示在一行中，如下所示。

但是，我希望每条“线”最多只能有两个视图，而不是所有四个视图都堆叠成一行。有没有办法做到这一点？

这是代码：

        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

这里为您提供一种可能的方法：

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)
            
        }

        
    }
    
}