Search code examples
swiftlayoutswiftui

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


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.sstatic.net/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))
            }
        }
    }
}

Solution

  • SwiftUI 2.0

    Use LazyVGrid as in demo below

    demo

    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.