Getting spaced out

This section describes the layout management. If you resize the preview window you will then notice that the widgets do not adjust appropriately. They are not resized. To improve things, we need to use a feature in Qt called spacers. Spacers are like virtual springs that push the widgets on each side apart.

Note

Having a good layout is essential for your application as when the strings are translated, they might be longer than the English ones and they need to fit on your widgets. The geometry of the widgets has to be nice if the user resize your window application. Layouts are done by trial and error so use Preview->Preview Form to see the result of your layout management and to achieve the best layout.

The use of spacers and layout management is a skill that is developed through trial and error. The main thing to remember when dealing with spacers is that you work horizontally first and then vertically.

We will first use spacers to center the text in the top box. Resize your label so that it only get the size of the text. Then we add two spacers, one at each side. Choose the 'spring' icon or menu Layout-> Add Spacer. You just each the spacer horizontally. Click the space to the left of the text and the blue spacer will appear (see Picture 14). Repeat the same procedure for the right. Then add a spacer on the right of the 'Generated Signature' label and a last one on the left of the the 'Create!' pushbutton.


Adding the spacers
Picture 14: Adding the spacers

Now that we have spacers to fill blank space, we need a proper layout management. This will allow the widgets to be nicely resized whenever the main window is resized. It is really compulsory to have a good layout management. Again, try to resize several times to see if everything is in place. We can use Vertical or horizontal layout or grid management. The top row of widget is horizontal (spacer + label + spacer) so we need Horizontal management. We need to select the three widgets alltogether: click on the first spring, then click on the label while holding down Shift then on the second spring while holding down Shift. Then click on the Horizontal Layout icon or menu Layout-> Lay Out Horizontally. You will then see a resizable red line around the three objects to indicate that their layout is being managed. Resize the red box if it needs to.

We can now repeat this procedure for the three labels inside the GroupBox, this time using vertical layout management. The same vertical management for the two LineEdit and the ComboBox. It is better to use vertical management to keep the object aligned. If we use horizontal management for each label + text box then they will not stay aligned and equally sized. Horizontal management is needed for the label with the spacer and another one for the two pushbuttons and the spacer.

To finish the layout, we need to let the form look after the laid-out boxes. We put everything in a grid. This is done by right clicking the form and selecting "Lay Out in a Grid" from the menu. The final design with layout lines should resemble something similar to Picture 15.


The complete layout management
Picture 15: The complete layout management