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

Question

Created Nov ’22

Replies 1

Boosts 0

Participants 2

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!


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

Capture d’écran 2022-11-28 à 5.43.46 PM.png

I would like to get something like this :

Capture d’écran 2022-11-28 à 5.57.01 PM.png

Boost

Answer 1

BabyJ OP

Nov ’22

This kind of layout is a horizontal flow layout, because the rows flow on to the next when they run out of space horizontally.

You could start by having a look online for some example code: I know there is one from Apple buried in a sample project. I would also recommend looking into the new Layout protocol introduced in iOS 16 which would help immensely and also make the layout reusable.

0