How can I add a more rows of buttons in my frame when my hstack is too long in Swift UI?

Question

I would like to make the second row appear when my list is too long.

Do you have any idea how to do that?

Thank you in advance!

import SwiftUI

struct ContentView: View {
   @StateObject var vm = SpeakingVM()
   var speakingModel: SpeakingModel
   var body: some View {
       
       HStack(spacing:20){
           ForEach(speakingModel.sentence.indices) { index  in
               Button(action: {
               }, label: {
                   Text(speakingModel.sentence[index].definition)
                       .padding(.vertical,10)
                       .padding(.horizontal)
                       .background(Capsule().stroke(Color.blue))
                       .lineLimit(1)

               })

                   }

}.frame(width: UIScreen.main.bounds.width - 30, height: UIScreen.main.bounds.height / 3)
   }
   }

struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
       ContentView(speakingModel:  SpeakingModel(sentence: [SpeakingModel.Word(definition: "Météo"),SpeakingModel.Word(definition: "Cheval"),SpeakingModel.Word(definition: "Ascenceur")], sentenceInFrench: "Quel temps fait-il ?"))
   }
}

What i would like :

Answer 1

Put your data in tags and customize the item view and change it appropriately.

import SwiftUI

struct HashTagView: View {
    @State var tags: [String] = ["#Lorem", "#Ipsum", "#dolor", "#consectetur", "#adipiscing", "#elit", "#Nam", "#semper", "#sit", "#amet", "#ut", "#eleifend", "#Cras"]

    @State private var totalHeight = CGFloat.zero

    var body: some View {
        VStack {
            GeometryReader { geometry in
                self.generateContent(in: geometry)
            }
        }
        .frame(height: totalHeight)
    }

    private func generateContent(in g: GeometryProxy) -> some View {
        var width = CGFloat.zero
        var height = CGFloat.zero

        return ZStack(alignment: .topLeading) {
            ForEach(self.tags, id: \.self) { tag in
                self.item(for: tag)
                    .padding([.horizontal, .vertical], 4)
                    .alignmentGuide(.leading, computeValue: { d in
                        if (abs(width - d.width) > g.size.width)
                        {
                            width = 0
                            height -= d.height
                        }
                        let result = width
                        if tag == self.tags.last! {
                            width = 0 //last item
                        } else {
                            width -= d.width
                        }
                        return result
                    })
                    .alignmentGuide(.top, computeValue: {d in
                        let result = height
                        if tag == self.tags.last! {
                            height = 0 // last item
                        }
                        return result
                    })
            }
        }.background(viewHeightReader($totalHeight))
    }

    private func item(for text: String) -> some View {
        Text(text)
            .padding(.all, 5)
            .font(.body)
            .background(Color.blue)
            .foregroundColor(Color.white)
            .cornerRadius(5)
    }

    private func viewHeightReader(_ binding: Binding<CGFloat>) -> some View {
        return GeometryReader { geometry -> Color in
            let rect = geometry.frame(in: .local)
            DispatchQueue.main.async {
                binding.wrappedValue = rect.size.height
            }
            return .clear
        }
    }
}

struct HashTagView_Previews: PreviewProvider {
    static var previews: some View {
        HashTagView()
    }
}