How to stop swiftui from moving content off screen in HStack? - swift

Question

I want the SF Images to automatically go to the next line. I understand that HStack would keep content on the same line but, I am not able to come up with a solution on preventing it from going off screen. I have also tried using geometry reader but that also doesn't work.
https://i.stack.imgur.com/nLUzb.png
struct SplitTextView: View {
static let input = "B, LB, Y, RT, A, X, B, Right, X, LB, LB, LB"
let letters = input.components(separatedBy: ", ")
var body: some View {
GeometryReader { geo in
HStack (spacing: 10) {
ForEach(0..<self.letters.count) { index in
ButtonGeneratorView(buttonKey: self.letters[index])
}
}.frame(width: geo.size.width/2)
}
}
}
struct ButtonGeneratorView: View {
let buttonKey: String
let color: [String : Color] = ["Y" : Color.yellow,
"B" : Color.red,
"A" : Color.green,
"X" : Color.blue
]
var body: some View {
VStack {
if buttonKey.count == 1 {
Image(systemName: "\(buttonKey.lowercased()).circle.fill")
.font(.system(size: 32))
.foregroundColor(color["\(buttonKey)"])
}
else {
Image(systemName: "questionmark.circle.fill")//SF images for unknown
.font(.system(size: 32))
}
}
}
}

Answer 1

SwiftUI 2.0
Use LazyVGrid as in demo below
struct SplitTextView: View {
static let input = "B, LB, Y, RT, A, X, B, Right, X, LB, LB, LB"
let letters = input.components(separatedBy: ", ")
let layout = [
GridItem(.adaptive(minimum:32), spacing: 10)
]
var body: some View {
LazyVGrid(columns: layout, spacing: 10){
ForEach(0..<self.letters.count) { index in
ButtonGeneratorView(buttonKey: self.letters[index])
}
}
}
}
SwiftUI 1.0
There is no native built-in feature for this. The solution for similar problem I provided in SwiftUI HStack with wrap and dynamic height, and it can be adapted for this task as well.