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.
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.
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.
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.
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.
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
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.
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.
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.
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: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.
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.
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.
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!
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.
Become a Member to join the conversation.