Creating auto-scaling Qt UI using Layouts

Question

I'd appreciate advise on to how create a Qt UI consisting of four layouts and has the following properties.

1. Any increases in the height of the UI is absorbed by the layouts, as shown below

2. Any further decreases in the height of the UI is absorbed by the contents of a specific layout, e.g. the two large buttons as shown below

Answer 1

I prepared quick code what fits your problem, please take a look: https://github.com/troyane/StackOverflow-pro/tree/master/creating-auto-scaling-qt-ui-using-layouts

Grab that code and take a look at next moments (you can open mainwindow.ui in QtCreator):

• centralWidget has next layoutStretch param: 1,2,1,1 -- it means, that we'll have next correlation among all items placed into this vertical layout.
• TextLabel and both SmallButtons has Fixed VerticalPolicy
• Both BigButtons has Minimum vertical policy and set minimumSize's Height to 100. UPD: Also maximumSize->height parameter is 250 px. So, it is guarantee that both BigButtons will not grow more than 250 px on height.

Take a look at another answer, there you can find lots of literature to read about Layouts.

Answer 2

1# Create new UI form base on QWidget: File -> New file or project -> Qt -> Qt Designer form class -> select Widget form templates, next, next, select project and finish

2# Add Vertical layout from left bar

3# After that click right somewhere on UI form, where is not just added layout, "Lay out" -> "Lay out in a grid"

4# You can adjust layout margin on right menu (I'm always setting 5 points)

5# Add four Horizontal layout

6# Add Button and text and what you need

7# Add Vertical spacers between Horizontal layout

8# Final result:

Answer 3

You can put two vertical spacers in each layout. One should be placed at top most and the other one at the bottom :