All About Layout Management

We have already done quite a bit with layout management in the tutorial chapters. Here we will wrap up the missing pieces of information and provide you with an overview of how to use layout management in Qt Designer.

Remember that you use layout management in two steps:

1. Add widgets to your form.

2. Lay out 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 reassign 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 lay out 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 Lay Out menu, the toolbar buttons, or the accelerators (Ctrl-H, Ctrl-L, and Ctrl-G, respectively).

On the other hand, if 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 have Qt Designer create a widget for you. You do this by simply selecting all the widgets that should be laid out and then assigning a layout manager. The rest will be handled internally by Qt 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 managers differ only in their orientation; otherwise, they are identical. Also, the two box layout managers are often used together; for example, it makes for a very natural layout to group some widgets into a few rows, then group these rows into a few columns, then group these columns into even fewer 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 each column can have a different width, all the widgets in one column automatically have 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 total available space or both), you can use spacers to the left and right of the widget that take up the remaining space. Again, the same goes for rows: You can put spacers on top of 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. For example, if you have a data-entry form with a number of vertically arranged line-entry fields that each have a label to the left of 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 laid out the same. On the other hand, if you 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 as 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 are awkward to describe. Therefore, we will not say too much about them here but 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 with 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 far fewer 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 individual 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 has 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 need it very rarely.