QT Designer - 如何创建布局

Question

I'm new to QT, especially QT Designer and I found it to be quite unintuitive.

I have the following layout which I'm trying to achieve in Qt Designer.

Explication:

• YELLOW -> the application window
• BLUE -> 2 side buttons with the heigh of red heigh and white heigh
• RED -> should be around of 2/3 of the blue heigh
• WHITE -> should also be around 1/3 of blue heigh

---

Layouts:

• REDs -> Lay Out Horizontally
• WHITEs -> Lay Out Horizontally
• REDs + WHITEs -> Lay Out Vertically
• BLUE + (REDs + WHITEs) -> Lay Out Horizontally
• (BLUE + (REDs + WHITEs)) + SPACER -> Lay Out Vertically (because it's needs to be some space between the buttons and the top of application)

---

BUT if I will apply of those which I said above, I'm going to get something like this:

So far as I've search I can use the Lay Out Horizontally in Splitter and Lay Out Horizontally Vertically in Splitter to keep the aspect ratio that I want, but then I can split the app and I don't want that. Can anyone help me to understand how can I do this? Or the only way of doing this would be from C++?

Answer 1

I think what you are looking for is QGridLayout .

In a QGridLayout you can decide for each widget how many rows it will occupy (just drag its borders) and the various "weigths" (parameter is called rowStretch or columnStretch ) of each row/column.

Example: Your layout may be composed as follows:

A big yellow rectangle is the first QGridLayout (1 row x 5 columns), wich contains (left to right):

• Your first Blue element (occupies 1 row and 1 column);
• 3 QGridLayouts in green;
• Your second Blue element (occupies 1 row and 1 column);

The green QGridLayouts (2 rows x 2 columns) are configured this way:

• Your red element (occupies 1 row and 2 columns, and has a rowStretch of 2);
• Your first white element, (occupies 1 row and 1 column, and has a rowStretch of 1);
• Your second white element, (occupies 1 row and 1 column, and has a rowStretch of 1);

This way red and white elements are proportioned 2 to 1 vertically and (since togheter they occupy the same row of the blue ones) the blue height is the sum of red + white.