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.

Any increases in the height of the UI is absorbed by the layouts, as shown below
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

score 8 · Answer 1 · answered Aug 29 '14 at 18:10

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

enter image description here

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

enter image description here

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

5# Add four Horizontal layout

enter image description here

6# Add Button and text and what you need

enter image description here

7# Add Vertical spacers between Horizontal layout

enter image description here

8# Final result:

enter image description here

score 1 · Accepted Answer · edited May 23 '17 at 12:31

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.

edited May 23 '17 at 12:31

Community

1
1

answered Aug 29 '14 at 20:57

NG_

6,895
7
45
67

Thanks. Unfortunately, I don't want the Big Buttons to grow beyond an extent. Is there a way to clamp the height of the big buttons to a maximum value? – Olumide Sep 01 '14 at 09:48
Of course, see updated answer and updated code in repo. – NG_ Sep 01 '14 at 10:07

score 0 · Answer 3 · answered Aug 29 '14 at 17:55

0

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

enter image description here

answered Aug 29 '14 at 17:55

Nejat

31,784
12
106
138

Creating auto-scaling Qt UI using Layouts

3 Answers3