I'm working on a project for a class that requires building a grid. I found some really good tutorials on Grids in swiftui, including from here that really helped, but I need to be able to update the size of the grid based on a selection in a dropdown. What i've not been able to find is how to change the size of the grid. So for example, with this grid:

struct ContentView: View {

//sets the size of the grid
    @State private var gridSize = 5

var body: some View {
        Grid (horizontalSpacing: 0, verticalSpacing: 0){
            ForEach(0..<gridSize) { row in
                GridRow {
                    ForEach(0..<gridSize) {col in
                        if (row + col).isMultiple(of: 2) {
                            Rectangle()
                                .fill(.black)
                        } else {
                            Rectangle()
                                .fill(.white)
                        }
                    }
                }
            }
        }
    }
}

what I need to do is when the value of gridSize changes, to redraw the grid with the new value. Any help on that would be greatly appreciated

Hi! Will this solve your challenge?

struct ContentView: View {

    //sets the size of the grid
    @State private var gridSize = 7

    var body: some View {
        VStack {
            Grid (horizontalSpacing: 0, verticalSpacing: 0){
                ForEach(0..<gridSize, id: \.self) { row in
                    GridRow {
                        ForEach(0..<gridSize, id: \.self) {col in
                            if (row + col).isMultiple(of: 2) {
                                Rectangle()
                                    .fill(.black)
                            } else {
                                Rectangle()
                                    .fill(.white)
                            }
                        }
                    }
                }
            }

            Picker("Choose number", selection: $gridSize) {
                ForEach(5..<11) {
                    Text("\($0)")
                        .tag($0)
                }
            }
            .pickerStyle(.segmented)
            .padding()
        }
    }
}

you can also shrink your code a little bit by using ternary operator like so

 GridRow {
    ForEach(0..<gridSize, id: \.self) {col in
        Rectangle()
            .fill((row + col).isMultiple(of: 2) ? .black : .white)
    }
}

instead of if else

I figured this out in another post in the forum just before I saw your reply. I didn't have the id: .self identifier, so swiftui was very confused. I appreciate the reply though, it showed me the same thing as the other post, so thank you very much!

I still have to put a button in each grid item, and right now the code may be verbose, but I understand it well. The teacher for the course doesn't know swift at all (just Java and eclipse is such a NO), so I'm not real worried he'll fuss at me about verbosity ;-)

To update the grid size based on a selection in a dropdown in SwiftUI, you can use a Picker to allow the user to select the grid size, and then use the onChange modifier to redraw the grid whenever the gridSize changes. Here's how you can modify your code to achieve this:

swift Copy code struct ContentView: View { @State private var gridSize = 5 let gridSizes = [3, 4, 5, 6, 7] // Define the available grid sizes in your dropdown

var body: some View {
    VStack {
        Picker("Grid Size", selection: $gridSize) {
            ForEach(gridSizes, id: \.self) { size in
                Text("\(size)")
            }
        }
        .pickerStyle(SegmentedPickerStyle())
        .onChange(of: gridSize) { _ in
            // Redraw the grid when gridSize changes
        }

        Grid(horizontalSpacing: 0, verticalSpacing: 0){
            ForEach(0..<gridSize) { row in
                GridRow {
                    ForEach(0..<gridSize) {col in
                        if (row + col).isMultiple(of: 2) {
                            Rectangle()
                                .fill(Color.black)
                        } else {
                            Rectangle()
                                .fill(Color.white)
                        }
                    }
                }
            }
        }
    }
}

} In this code, we use a Picker with a segmented style to allow the user to select the grid size. The onChange modifier observes changes in the gridSize state variable, and whenever it changes, you can add the logic to redraw the grid with the new size.