Here are additional resources about PyQt:
Creating a Horizontal Layout
Now that we have gotten the theory out of the way, let’s create our very first GUI. Here’s what we are going to do. We are going to use the
QHBoxLayout manager to create a horizontally scaling GUI. This layout manager works in a very simple way.
00:26 The important part for this layout manager is that it takes the entire horizontal space of the parent container. And each of the children widgets inside of it is going to get an equal amount of space—at least by default. You can make some changes to this later on.
00:49 Here I am in my code and I already have a couple of lines that I use to create a basic PyQt application. If I run this code, all I get is an empty window that I can scale, but I can’t really do anything else with it—well, besides closing it. Okay.
QApplication is what we need to run PyQt,
QHBoxLayout is the layout manager we are going to use in just a second, and then
QWidget are the two widgets we are actually going to use, with
QWidget being the parent container and
QPushButton being the button we want to add.
We have only given it a title, but nothing else. And then below that, we have an
if statement that if
__name__ is equal to
"__main__", so we make sure that we are only running this code. Now, since we only have a single file, this isn’t strictly necessary, but it is good practice and it doesn’t really do any harm, so let’s just use it.
Let me actually type this in a comment,
# QHBoxLayout instance. So what you need to do is to first create a variable. In my case, I’m calling this
layout. And this one needs an instance of
And in here, you could add essentially any kind of widget as the first argument. In my case, I want a
QPushButton. And for this one, we need one argument with the name of the button. In my case, I’m going to call it
And this would be giving us one button, but I want to have three buttons in total. So let me duplicate this line twice. The second button I want to call
'Center' and the third button I’m going to call
And here’s an important thing about the
QHBoxLayout. When you add widgets to it, the first widget is always going to be added on the left with the second widget being added to the right of that, and then each additional widget being further to the right. You’re going to see in a second what I mean. So now if I run the code, we still can’t see anything.
05:09 This one lays out all of the widget in a horizontal way. And to that, we are going to add three different widgets. And finally, we are setting our layout to the layout of the parent widget. And with that, we have a basic horizontally scaling GUI.
05:45 The second argument would be the stretch factor, and this would be how much space the widget is going to take up. The third one is going to be the alignment, and this one would set, well, the alignment of the widget. And just to keep things simple for now, let’s just focus on the stretch property. This one is really simple.
06:03 By default, all of the widgets have the same width, and that is because we didn’t specify a stretch factor for each of them. But if we did, we could influence the width of each of the different widgets in quite a flexible manner, so let’s check that one out!
Here I am back in my code, and let me add another argument to each of them. By default, the stretch factor for all of them is
0. So if I run the code now, nothing should change. And it doesn’t. Good to know!
But now let’s say I want my right-most widget to be larger than the other two. So I change the stretch factor to, let’s say,
2. And now if I run the code and I scale it, only the right one is going to scale up, because this one has a much greater scale factor.
And what I could also do is change the center one to
1, and now if I run the code, both the center and the right-most widget are going to scale, although the center one only half as much as the right-most button. And this is working quite well!
07:10 That way, you have a lot of control over how each of the widgets is going to scale and how large it is going to be, which is really powerful. All right! With that, we have covered our first widget.
Become a Member to join the conversation.