Popular Mechanics: Working With Spacers

We promised you earlier that we would fix the position of the extra cheese checkbox by centering it. One way do to that is using so-called spacers.

You can think of a spacer as a spring that has the power to move a block (a widget), but not to deform it. So, if you have a row layout containing two widgets, and you put a spacer in between them, the widgets will be pushed to the left and right sides as far as possible, but they will still keep their original size. If the user makes the dialog wider, the spring will take up the additional space, and if he or she makes it smaller, the spring shrinks accordingly.

Perhaps you can already guess how we can use spacers to center the extra cheese checkbox.[1] We just put a spacer to both sides of the checkbox, and since the two spacers (springs) have equal strength, they will keep the checkbox always in the middle of the form.

To start from the previous, completely layouted form, you first have to break the outermost layout. Then make the extra cheese checkbox a bit smaller and move it a bit to the right so that there is space left to it.

Now select Layout/Add Spacer from the menubar or click on the spacer icon (see Figure 4-11) and insert two spacers left and right of the checkbox. Once you try to insert a spacer, a tiny popup menu will open and ask you whether the spacer should be horizontal or vertical. Since we are talking about horizontal orientation here, select horizontal both times. Your form should now look roughly like in Figure 4-12.

Figure 4-11. The spacer icon

Figure 4-12. Inserting spacers into a form

Next make a row out of the two spacers and the checkbox by selecting all three of them and assigning a horizontal layout. The result (cf. Figure 4-13) will probably not be what you expected, but this problem will go away automatically in a minute.

Figure 4-13. Combining the spacers and the checkbox in a row

Now recreate the outer layout that you had to break in order to be able to add the spacers: Assemble the three rows into a vertical layout that you create on the form itself. Change into test mode and see how the extra cheese checkbox always stays in the center (see Figure 4-14).

Figure 4-14. The checkbox is always in the center

Of course, there are many more things you can do with spacers. Look for example at the size button group. Perhaps you think that it looks ugly at that the three radiobuttons should be evenly spaced across the button group. If you want this, just put spacers between the radiobuttons. If you add another two spacers above the first and below the last radiobutton, the remaining space will be evenly distributed above, between and below the radiobuttons. Or, you could decide that you want them close together, but in the lower part of the button group. In this case, just use one spacer and put it on top of the radiobuttons. As you can see, spacers give you a lot of possibilities.

There are more things you can do with layouts. We haven't really talked about grid layouts yet, and not about the various properties that the layout managers themselves have. You'll learn more about this in the section called All About Layout Management in Chapter 5.

Notes

[1]

If you have used Qt layout management without the designer before, you might have centered your widgets with the AlignCenter parameter. This is not possible in Qt Designer; you must use the spacers in order to achieve this.