如何阻止 swiftui 在 HStack 中将内容移出屏幕？

Question

我希望 SF 图像自动转到下一行。我知道 HStack 会将内容保持在同一行，但是我无法想出一个解决方案来防止它离开屏幕。我也尝试过使用几何阅读器，但这也不起作用。 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

在下面的演示中使用 LazyVGrid

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

对此没有本机内置功能。我在SwiftUI HStack with wrap and dynamic height 中提供的类似问题的解决方案，它也可以适应这个任务。