00:12 This works reasonably well with the limitation that basically all of the different elements scale in the same way, which can sometimes be useful, but is not always what you want. So, let me illustrate this.
Let’s say you have a
QVBoxLayout and you want to scale it down, and what you see in there is that all of the elements are dragging downwards and you have more and more space between them. But what if you don’t want them?
00:36 What if you want all of the elements to stay at the top? Or alternatively, what if you want only one of the buttons to stay at the top and the other buttons to go downwards and scale in the normal way?
00:57 Although it’s important to mention here that the different layout managers have different ways to organize space, so let’s start with the simpler one. There’s spacing methods for the box layouts, and there are two things that you can do.
You can either add a fixed space or you can add a stretchable space that fills the entire area. And for each of those, you have two methods to add them. For spacing, you can either use
The only difference between these two is that you can use
.insertSpacing() for a specific part of your layout, whereas for
.addSpacing(), you just follow the normal layout. And to get a stretchable space, you either
01:47 Again, you’re going to see in a second what that means. Actually, let’s go into our code right now and let’s play around with this. So here we are back in the code you have seen earlier. If I run this, we have a plain vertical layout that scales by filling out the entire space with the buttons. And for the first part, let’s say I want to have all of these buttons stuck at the top.
What I effectively want to do is to fill the entire space below these buttons with a stretchable space. So what you need below all of these widgets is to
.addLayout() and add—now not a widget—we want to add a stretch. And a stretch—you don’t need any arguments.
And now the important point here is that where you add this
.addStretch() in your code really matters. And let me illustrate this. For example, if I move it down right below the top button, it means that we first add this top button, then a stretchable space that fills the entire space, and then
02:59 So this button would stay at the top, whereas these two buttons would be at the bottom. So let me run this. Now it looks like normal, but now if I scroll it down, the other two buttons are going to stay at the bottom,
So, this would be a stretch, and this would be a space that fills out the entire area. Now, the other approach would be to use spacing, and this one is a fixed area. So as the argument here, we have to specify a certain amount of pixels in terms of how big we want this element to be. For example, if I want to have a space between the top part of the window and my first button, and this area I want to be 100 pixels high, I would have to add the argument
100 in here. And now if I run the code, you can see 100 pixels from the top and otherwise we have the same stretching behavior.
So that way, we have added a stretch and a spacing. Now, what you can also do is to insert them, and
.insertSpacing() gives us the option to not just add the spacing at a certain part in your code.
So if you use
.addStretch(), they basically do the same thing, except that insert gives you a little bit more control about where you are going to add the element, but that’s pretty much it.
And with that, we then come to managing space in a grid and then a form layout. Here we have three different methods that we can use to add space. They are called
05:46 And I think they’re kind of explained just by the name, in terms of what they do. We can either set the space in both horizontal and vertical space, we can focus on just the vertical space, or just in the horizontal space.
06:17 It doesn’t really do anything, but it works. And all I have to do here is to target my layout again, and now I can add different spacing options. Let’s say I want to set… let’s go with spacing in general. And let’s say I want to add 150 pixels between all of these different buttons, both in x and y—both in the horizontal and vertical axes.
And that is literally all you need! So if I run the code now, we have 150 pixels of space between them and this space is always going to stay the same. Now, if you want to have this only in the vertical axis, you just have to add
you’ll get vertical spacing, and horizontal spacing fills out the entire area. And, of course, you can also change this to
Horizontal. I hope I spelled that correctly. And yes, I did! Now you only have horizontal spacing, and everything else scales in the exact same way. So with that, you should have a much better idea on how to add space to a layout. However, there are still some limitations on what kind of layout you can create. And that, we will address in the next lesson, where we will learn how to combine different layouts. I will see you then!
Become a Member to join the conversation.