Here are three different layouts with lots of buttons:
Conventional wisdom would have you believe that creating something like the designs below would be a time consuming and challenging process. If you wanted 9, 16 or 25 buttons then you’ll spend a lot of time messing around with rows and columns and sizes and paddings…right?
Wrong! All 3 of the designs shown above are created from just 1 button, 1 row and 1 column. By using the Any Component blocks you can create a grid of any size you like and the incredible thing about this approach is that making small changes to your design is quick and painless.
Make a grid
This is best done with a function. The steps are always the same, but the number of repetitions will change depending on the size of the grid.
Depending on the button that is pressed the
numberOfLoops will change too
This approach isn’t perfect, and you can create multiple grids at once so - depending on your use case - you might want to temporarily disable the buttons like this:
Delete Previous Grid
In order to have a fresh grid each time, we need some way of deleting the previous grid. To do this we start be creating a list of the rows and a list for the buttons.
Back in our original
makeGrid function, each time we clone
Button1 that clone gets added to the end of our
listOfButtons and similarly, each time we clone
Row1 that clone gets inserted into the end of the
listOfRows like so:
This allows us to create two new functions; one to delete the duplicate rows and one to create the duplicate buttons. Note, that in this case the original
Button1 are not deleted or modified in anyway.
Custom Grid Appearance
Now you can customise
Button1 inside the
makeGrid function and you can modify the properties of your entire grid with just one or two blocks and without the need to change anything in the designer.
Update All Components
Finally, if we want to add some custom text or image to each of the buttons we have just created then we can simply loop through all the buttons in
Column1 like so: