We have done quite a bit with layout managements in the tutorial chapters already, but here we will wrap up the missing pieces of information and provide you with an overview of how to use layout management in the Qt GUI Designer.
Remember that you use layout management in two steps:
Add widgets to your form.
Layout your widgets by assigning a layout manager to the surrounding container.
If you later want to add more widgets, you will have to remove a layout manager ("break the layout") in order to be able to do so. But even then, this two-step model stays valid: First you add the new widget, then you re-assign the layout manager to the surrounding container.
Note that there are two ways of selecting the surrounding container: If you already have a natural surrounding widget like a group box for the contained radio buttons or the form itself in case you want to layout all already existing widgets or layout managers, then you just click on this container and assign the layout manager by using one of the options from the Layout menu, the toolbar buttons or the accelerators (Ctrl-H), Ctrl-L, and Ctrl-G, respectively).
If on the other hand you do not have a natural container, e.g., because you just want to group a number of widgets together so that you can later take this group as a whole when you add another layout manager, then you can just have Qt GUI Designer create a widget for you. You do this by simply selecting all the widgets that should be layouted and then assign a layout manager. The rest will be handled internally by Qt GUI Designer; in the generated code, this will simply be a sublayout.[1]
As you already know, there are three different layout managers available: a vertical box layout manager that arranges its widgets in a column, a horizontal box layout manager that arranges its widgets in a row, and a grid layout manager that arranges its widgets in a grid. Obviously, the vertical and the horizontal box layout manager only differ in their orientation, otherwise they are identical. Also, the two box layout managers are often used together; it makes for a very natural layout to group some widgets into e.g., a few rows, then group these rows into a few columns, group these columns into even less rows, etc. Often, the outermost layout manager is a vertical box layout manager, but this depends on your forms, of course.
The grid layout manager, on the other hand, is less flexible. It arranges its widgets in a fixed number of rows and columns. While all the columns can have a different width, all the widgets in one column automatically get the same width (otherwise you could hardly speak of a column). The same goes for rows. If you really want a widget not to extend its width to the full column width (which is determined by either the widest widget or the available total space or both), you can use spacers left and right to the widget that take up the remaining space. Again, the same goes for rows, you can put spacers on top and below a widget as well.
If you are unsure about whether you should use a grid layout or a combination of vertical and horizontal box layouts, think about what feels more natural, given the nature of the widgets. If you have, e.g., a data-entry form where you have a number of vertically arranged line-entry fields each of which have a label left to them, the grid is probably the better option, because all the rows, each consisting of a label and a line-entry field, are uniform and should be layouted the same. If you, on the other hand, have a less uniform collection of widgets, the more flexible solution of nested box layouts might yield better results.
We have already hinted at the existence of spacers, and you have used them a bit in the tutorial chapters we well. Spacers are "things" that are not visible in the final dialog, except for the fact that they take up some of the available space. As mentioned, this is useful, if you do not want the widgets in a layout to claim all the available space for themselves as this would make them look unnaturally big. Spacers are represented by the spring-like drawing in the form editor and can be either horizontal or vertical — you have to select the orientation when you insert them, but can change it later.
Spacers are one of the things that can be used rather easily and intuitively, but that are awkward to describe. Therefore, we will not make too many words about them here, but rather suggest that whenever you think that a widget takes up more space than it should and whenever you think that two widgets should be more separated than they currently are, you insert a spacer between them.
As all other things that you put on a form, layouts have properties. If you select a layout (make sure that you really select the layout and not one of the contained widgets or sublayouts; the handles should be all around the red rectangle symbolizing the layout), you can see the layout's properties in the form editor. Layouts have much less properties than widgets, and most of them are pretty generic anyway, but there are two properties that you might want to change: layoutSpacing and layoutMargin. layoutSpacing, whose value is 6 by default, indicates how much space there should be between the individiual widgets or sublayouts in this layout. The default value of 6 is chosen because that's what Microsoft recommends in its user-interface guidelines.[2] For other platforms, you might want to choose different values. Also, you might have special needs that call for more or less space between the widgets. In these cases, change the layoutSpacing property.
Note that there is a significant difference between the layoutSpacing property and spacers. The layoutSpacing property specifies how much space there must be between two widgets. For example, if you have three widgets in a horizontal box layout, the width that is required for this layout is the widths of all three widgets added together plus two times the value of the layoutSpacing property. There is no way the layout can display itself and its widgets correctly if it gets less than this width. Spacers, on the other hand, take up additional available space that would otherwise go to the widgets. If the container that surrounds our horizontal box layout can provide more horizontal space, then either the widgets take up this space, or, if there are spacers in between them, the spacers take up this space. In the latter case, the space between the widgets will of course be more than the required minimum that is specified by the layoutSpacing property.
The second property, layoutMargin, is less often used; its default is 0. It specifies an additional margin that should be around all the widgets and sublayouts in the layout. After the necessary widths and heights for all the widgets and sublayouts in the layout have been computed, two times this value is added to both the width and the height to get the final necessary width and height of the layout. This property can be used if two sublayouts would otherwise be too close together to look good, but you will really need it very rarely only.
[1] | Don't worry if you do not know what sublayouts are; if you have never programmed layouts by hand, you probably do not want to go into this anyway. |
[2] | Note that this is different from the default you get when you program Qt layouts by hand; there the default is 0, which makes for ugly looking forms if you do not change it. |