Creating a Multipage Stack Layout
00:00 So far, all the layouts that we have covered had one thing in common—that you always see all the widgets that are being placed on this layout. But sometimes, you don’t really want that to happen. For example, sometimes you only want to show a certain widget if the user clicks a button.
And I think the name already implies what the two are doing, but let’s start for this video with
QStackedLayout puts different widgets on top of each other and only displays a single one at any given point in time.
Each of the widgets inside of the
QStackedLayout is going to get an index. You can use this index to cycle between different widgets that you want to display. And that way, you could create different pages in your GUI, for example.
01:01 Then inside of each page, you have a couple more widgets that are also being organized inside of a layout manager. So again, we have nested layouts. This one is becoming really important for more complex layouts.
But there’s one complication you should be aware of before we start coding—that we need a signal to make a
QStackedLayout work. So if you have no idea what is signal is, I would refer you back to the PyQt learning path.
01:25 It is explained in quite a bit of detail in there. But besides that, let’s have a look at the code and let’s create all of this. So here, again, you can see the basic setup we have used so far, except now we are importing quite a few more different widgets.
And let me go through the really important ones. The first one is a
QComboBox, and this one is essentially a dropdown menu that we can use to select different pages. Then the actual layout manager is
QStackedLayout, and this one is going to put our different widgets on top of each other.
QStackedLayout, we have a couple of
QWidgets that each have a
QFormLayout. I suppose all of that is going to make much more sense when you actually implement it, so let’s go through this step-by-step. The first thing we have to do is to create the actual layout for our parent widget. So let’s call this
# Create a top-level layout.
This one is just going to be a basic
QVBoxLayout. It doesn’t have to be anything specific. I’m going to create a new
layout variable, and this one is just going to be
QVBoxLayout()—the same thing you have already seen multiple times. And straightaway, I’m going to set this as
self.setLayout() and add in the
layout. Now we have set the layout of this
QWidget to just be a
QVBoxLayout. Now, any widget we are going to add to this layout is going to be added in a vertical way. Now, next up, what I want to do is to create the combo box.
And this one is just supposed to be a
QComboBox(), it doesn’t need any arguments, and now we have a
QComboBox. And to this one, I want to add two items. So I select it again,
.pageCombo, and now we have to
And this is somewhat similar compared to the
.addLayout() that we have seen earlier. Instead, we just add a few entries to this dropdown menu, and this has to be a list. Inside of this list, we need a couple of strings. I just call them
'Page 1' and
'Page 2'. And they have to be separated by a comma, not a dot.
And just to get started, let me add this combo box to the actual parent layout, so this
QVBoxLayout. And just to annotate all of this with comments, I want to add the combo box to the top-level layout.
And all I have to do in here is to get my layout again, and I want to add a widget, and this is going to be
self.pageCombo. And now if I run this, this should already work and give us a basic dropdown menu. There we go!
This one is going to emit which item we have selected once we’re using the dropdown menu. I’m going to illustrate in a second what that means. And now to use the signal, you have to add
.connect(), and now you have to add some kind of function. And in my case, I called this function
And this is a function—or rather, a method—that we are going to create further down here, so I want to create a new method that I call
.switchPage(). And make sure for the argument, it always needs
self because we are inside of a class.
05:37 And here’s one important thing for PyQt, that if you use a function inside of a signal, you don’t want to run the function yourself. Instead, you tell this signal that you want to run this function whenever this combo box is being activated.
So the only important thing you have to remember is that don’t add brackets when you use functions inside of a signal. Now inside of this
.switchPage(), we want to run some kind of code. And later on, we are going to use this to activate the
QStackedLayout, but for now, let me just print what is going to happen.
And really all I want to print is
self.pageCombo and then the
.currentIndex. And a really important part here is that you need brackets after this, because this is a method. But now, let’s actually run this and see what happens.
So by default, nothing happens. But let me switch to Page 2, and now we get the index
1. And if I switch back to Page 1, we get the index of
0. So all that this function does—let me close all of this—is that whenever we run this signal, we are running this method here.
And this index we can use to switch between the different stacks on the
QStackedLayout. So, let’s create that one actually. But before that, I want to change the comment just to be clear what we’re doing.
07:08 So besides creating the combo box, I also want to connect the combo box and I am doing all of this to switch between pages. So now let me add a bit of space below our combo box, and now we can actually create our stacked layout.
So I want to create the stacked layout. And then here, again, I want
self and I want
.stackedLayout(). This is just going to be a variable in which I am going to store my stacked layout. And, well, this works like all the other layouts we have seen before. This is just
I want to create the first page, and let’s store this one in a variable that I’m going to call
self.page1. And this one, all you need is a
QWidget(), so an empty widget that you can put stuff inside. And this widget itself is also going to need a layout, so let’s give it one as well.
And for both of them, all you need is a
QFormLayout(), so a fairly simple layout. And now, too, there’s
.page1Layout. All you have to do is to add a couple of rows with the information you want to add. And, of course, you could also use another kind of layout.
It should be a fairly straightforward approach. And let’s duplicate this row and change it to
'Address: '. We can keep the same widget. And a really important thing to not forget is to actually set this layout to be the layout of this
QWidget. So what we need is
self.page1, and you need
.setLayout(), and in here it has to be
This only happens further down here, where we actually set this
QFormLayout to be the layout for this
QWidget. And then to what’s the layout, we are going to add these two rows. And we are almost done for this one widget.
All we need now is to get our
self.stackedLayout and you need to add the widget that is going to be
self.page1. Inside of this
QWidget, we have all of this information, all of these widgets, and all of this is going to be added to the stacked layout.
And this would be our first page! So this would be one page, but just having one page feels kind of pointless. So instead what you can do is copy all of this and paste it right below, and we can call this
# Create the second page.
And with that, you have two pages for your layout. This is already getting quite complex. I hope you can still follow. But okay, now what we have to do is to actually add this
QStackedLayout to our main widget.
And now let’s see what happens! Now we have our
QComboBox and we have our widget below, and this one is Page 1. Now the problem is we can’t switch between them, because we didn’t add the proper code down here. And now, I don’t want to print the information of what the current index of the combo box is. Instead, I want to use it to influence the stacked layout.
So I first have to target our
self.stackedLayout, and the method you need to make this work is called
.setCurrentIndex(). This one just switches between the different pages, so index
0 would be page 1, index
1 would be page 2, and then you could add more and more pages to this. It’s quite a simple system, actually. And let’s add a space between all of this.
This makes it feel a bit better. Okay! Let’s try all of this! This is still working. I can write some random text in there. Now I can switch to Page 2, and now we can see Job and Department, because we switched to another stack in the
12:14 And now we can still add stuff in here. Let me just add random things. And if I went back to Page 1, our information would still be in there. And that way, you could have different pages on your PyQt GUI. And, well, it does look slightly complex, but once you practice this a couple of times, this is actually quite a straightforward system. Now, if you’re struggling with these concepts, this is probably a good lesson to go through again. But in the next lesson, we’re going to look at another way to create a single-page layout.
Become a Member to join the conversation.