Learn Qt

Teaching Qt® to the world!

Flower

Qt Layouts – The Basics

When designing forms using Qt, you do not place the widgets at static locations. Instead, you place them in layouts. This makes the user interfaces stretchable and allows them to adapt to the current screen and contents.

There are many arguments for using flexible layouts instead of fixed locations – especially if you are planning to use Qt’s cross platform capabilities. Different systems use different fonts and different users prefer different styles.

There are a few common issues that you tend to run into when using fixed locations and sizes. The first example involves a poor translator that needs to work around small widgets by using awkward words. For instance, below, you can see the English word Previous over the Swedish translation Föregående. Let’s just hope for understanding Swedish users – or we can let the button stretch with the text.

Translations that are too large

Translations that are too large.

Another really annoying situation is when the contents of a dialog box simply is too large. For instance, the list of names below. Being able to stretch the dialog and see the full names could really help.

Too large contents.

Too large contents.

So, how do you get started with layouts? First, let’s look at the four basic types of layouts available.

Horizontal layouts simply places the contained widgets next to each other in a horizontal line.

Horizontal layout.

Horizontal layout.

Vertical layouts places the contained widgets over each other in a vertical line.

Vertical layout.

Vertical layout.

Grid layouts lets you place your widgets in a stretchable grid. You can even have widget spanning over several rows and columns.

Grid layout.

Grid layout.

Form layout is used when creating property forms. This is a special case of the grid layout with only two columns. The alignment of the labels as well as the sizing of the actual fields to fill out depends on the platform. For instance, the picture below shows the GTK+ and Plastique style (look at the labels and the size of the QComboBox).

Form layout in GTK+ and Plastique styles.

Form layout in GTK+ and Plastique styles.

You find these four in the Designer toolbar in QtCreator. So, how do you design a form using layouts? I prefer to place the widgets roughly as I want them, then to apply layouts from the inside out. That means, starting with then inner group boxes and frames, working my way out until I finally apply a layout to the form itself.

Let’s look at an example. First, the widgets are placed.

Widgets with rough placement in the form.

Widgets with rough placement in the form.

The next step is to apply a vertical layout to the group box. Simply select the group box in the form and apply the layout using the toolbar button.

The group box has been layed out.

The group box has been laid out.

Then, we apply a grid layout to the dialog. Make sure to stretch the group box to make it wider before selecting the form itself and applying the layout. If you don’t stretch the dialog, it will not span both columns, meaning that you’ll have an empty upper right corner.

The form has been layed out.

The form has been laid out.

As you can tell from the picture above, this does not give us a perfect result. There is one more thing to keep in mind. An important factor that you need to master is the use of spacers (the springs in the widget box). They work just as invisible springs, so they have a big impact on how dialogs stretch.

Let’s break the layout of the form. Simply select the form and click the break layout button in the toolbar. Then we add some springs to the dialog. We need one vertical spring to keep the group box from expanding too much, and one horizontal spring to keep the buttons from growing too wide.

fact-logoDo not use the layouts in the widget box, instead, place widgets on the form and apply layouts. This is usually much easier.

Then we have places the buttons together with the horizontal spring in a horizontal layout (simply drag to select multiple widgets, or press shift and click). Before applying a vertical layout to the entire form.

Springs have been strategicly added.

Springs have been strategicly added.

The result is a stretchable dialog that looks good both small and large.

Small.

Small.

Large.

Large.

There is more to this topic – size policies being the most important factor not mentioned here. We will return to the subject later on. In the mean time, practice on creating dialogs using layouts. It is a craft and you need to practice to master it.

Leave a Reply

You must be logged in to post a comment.