Creating a Multipage Tab Layout
In this video, we are going to learn how to use tabs in our GUI. We are still only showing specific information, but now instead of using a page to select different widgets, we are going to use tabs. And this works in a very similar way compared to the
QStackedLayout. In fact, it’s actually easier.
00:17 We don’t need any signals to make this entire thing work, so it’s quite a simple thing to set up. Let’s talk about how it works. The first step, like with any other layout manager, is we have to create an instance of the layout. And this happens again in the same way.
We are going to store our layout manager in a variable. And then to this layout manager, we have to add tabs, which happens with the method
.addTab(). And in this method, we can either add two or three arguments depending on what you want to do. In the most minimal setup, the first argument would be the widget you want to add, which is most likely to be a
QWidget with its own layout and its own widgets.
And the second argument is going to be the name of the tab, so the label, effectively. Now you could make this a little bit more complex by adding a widget, an icon, and then a label, so you would add an icon to the tab page. And the icon would have to be a
QIcon object—just be aware of that, but we are not going to use it anyway.
Now I want to create, again…
# Create a top-level layout. In here, I am just going to create a variable called
layout, and this one is going to be a
QVBoxLayout(). And this
layout, you just need to set as the layout for the entire window—the same thing we’ve seen already a couple of times.
And in here, you have to add two things: a widget and a label. The label is the easy part. Let’s call it
'General'. Now, before I explain how we are going to add the widget, let’s first add a second tab.
So you just need to duplicate this line, and let’s call this one
'Network' so we follow the example I showed earlier. And this one would be… let’s call it
widget2. Now this
widget and this
widget2 have to be widgets themselves, ideally
QWidgets that contain their own widgets.
And we could approach this in the same way we approached the
QStackedWidget, where we write more and more code inside of our
.__init__() method and then add the
QWidget to both of these tabs. And this would be possible, but it would also mean quite messy code.
That way, we have much better organized code. Let’s work on the name first. The first one, let’s call it
.generalTabUI(), and we want to run this function. And for the second one, this has to be
self and let’s call this
And all we really have to do in here is to create a
QWidget with a layout and with a couple of widgets inside of that
QWidget. And after that’s done, we are going to return the
QWidget. So when this line here is run, we have a
QWidget that is being returned that is then added to the tab. And let’s call this
and this one is going to be a
QVBoxLayout(). So, this layout here is going to be the layout for this
generalTab in just a second. And since it’s a local variable, this
layout and this
layout are not going to interfere with each other, so the scope is going to help us quite a bit in here. All right!
And now we can duplicate this just to have a second one, and call it
'General Option 2'. And after this, all you need to do is get the
generalTab and set the layout, and it needs to be the
layout inside of this local scope.
And now we are going to create quite a similar setup compared to the
.generalTabUI(). So what I would recommend, just copy the entire thing so you save a bit of writing. What you could also do, if they are too similar, you can just use a couple of parameters to use arguments to change this.
This should actually work! So let’s minimize both of these methods, and now literally all that’s happening is that we are going to create a
QTabWidget, we are going to add two tabs to it, and the actual widget inside of this tab is going to be created inside of these two methods. So we don’t have to worry about them inside of our
And I’m getting an error that I have made a typo. This should be
tab. And now let’s run the entire thing, and now it’s working. And I can still scale it, and now I have two tabs that I can switch between. And if I tick them, the ticks are going to be maintained. So this one is working pretty well.
08:18 So, this would be another single-page layout that works really good and gives you lots of different options to lay out your GUI! So, I hope that was helpful! In the next lesson, we can conclude the entire course.
Become a Member to join the conversation.