Search code examples
c++qtlayoutqt-designerqlayout

QT Designer - How to create a layout

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.

enter image description here

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:

enter image description here

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++?

Solution

  • 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 with QGridLayout 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.