How to position widgets in Qt Creator design mode. Tips and tricks on placing and aligning widgets on a window in a Qt widget based application. Fixed widget position layout and a layout that stretches when the window is resized.
The following image shows the difference between two layouts. On the left is the Hello World application from the previous part of this tutorial series. On the right is the the same window using different layout options. When the window on the right is resized, the widgets resize with it. Widget spacing also automatically changes, stretching the layout to fill the window. This tutorial shows how to make these changes.
More differences can be seen between the two applications when they are resized, as can be seen in the next image. Widgets positioned in fixed places get cut off when the window is made very small. When the window at the right of the image is made small, the widgets shrink with the window and are not cut off.
Part 6 of the Qt Creator C++ Tutorial
Fixed Widget Positioning in Qt Creator
Fixed widget positioning was covered in the simple Hello World program from the previous part of this series. Widgets are simply placed on the main window and moved into place. Refer back to that part of the tutorial series for more information.
Position Widgets in a Flexible Grid in Qt Creator
The following tutorial steps show how to create a new project in Qt Creator and make a flexible layout window.
1. Start a New Qt Creator Project
Create a new project in Qt Creator called position. Delete the default menu bar, tool bar and status bar from the main window. This is covered in the first parts of this tutorial series.
2. Place Widgets on Main Window
2.1 Place a Vertical Layout Widget
Place a Vertical Layout widget in the main window. It is found under the Layouts section of the left pane in Qt Creator
2.2 Place Widgets in Vertical Layout
Place 2 Label widgets and 1 Push Button widget in the Vertical Layout widget that was just placed. We are basically building the same application from the previous part of this tutorial series. This time, however the visible widgets are place in a Vertical Layout container widget.
Your application window should look as follows at this stage.
2.3 Change the Lay Out Setting
Right-click on the main window. In the menu that pops up, move the mouse cursor over the Lay out option at the bottom of the menu. This pops out a sub-menu. Click Lay Out in a Grid on the sub-menu.
The visible widgets are now vertically stacked on a flexible grid.
2.4 Resize the Main Window
Click the main window to select it. Drag one of the blue handles at the edge of the window to resize it to the desired size.
2.5 Middle Align the Text Labels
Click the first widget. Hold down the Ctrl key and then click the second widget. Now find QLabel in the bottom right pane of Qt Creator. Find alignment and then Horizontal under QLabel. Change the Horizontal setting to AlignHCenter.
This places text in both widgets in the center. Using the Ctrl key to select both widgets is just a shortcut to adjust both widget settings at the same time.
3. Complete the Application
The application can now be completed as per the previous part of this tutorial series. Alternatively, just run the application to see that the window is now a flexible layout. Try resizing the window to see the effects of the flexible grid.
The steps for completing the application are as follows. See the previous part of this tutorial series for the details and code.
- Rename the label and button widgets.
- Change the button and label widget text.
- Add a slot for the clicked() signal.
- Add the code to the clicked handler.
Position Widget Tip
When moving or positioning widgets in the main window, it is sometimes easier to select a widget using the top right pane of Qt Creator. This is especially true for widgets such as the Vertical Layout that can only be seen as a box with red border.
All of the widgets that have been placed can be seen in the top right pane of Qt Creator. Click a widget there to select it.