Can't figure out how to control layouts

[LonelyZero]

Hey, folks.

So i've tried to create my own GUI with Qt Designer and run into a problem of not really understanding how to control layouts. That's what i have right now in Designer itself.

Here's anatomy of layouts. I have two vertical ones with combo box/tree widget each on the sides. Then i have grid one with push button, progress bar and spacers on the sides of each one. And all of them are thrown into horizontal layout.

I've tried to play with size policy of progress bar but couldn't achive it getting smaller in width. When i try to shrink layout it's tree widgets that go smaller. I want progress bar to be like half of it's current width. But that's not even the biggest problem. So after finishing with GUI i created headers and cpp files to look at it. It works but a lot of elements are resized and it looks much more disjointed. Here is how it looks after compiling.

I would appreciate even some tutorials where layout control is explained in more detail. If you can explain how i can fix it that would be great too.

P.S. Sorry for folder name, lol.

[ambershark]

@LonelyZero Lol folder name is appropriate for frustrated coding. ;)

So when you say you want it half the width, did you mean height? Is it that big gray box under the OK button? Or do you really want it that height and actually want to squish it width wise?

Either way really what you need is QSpacerItem in your layout to squish it up or on the sides.

Once I understand more I can help you with your layout. They are frustrating to learn when you first start Qt after a while though you'll wonder why you ever thought it was hard to deal with.

Oh and the disjointed look is because of the margins. You can control those on each layout with things like setMargins(0) for all sides, or individually based on needs.

Edit again: looking at it some more it looks like the drop down boxes are sizing bigger which is also contributing to the disjointed look. My guess here is you are trying to do a "traditional" gui and control sizing too much rather than letting Qt and layouts do the sizing for you. It's pretty normal for people new to Qt. I fought layouts a lot when I first learned because I was coming from a windows GUI (MFC) where you didn't have layouts.

[LonelyZero]

@ambershark

Firstly, thanks for replying!

So true, heh.

Yeah, big gray box. And i actually mean width. Like that. Red parts i want to get rid off. And both vertical layouts to come closer.

I actually have spacers. They just have 0 width. Here i changed it to 40. The thing is as you can see they decrease the size of trees and combos and not button/progress bar.

I want to be clear about what i mean when i say disjointed. Those four parts. I'll try changing margins right now.

I've tried to let Designer do all the work but it just didn't look good to me. I mean if not for the spacers that's how button/bar would look like. I wanna have some understanding of what i'm doing here lol.

[ambershark]

@LonelyZero Ok I see, give me a min and I'll write up the code to do what I think you want.

[LonelyZero]

Yeah, i didn't explain correctly what i meant by disjointed. Understood it when changed margins. It changes space between widgets inside layout. I think explanation in my second post should be enough.

[ambershark]

@LonelyZero Ok here we go... I'm not a fan of designer so I tend to design my GUIs in code which is what I did here. You could translate all this to a UI form in designer easily though.

Here is the screenshot:

And here is the code that does it:

MyWindow::MyWindow() : QWidget(nullptr)
{
    resize (800, 600);
    
    // left side tree and combo
    auto vb1 = new QVBoxLayout();
    vb1->addWidget(new QComboBox);
    vb1->addWidget(new QTreeWidget);
    
    // middle button and progress bar
    auto vb2 = new QVBoxLayout();
    auto button = new QPushButton("OK");
    button->setMinimumHeight(60);
    vb2->addWidget(button);
    auto pb = new QProgressBar();
    pb->setOrientation(Qt::Vertical);
    pb->setValue(50);
    pb->setMaximumWidth(80);
    vb2->addWidget(pb);
    
    // horizontal box to control middle section sizing
    auto hbx = new QHBoxLayout();
    hbx->setSizeConstraint(QLayout::SetFixedSize);
    hbx->addLayout(vb2);
    
    // right side tree and combo
    auto vb3 = new QVBoxLayout();
    vb3->addWidget(new QComboBox);
    vb3->addWidget(new QTreeWidget);
    
    // horizontal group holding button bar and left/right trees
    auto hb1 = new QHBoxLayout();
    hb1->addLayout(vb1);
    hb1->addLayout(hbx);
    hb1->addLayout(vb3);
    
    // setup bottom group box and label
    auto vbx = new QVBoxLayout();
    vbx->addLayout(hb1);
    auto gb = new QGroupBox();
    gb->setTitle("Testing");
    auto vblabel = new QVBoxLayout();
    vblabel->addWidget(new QLabel("something"));
    gb->setLayout(vblabel);
    vbx->addWidget(gb);
    
    setLayout(vbx);
}

[ambershark]

@LonelyZero Oh and that middle part will stay that size as you resize the window, so the trees on the left and right will grow but the middle stays static sized.

[LonelyZero]

@ambershark

Thanks a lot! I'll look it over in couple hours.

[LonelyZero]

@ambershark

So i've gone through your code and tried to change everything in a similar way for Designer. Thanks to minimum and maximum sizes i actually got rid off all the stretches. The thing that didn't change was progress bar weird position. So i actually used horizontal spacers and grid layout instead of vertical one to place progress and button to where i want them. Only thing that's weird now is when i try to make push/progress high enough to be similar to widget/combo parts it moves down. I'll probably leave it that way for now because it's not a big deal and i really should move on. Thanks for the help.

Interesting though i probably did every change that was needed to copy your code and it still didn't work as well as yours. I'll go into it in my free time. It's a) me messing something up b) code working in some way differently than Designer c) order of commands playing some role because of course i didn't copy order of your commands.

[ambershark]

@LonelyZero Nice. As long as it's working well enough for you then I wouldn't worry about it too much.

The sizing thing we could fix fairly easily if it bugs you.

As for trying to do what I did with code in the designer ... now you know why I just prefer to do it in code. Designer is always a fight for me. If you really want to see it in designer I can do it and share the .ui here for you to load up and check out.

Also, I find sometimes (a lot even) the preview in designer does not match the compiled and run code. Which makes it really hard to get sizing and such right. Of course then you have to deal with different looks on different platforms too. So it's always better to run it outside of designer just to check.