Creating a Vertical Layout

00:00 In this lesson, you are going to learn how to create a layout that scales in the vertical axis. It is going to work in a very similar way as compared to QHBoxLayout from the last video.

00:11 The only real difference is that now we use a different layout manager. This one is called QVBoxLayout. All it really does is it takes a couple of widgets and then places them in a vertical layout.

00:24 Really all we have to do is do the same thing we have done in the last video and just change one letter from an H to a V. Let’s jump into our code and let’s have a look at this! Here again, I have the very same setup that we have seen in the last video.

00:39 There are two differences now. The first one is that we don’t import a QHBoxLayout. Instead, we are importing a QVBoxLayout, so a different layout manager.

00:49 And the other difference is that the title of our GUI now is "QVBoxLayout Example". Besides that, it is the exact same code. So now again, if I run it, we get an empty window that we can’t really do anything with. So now again, what I want to do is—let me add a comment—to create a QVBoxLayout instance.

01:14 And this, again, I’m going to store in a variable I have called layout. And now, all you need to do is to use QVBoxLayout and add some brackets afterwards.

01:25 And that way, you are creating an instance of a QVBoxLayout. And now all you need is to add widgets to the layout, just like we have seen before.

01:37 So what you need is our layout again, and .addWidget(). And in here, you need to add the widget that you want to add. In my case, this is still going to be a QPushButton.

01:49 This one I’m going to call 'Top'.

01:53 This would give us one QPushButton, but I want three. So again, I’m going to duplicate these lines. I’m going to rename the second one to 'Center' and the third one to 'Bottom'.

02:05 And what is going to be happening in here is that each widget is going to be added from the top, so the first widget is going to be on top, the second widget comes below that, and any additional widget will always be added below that. And with that covered, all we have to do—let me add another comment—is to set the layout to the application’s window. And this, again, happens with self and .setLayout().

02:33 And then here, we need one argument that is our layout. And this is all we needed! So if I run the code now, we can see that we have three buttons that are working in the vertical way. And even if I scale the widget, it still works really well.

02:49 And obviously, we can also still click on the buttons. This works in exactly the same way. So this would give us a very basic vertical layout. Now, there’s one more thing we could be doing here, and let me add this a little bit further to the top. So if I run this code, our starting window is really small.

03:08 And I want this to be a little bit larger, let’s say roughly something like this, so that you can read the title of the window and you can see the buttons a little bit better. To achieve that, all we need is to target our parent widget and type .resize().

03:25 And in here, we have to add the width and height of our window, or at least the window we want to have. And in my case, I went with 270 and 110.

03:35 So I want my window to be 270 pixels wide and 110 pixels high. So now if I run this, this is a little bit larger. Still not very large—you could, for example, add something like 570 in here, and now this would be much wider. But let’s stick to 270.

03:53 I think that’s a reasonable number. So now we can see the buttons decently well.

03:59 All right! With that, we have created a vertical layout. In the next tutorial, we are going to create a slightly more advanced one with a QGridLayout.

04:07 I will see you then!