Dynamic structuring of HStacks

Does anyone have any ides to help me? I am a beginner with SwiftUI. I have several buttons arranged horizontally in an HStack and these are generated with a ForEach loop from an array. So the number of buttons in the HStack varies. My problem is that the buttons get so compressed if there are more than three or four that you can’t read the text on them. I need some way to drop some of the buttons to a next horizontal line.

The top green buttons are in a VStack and the bottom red buttons are in an HStack. The green and red buttons are each generated from different arrays. I want to fit them all on one screen one group on top the other.

Please offer any thoughts to help, Thanks

There’s no easy or built-in way to do it (you have to measure the screen, measure each button, figure out when to wrap, etc.), but just by chance, this dropped today:

SwiftUI Tag View - Chips View - Tag List View - Custom Grid Stacks - Xcode 13 - SwiftUI Tutorials - YouTube

Also, check out this article:

Flexible layouts in SwiftUI | FIVE STARS

Maybe one of these could help.

Another suggestion: Instead of placing the buttons in an HStack, try using a LazyVGrid. Whether that would work for you would depend on if you’re cool with the buttons beings arranged in columns or if you’re wanting more like what is seen in the two links above.

Thank, i found some code that counts the space and length of each button