Order my array content into grid [SwiftUI]

Question

I need to display the content of my Array into a grid (so a mix of HStack and VStack). I've found this ressource : https://www.hackingwithswift.com/quick-start/swiftui/how-to-position-views-in-a-grid

And this work straight forward if you need to display static content (in the exemple a Text and an Image).

But now, I need to be able to do the same display but with the content of an Array (with no size limit, the array could have 3 or 10 items)

So need to transform my actual code :

ForEach(myarray.indices, id: \.self) { index in
    myView(Value: myitem[index].value, Type: myitem[index].type)
}

So that it can be wrapped into a grid list.

It must be simple but I'm new to SwiftUI and I don't know how to do it, I tried to tweak the code found in the link but no chance...

Any ideas ? Thank you !

Answer 1

struct ContentView: View {

    let myArray = [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9]
    ]

    var body: some View {

        VStack {
            ForEach(myArray, id: \.self) { row in
                HStack {
                    ForEach(row, id: \.self) { number in
                        Text(String(number))
                    }
                }
            }
        }
    }
}

This is an array arranged into a simple grid.

Answer 2

import SwiftUI

struct GridStack<Content: View>: View {
    let rows: Int
    let columns: Int
    let content: (Int, Int) -> Content
    @State private var currentPosition: CGSize = .zero
    @State private var oldPosition: CGSize = .zero
    @State private var newPosition: CGSize = .zero
    @State private var buttonBackColor:Color = .white
    @State private var bgColorDict = [  0: "neutral", 1: "neutral", 2: "neutral", 3: "neutral", 4: "neutral",
                                 5: "neutral", 6: "neutral", 7: "neutral", 8: "neutral", 9: "neutral",
                                10: "neutral", 11: "neutral", 12: "neutral", 13: "neutral", 14: "neutral",
                                15: "neutral", 16: "neutral", 17: "neutral", 18: "neutral", 19: "neutral",
                                20: "neutral", 21: "neutral", 22: "neutral", 23: "neutral", 24: "neutral",
                                25: "neutral", 26: "neutral", 27: "neutral", 28: "neutral", 29: "neutral",
                                30: "neutral", 31: "neutral", 32: "neutral", 33: "neutral", 34: "neutral",
                                35: "neutral", 36: "neutral", 37: "neutral", 38: "neutral", 39: "neutral",
                                40: "neutral", 41: "neutral", 42: "neutral", 43: "neutral", 44: "neutral",
                                45: "neutral", 46: "neutral", 47: "neutral", 48: "neutral", 49: "neutral",
                                50: "neutral", 51: "neutral", 52: "neutral", 53: "neutral", 54: "neutral",
                                55: "neutral", 56: "neutral", 57: "neutral", 58: "neutral", 59: "neutral",
                                60: "neutral", 61: "neutral", 62: "neutral", 63: "neutral", 64: "neutral",
                                65: "neutral", 66: "neutral", 67: "neutral", 68: "neutral", 69: "neutral",
                                70: "neutral", 71: "neutral", 72: "neutral", 73: "neutral", 74: "neutral",
                                75: "neutral", 76: "neutral", 77: "neutral", 78: "neutral", 79: "neutral",
                                80: "neutral", 81: "neutral", 82: "neutral", 83: "neutral", 84: "neutral",
                                85: "neutral", 86: "neutral", 87: "neutral", 88: "neutral", 89: "neutral",
                                90: "neutral", 91: "neutral", 92: "neutral", 93: "neutral", 94: "neutral",
                                95: "neutral", 96: "neutral", 97: "neutral", 98: "neutral", 99: "neutral"
                              ]
    let theSheet = ["t","r","c","g","T","M","B","G","s","v",
                    "N","U","e","p","A","D","f","C","H","a",
                    "y","P","F","d","b","r","j","n","I","x",
                    "i","m","S","O","o","u","E","L","h","k",
                    "N","j","r","b","x","e","u","A","H","o",
                    "p","S","L","n","k","M","U","s","g","P",
                    "i","m","T","D","a","f","I","B","h","v",
                    "E","G","d","y","R","F","t","c","C","O",
                    "o","r","m","k","h","v","t","p","c","e",
                    "g","d","b","s","i","f","a","u","n","y",]

    var body: some View {
        VStack {
            ForEach(0 ..< 1, id: \.self) { row in
                HStack(spacing: 0) {
                    ForEach(0 ..< 1, id: \.self) { column in
                        Text(self.theSheet[(10 * row) +  column])
                            .font(.custom("Rockwell",size:24))
                            .frame(width: 30, height: 30, alignment: .center)
                            .padding()
                            .onTapGesture {
                                if (self.bgColorDict[(row*10) + column] == "neutral") {
                                    self.bgColorDict[(row*10) + column] = "correct"
                                } else if self.bgColorDict[(row*10) + column] == "correct" {
                                    self.bgColorDict[(row*10) + column] = "wrong"
                                } else {
                                    self.bgColorDict[(row*10) + column] = "neutral"
                                }
                            }
                            .background(Color(String(self.bgColorDict[(row*10) + column] ?? "neutral"))).border(Color.gray)
                    }
                }
            }
        }
    }