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

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

score 2 · Accepted Answer · edited Aug 23 '22 at 14:42

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.

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

1 Answers1