Nesting Layouts

00:00 So far, you have only learned how to use individual layout managers, and while this can be fairly powerful, it is still limited because you can only ever use a single style of layout.

00:11 But for this lesson, we are going to expand on that quite a bit because what we’re going to do is to nest one layout inside of another layout. Or more specifically, we’re going to create a layout on one widget and put this widget inside of the layout of another widget.

00:27 And that way, we are able to create really complex layouts. Here’s what we are going to build. We have a parent widget that has a QVBoxLayout, so all the widgets inside of it are going to be vertically laid out. However, all the widgets that we are going to add are going to be containers of other widgets with a layout themselves. So the top widget we are going to add is going to be a QFormLayout, and this one contains some text and an input field.

00:54 And below that, we have another QWidget, and this one contains a QVBoxLayout itself. In there, we have a couple of checkboxes. That way, we are able to create a fairly complex layout that would still scale if you update the window size.

01:09 So here, you can see the code, and this should look fairly familiar compared to what you have seen before. We are still importing sys and a couple of different widgets, then we have our class Window, and we are running all of this code inside of an if statement. And the name of it is "Nested Layouts Example", and there’s nothing else in there.

01:28 And let me go through this step-by-step and I’m going to explain every step by using a comment. So the first step is I want to create an outer layout. This is going to be the layout that our parent, this QWidget, is going to have.

01:44 This one I’m going to call outerLayout. That seems appropriate. In here, all you need is a QVBoxLayout, so that any widget you put inside of that QWidget is going to be laid out in a vertical manner. Now inside of this QVBoxLayout, I want to have two widget containers, one being a QFormLayout, the other being another QVBoxLayout.

02:06 So, let’s start with the form layout. I want to create a form layout for the label and the line edit. Seems like a good name for it.

02:19 This one is going to be another layout, and this one I have called topLayout. And in here, to create a form layout all you need is a QFormLayout(). It doesn’t need any arguments, but don’t forget the brackets.

02:33 And now let’s add another comment that I want to add a label and a line edit to the form layout. So in this step, we are actually going to add a row to this form layout.

02:47 And remember, when we use QFormLayout we don’t add a widget, we add a row. And this happens in here, so I want my topLayout and I want to add a row. So for the text, I go with 'Some Text: '. And after that, I’m going to just add a QLineEdit(). And don’t forget the brackets—that one is really important. Later on, we are going to add this QFormLayout to this QVBoxLayout. Although before that, I first want to create a layout for the checkboxes.

03:17 So let’s add another comment to create a layout for the checkboxes. So for this one, we are going to add yet another layout. This one I have called optionsLayout.

03:31 And for this one, I just want a QVBoxLayout(), just like the outer layout. And to this one, we now have to add some more checkboxes. So let me add another comment with # Add some checkboxes to the layout.

03:47 And in here, I want to get my optionsLayout, and now we need .addWidget() again. And in here, I just want a QCheckBox(), a very simple widget.

03:57 You’re going to see in a second what this one does. In here, I don’t really care about what text I’m going to use, so I just go with 'Option one', and just to see what we’re doing, I’m going to duplicate this line twice.

04:09 This is going to be 'Option two' and 'Option three'. So now we have three different layout managers. In the next step, I want to add this layout and this layout to the outer layout.

04:23 Or more specifically in a comment, I want to nest the inner layouts into the outer layout. In here, we have to learn one new method, although it works in a very similar way as compared to what we have seen earlier.

04:39 So again, I want to target my outer layout. And what we have used in the past—or, well, right above—was to .addWidget(). But this time we don’t want to add a widget. Instead, we want to add a layout. PyQt makes this very easy, because instead of widget we just want to add the layout, and that’s literally all we have to do.

04:59 But we do have to add the layout we want to add. So on top, I want my topLayout, then I duplicate this line, and below that I want my optionsLayout.

05:09 So all that’s happening here is that we have an outerLayout, then a topLayout, then an optionsLayout. Both of these last two layouts are going to be inner layouts that are supposed to be part of this layout.

05:21 So what we have done in here is we have added them to the outer layout. And there’s one more line that we do need—that we have to set the window’s main layout, so we actually tell PyQt that this outerLayout is supposed to be the actual layout of our QWidget parent widget. And to do that, all you need is self.setLayout(), like we’ve seen in the past, and target outerLayout. And now if I run all of this, this should be working. And yes, it does!

05:52 Now I can even scale this, and this would still be working. And in here, we are using three different layouts—or, well, two different layouts, but three instances of a layout. We have a QFormLayout, then we have a QVBoxLayout, and both of these layouts are inside of another layout. And this would, for example, allow us to have the options always at the bottom, which can be very useful if that’s what you have in mind. And with that, we have covered nested layouts! In the next lesson, you are going to learn about more advanced layout managers.