Creating a Form Layout

00:00 In this lesson, you are going to learn how to create forms with the QFormLayout manager. So, let’s talk about how to use QFormLayout.

00:08 This one is slightly different compared to what we have seen before. Now for the first step, you still have to create a layout instance, and this one works in basically the same way compared to what we have seen earlier. But the next step is for this layout, you don’t add another widget. Instead, you would add another row, so you would use the method .addRow(). And into this, you have to add two arguments. The first argument is for the column on the left, the second argument is for the column on the right. So for example, for the column on the left you could have one argument that just specifies 'name', and then put a column on the right, so the second argument, you would have a QLineEdit widget—something we are going to implement in just a second, actually.

00:49 And for the entry on the right, you always need a widget, but for the entry on the left, it could either be a widget or you could just add a string. But let’s implement all of this—I think that is going to explain all of it the best.

01:01 So here you can see the basic code we have used so far, and this one should still look fairly familiar although now there are a couple more changes. Number one is we are importing a QFormLayout now.

01:14 This is the layout we are going to use in just a second. But besides that, we are also going to import a QLabel and a QLineEdit.

01:23 So now we don’t use a button anymore—instead we use text and line edits. So widgets that are more concerned with text than with just pressing a button. But they work in exactly the same way as far as the layout manager is concerned.

01:36 And then inside of our Window class, we are setting a window title, I set the size of the window, and I create a new layout with QFormLayout().

01:45 This one is going to give us the instance that we are going to use in just a bit. And then a bit further down, we are setting this layout to be the layout of our main widget—so this one here. And now all we have to do is to take this layout and .addRow().

02:02 And really important here—in the past, we have used .addWidget(), but this one is not going to work with the QFormLayout. Instead we have to use .addRow().

02:12 And in here, we have to add two arguments. The first one is the widget or the text on the left column. And let’s pick a simple one. I just want to go with 'Name', then a colon and a space just to give it a little bit of space. And for the second column, I want to add a widget, which in my case is going to be the QLineEdit().

02:32 This would allow us to enter text. And with that one covered, now we can actually run the code and see what happens!

02:41 So now we can see if I expand the window a little bit, that on the left we have the Name text and on the right we have an input field where we could write a name!

02:48 So, My name. And now for any additional row, we could just add more information. So for example, I could duplicate this entire line, then I have another row, and let’s call this one 'Job: '. And I still want to keep my QLineEdit(), so this one stays exactly the same. And now if I run all of this, we get two lines! One with Name and one with Job, so this one is working pretty well. Nice.

03:15 So, this would be the most basic way to use QFormLayout—that we start with a string on the left side and then with a widget on the right side.

03:23 Now, you can make this a little bit more extensive. The text on the left could also be a widget, and let me demonstrate this. Let’s say, for example, I want to add another row that asks for the email address, and the text for email shouldn’t just be a string. Instead, it should be a QLabel, so the one we imported early on. So let’s first create a QLabel.

03:44 So I call this emailLabel and this one is just going to be a QLabel(), and in here as an argument I pass in the string 'Email: ' with a colon and a space.

03:56 So this would give us just a plain QLabel widget.

04:00 And now on the next line, I want to create another row on my layout, so .addRow() again. And now in here, I want to add my emailLabel and then another QLineEdit().

04:14 And now if I run all of this,

04:17 we can see a third row. We have Name, Job, and Email. And Email isn’t just a string, it’s an entire QLabel.

04:25 So, this one is working reasonably well! And the left side here doesn’t necessarily have to be text. It could effectively be any kind of widget. For example, I could copy the QLineEdit(), and paste it in here, and now if I run the code, now both on the left and on the right side we have a QLineEdit.

04:44 Although, granted, this doesn’t make too much sense, but maybe in a specific case this would be useful. And with that, we have learned about the fourth layout manager, the QFormLayout, where we just have two columns. That makes it very easy to create a very basic form or to arrange generally anything in two columns. Now, in the next lesson, we are going to learn how to customize the four layout managers in a bit more detail. I will see you then!