More Advanced Grid Layouts

00:00 In this lesson, you will learn how to create more advanced grid layouts. More specifically, this means that you are going to learn how to set up the grid in such a way that a single widget could take up multiple cells, which—when it comes down to it—is a super easy thing to achieve.

00:16 All you really have to change is to add two more arguments to the .addWidget() method. But let’s talk about .addWidget() for grid layouts in a bit more detail.

00:25 I think that’s going to be helpful. When you use a grid layout and you want to add a widget, at the minimum you have to add three different arguments: the widget, the row, and the column. This is what we have seen in the last video.

00:38 But you can add two more arguments to this. The first one would be how many rows our widget is going to take and the second one, how many columns it is going to take.

00:48 And you could even add one more, which would be the alignment, but we are not going to use that in this tutorial. But for the row and the column size, the default value is 1, where the widget is going to take one row and one column.

01:00 But you could add a greater number. For example, if you added a 2 for the number of rows the widget takes up, then it would take up two rows. It’s super simple.

01:10 And let’s actually implement all of this. I think that it’s going to explain all of this much better. So here, I’m back in my code. And this time, I have a slightly more advanced setup.

01:20 We are still importing QGridLayout, but this time I have already created a grid layout and saved the instance in the layout variable.

01:28 And then I’ve also set this layout to the layout of our QWidget. So all we have to do is to add widgets to this layout, so I want layout and .addWidget().

01:39 And in here, you are now going to need five different arguments, and let’s go through them step by step. The first one is going to be the widget that you want to add.

01:48 So in my case, I’m still going to use QPushButton. And for the name, again, I’m going to use the position so we can clearly tell which button is where.

01:57 So this one is going to be a 'Button at (0,0)', so a button in the top left like we have seen before. And this one also only gets 0 and 0. Now next to this, I want to have another button that is at column 1. So if run the code now, we should just see two buttons next to each other.

02:18 And we do! This one is working pretty well. But below this, I now want to have another button that is as wide as the two other buttons combined. And for that, let me duplicate this line. And this button, I’m going to rename to a button that spans two cols—two columns. And now we have to set the position first.

02:40 I want this one to start at row 1, so below these two buttons. But it should start at column 0, so all the way to the left. And now I have to specify how many rows it’s supposed to occupy and how many columns it’s supposed to occupy.

02:54 And it is supposed to occupy 1 row and 2 columns. Now let’s run this code, and there we go! We have one button that occupies two columns but only one row.

03:07 So with that, we have created a much better grid layout that can be much more flexible and would give you the ability to create much more complex layouts.