Creating a Grid Layout

00:00 In this lesson, you are going to learn about QGridLayout, which is super powerful. Let me explain what it does. So far, we have only created very basic layouts that are either purely horizontal or purely vertical, which is simple but also limited. For example, what if you wanted to create a more complex layout that goes in two axes?

00:22 And for that, we have QGridLayout. Here’s how it works. The QGridLayout manager creates a two-dimensional layout that has rows and columns, and into the resulting cells, we can place different widgets.

00:35 This is giving us the ability to create complex layouts. You can also influence how many cells the widget is taking up. You are going to see how this works in the next video.

00:45 But for now, let’s talk about this in a more basic setup. Here’s how all of this works in code. You still have to create a layout, just like we have seen before, but now when you use .addWidget(), you have to specify a couple of things.

00:59 Number one is still the widget that you need, but the second and third argument are going to be the row and the column where you want to add the widget. And be aware here that the first row and the first column always start at zero.

01:11 But once you have your layout, you can just add it to the parent widget and you should be good to go! So, let’s check this out in code and let’s see how this works.

01:20 Here I have the code. And again, there are two changes. Number one is now we’re importing a QGridLayout, and this is also going to be in the title of the window. And again, what we need now is to create a QGridLayout instance.

01:40 And this happens in exactly the same way. I create a new variable that is called layout, and this one needs QGridLayout(), and now you have to add widgets to the layout.

01:54 And this is the one critical step on how to achieve this entire thing. So let’s go through this very slowly.

02:01 I again want the layout and I still use .addWidget().

02:07 And in here, the QPushButton() is going to be added. And to visualize its position a little bit better, I’m going to give it the name of its position.

02:17 This is going to be the 'Button at (0,0)', so in the top left of our window. This will be our first argument, but now I need two more arguments. I need the row and the column.

02:31 And for now, I want them to be 0 and 0—exactly what I have specified earlier on that line. This would give us a single button.

02:40 And let me add two more just to visualize this. I want another button at (0, 1), so this would be row 0 and column 1, so this one here would be to the right of this one.

02:54 And, of course, we have to specify the actual position—not just the name. But then for the other button, I want this to be at row 1, both in the name and in the position. Okay! Now that we have that, let’s actually set the layout on the application’s window, and this happens again with self.setLayout(), and I want to pass in my layout.

03:22 So now let’s see what happens if I run the code. And there, we can see the different positions of the different buttons. So we have one at (0, 0), one at (0, 1), and one at (1, 0).

03:34 So this is a two-dimensional layout. And, of course, we can still press the button and we can scale the window and it still works. So now we have a two-dimensional layout that works pretty well.

03:45 Cool! And now what you can do is to add as many buttons as you want in here, so let me create a three-by-three layout. On the first row, I have one, two, and three buttons. Then on the second row, I have also 0, 1, and 2.

04:02 And let me add the corresponding name.

04:06 And then I also want to have a third row that is on the index 2. And then this is going to be '0', '1', and '2'.

04:17 And again, for the actual position—not just the name—

04:20 I have to update all of these as well. And I believe that’s looking good! Quite a few different entries. Let’s check if this is working. And it seems like it is!

04:33 So now we have nine different buttons on here and they all scale along with the parent widget. And, of course, you can still press them and you could add any kind of functionality in here as well. And with that, you have a two-dimensional layout that I think is working pretty well.

04:49 Now, this is still limited. For example, what if we wanted to have one button that is larger so it takes up two or maybe even three different cells? And this we can also address, but I think we already covered quite a bit for this tutorial, so we are going to cover more advanced grid layouts in the next video.

05:07 I will see you then!