BLACK FRIDAY: Save 50% on all my Swift books and bundles! >>

updating a grid size

Forums > SwiftUI

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

2      

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

2      

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

2      

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.

2      

Save 50% in my WWDC sale.

SAVE 50% All our books and bundles are half price for Black Friday, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.

Save 50% on all our books and bundles!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.