Controlling Space

00:00 In this video, we are going to talk about how to control space within your different layout managers. So, let me explain. So far, what you have learned is how to add widgets to a layout.

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.

00:24 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:46 Or maybe you want to have some space above these buttons. And all of these things can be achieved fairly easily, although you need to learn a couple new methods—but it’s not too many.

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.

01:09 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 .addSpacing() or .insertSpacing().

01:22 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 .addStretch() or .insertStretch().

01:36 And this one works in the same way. .addStretch() adds a stretchable space at a specific part in the layout, whereas .insertStretch() adds a stretch at a specific index in your layout.

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.

02:07 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.

02:27 It just fills the entire space below these buttons. So now if I run the code,

02:32 it looks all right so far, but if I scroll it down, all the buttons stay at the top. So this one is working pretty well.

02:39 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 "Center" and "Bottom".

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,

03:11 which can be quite useful for certain layouts. All right!

03:16 And, of course, I can also add it right at the beginning and now all of the buttons are going to stay at the bottom, which is also quite useful in some instances.

03:24 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.

04:01 So that way, you can add a bit of spacing at the top of your GUI, which is quite useful. And again, you can add this anywhere in your layout and it’s going to appear there.

04:13 So now we have 100 pixels between the bottom and the center button. And, of course, you could also do this at the end. It would work in the same way. So, this one is working.

04:23 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.

04:35 You can also tell it on what index it’s supposed to be, so index 0 would mean it’s right at the top. And this would be the first argument, so let’s add it right at the beginning.

04:48 And there we go! Now we have a space right at the top.

04:52 If we added a 1 in here, it would have 100 pixels of space between the top and the center. And what you could also do, add a -1 in here.

05:01 This would mean it’s always at the end of the layout. And we have it at the end here.

05:09 So if you use .insertSpacing() or .addSpacing() or .insertStretch() and .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.

05:23 These are the four methods that you need to add space to box layouts, so for both QVBoxLayout and QHBoxLayout, those would work pretty well.

05:32 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 .setSpacing(), .setVerticalSpacing(), and .setHorizontalSpacing().

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.

05:59 It’s actually really simple. Let’s go back to our grid layout and let’s play around with that one. That, I think, is going to be the best way to illustrate this.

06:08 So here I have my code, and here I have the QGridLayout with all of the different buttons. So if I run this, we have a three-by-three matrix with buttons inside.

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.

06:44 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 Vertical, so .setVerticalSpacing().

07:02 And now if you run this,

07:05 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!