SwiftUI Wrapping HStack with Images

Question

I am trying to make a HStack which contains x number of images and will display them in a wrapping HStack manner (i.e if only 4 of the 7 images fit on the line, then spill the 3 remaining over onto the next line).

I am trying to use the library WrappingHStack (https://github.com/dkk/WrappingHStack) but the result isn't as expected, the images are not wrapping around.

Here is my code:

    @State var numEarths : Int = 7;
    var body: some View {
        VStack{
        
            Text("If everyone were to live like you, we would need \(numEarths) Earths").font(.title)
            WrappingHStack{
                ForEach(0 ..< numEarths){_ in
                Image("logo")
                
                }
             }
         }
    }

Here is the result on the simulator (see, no wrapping)...we should see 7 Earth logo images but you can only see 4 (and a tiny bit of number 5). screenshot of image

Please can someone help me fix this issue? I am new to SwiftUI dev so please go lightly on me if this is a silly mistake. Thanks.

Answer 1

According to the WrappingHStack library, if you want to achieve what you above-mentioned, you need to do two things:

• Give your Image a frame so that the WrappingHStack can know how many elements to put in per line.
• Change your ForEach loop to WrappingHStack, because WrappingHStack can be used as a ForEach to loop over items.

WrappingHStack(0..<numEarths, id:\.self) { _ in
    Image("logo")
        .resizable()
        .frame(width: 100, height: 100)
}