How to expand widgets with window resize?

Question

I have a simple qt application with a QTabWidget inside the main window. I also have a few QPushButton (s) and QRadioButton (s).

What I want is that when I resize the window either manually or by maximizing/minimizing it should resize the containers in the same way.
In other words, what I want is equivalent of DockStyle.Fill in qt C++

How can I do that ?

Answer 1

In Qt you have to use Layouts :

The Qt layout system provides a simple and powerful way of automatically arranging child widgets within a widget to ensure that they make good use of the available space.

In short, all components in a layout will be relocated to new places after the window, to which the layout belongs, is resized.

---

If you are using deisgner:

1. Click the empty space of a widget to select itself(or a main Window, I use just a base widget here for demonstration), and the layout option will be hightlighted:

2. Choose a desired layout

Here is what object monitor looks like after a QVBoxLayout is used:

If your widget doesn't use layout, it will look like this:

What we have done here is to make the base widget/mainWindow equip a main layout. You can see that the buttons are automatically aligned, when you resize the widget, those component will be relocated according to the layout:

Perhaps you will find it nettlesome of those expanding space, so the next move is to add a Spacer to the layout; so when layout is resized, only the spacer will stretch. (Another option is to make your widgets expandable, see ** at the end of this post)

3. Besides, you can add a layout into another to create a nested layout

For example, first I choose A and B (by pressing Ctrl ) and use QVBoxLayout . This additional layout is not base layout and hence highlighted by red rectangle.

Then I choose C and the layout which contains A & B, and use QHBoxLayout on them,

Finally I use another QVBoxLayout as my main layout on the base widget, just like what we did previously.

And the object monitor:

---

If you like the special feeling of hitting keyboard and always handcraft the code:

For the last example:

QWidget *Form = new QWidget;
QPushButton *pushButton_A = new QPushButton("A");
QPushButton *pushButton_B = new QPushButton("B");
QPushButton *pushButton_C = new QPushButton("C");

QVBoxLayout *verticalLayout = new QVBoxLayout;
QHBoxLayout *horizontalLayout = new QHBoxLayout; 
QVBoxLayout *mainLayout = new QVBoxLayout;

verticalLayout->addWidget(pushButton_A);
verticalLayout->addWidget(pushButton_B);
horizontalLayout->addWidget(pushButton_C);
horizontalLayout->addLayout(verticalLayout);
mainLayout->addLayout(horizontalLayout);

Form->setLayout(mainLayout);
Form->show();

---

In your case

Here is an example of layout:

Notice that QMainWidget has a centralwidget as a base widget. Besides, each tab of QTabWidget has it's own base widget ( tab and tab_2 in the picture) which adopts another base layout.

---

*Don't forget to add Spacer in layouts to shape them as you like.

** You can set size policy on each widget ( QTabWidget , QPushButton etc) to make them horizontally/vertically expandable or fixed, this cooperates with the layout strategy. For example, in the very begin example if we set

• button A to be vertically fixed, horizontally expanding
• button B to be vertically expanding, horizontally expanding
• button C to be vertically expanding, horizontally fixed

It will look like this when resizing:

Answer 2

you need to look into how to use layouts in your application

http://qt-project.org/doc/qt-4.8/layout.html

As a quick and simple first try, in the Designer you can right-click on the main window, and choose "layout" from the drop-down menu. Here you can pick the grid layout, for instance.