Application Layout

Orangeatang

Hi there,

I've just started using Qt, and am having trouble setting up the main application window so that everything scales correctly.

What I'm after is two tab widgets, one which takes up around 1/3 of the width (100% of height), and the other fills in the rest of the width. Something like this :

!http://i.imgur.com/60C9LwI.png(layout)!

Assigning a layout (grid/form etc) to those widgets messes with the relative size ratios (a grid layout will make them take up 50% of the width each, 100% of height and I can't figure out how to modify the column widths).

Any pointers on how I set up the layout that I'm after?

Thanks!

sierdzio

GridLayout is a good approach. You just need to tweak it a bit. When you apply a grid layout in the designer, it tries to automatically guess, which widgets should go where, and how much space should they occupy.

Now, the grid is comprised of columns and rows. In your case, the designer realizes that there are just 2, horizontally placed widgets, so it will create 2 columns and one row, and place your tab widgets inside.

In order to get your desired result, you need a different grid: one with 3 columns, where the widget of the left occupies one column, and the other widget occupies 2 columns. Or at least I think it should work that way ;-) Maybe the difference will be optimized out at runtime. You need to check.

Now, how to create 3 columns instead of 2? Quite easy in code, but let's try making it in the designer. Just to fool the designer, add a third widget (say, a QPushButton, or QLabel: does not matter), and place it at bottom - right side. Create your layout, then grab your second tab widget, and extent it into the third column. Once this is done, you can delete the dummy push button.

If you want a totally different approach, then please take a look at QSplitter: it will aloow you to dynamically change the size, even at runtime.

Orangeatang

Hey thanks for the quick reply!

I created a third widget (push button) for the third column, but I can't seem to extend the second widget in to that column... only re-arrange which columns the widgets appear in (this is for the grid layout)

!http://i.imgur.com/CBjPDtu.png(Layout)!

sierdzio

Move the push button down, so that is creates a second row. Then you will be able to extent the tab widget (same way as you change window size: grab the right-hand side, and move to the right).

Orangeatang

sorry, linked to the wrong image

!http://i.imgur.com/IVv5aYN.png()!

The right hand side resize controls don't seem to have any effect on the tab widget... remains fixed in the second column. Do I have to modify the size policy at all?

sierdzio

Do you see that navy-blue box on the right side of your tab widget (previous picture), the one in the middle? You need to grab this one.

There is no need to change widget size policy for this to work.

Orangeatang

yeah absolutely, it's the navy-blue box I'm trying to use to expand the widget... I get a double arrow icon when I'm trying to expand it - but it doesn't seem to do anything :

!http://i.imgur.com/msbL2GK.png(manipulation)!

Orangeatang

Managed to get it working - must be a bug with the TabWidget.

Morphing the tab widget in to a ToolBox, making the modifications and then morphing back seems to have worked.

Thanks for your help!

sierdzio

Hm, maybe. Anyway, it is good that it worked.

You can also manage this on the c++ side wiith either stretch or column span: