Resizing Window Content in QT and Layout Managers

One of the things that caused me to lose most hair when I started out with QT was resizing windows. It's easy to create a window in QT Creator that the user can resize, but when they make the window bigger, all the contents stay where they were in the top left hand corner. They don't grow with the window.

Just like this:

QT window where contents don't grow

It's All to do With Layout Managers

The first thing to understand, is that by default QT doesn't do anything to the contents when the user resizes a window. If your text edit box was a small area to start with, it will be exactly the same size after the user has resized the containing window, and you'll end up with a small box in the top left hand corner.

And if the user shrinks a window that's large by default, then you may end up with only part of the contents showing.

You overcome this problem by associating a Layout Manager with the container that's getting resized. When you resize a window, this will spring into life, and adjust the position or size of the contents in some (hopefully) sensible way.

Inserting a Layout Manager in QT Creator

If you fire up QT Creator, and edit a .ui file, you'll see a selection of different Layout Managers in the Widget Toolbar. At first glance, you might think all you need to do is pick one of these up, and drop it into the area you want a Layout Manager for.

Sadly, this is completely wrong. I'll come back later to what this actually does, but for the moment just accept that it's the wrong way to do it.

The correct thing to is is to right click on the container you want a Layout Manager for, when you'll see that one of the menu items is "Layout". This sub-menu allows you to associate a Layout Manager with the container, rather than creating a Layout Manager inside the container (more on that later).

Unfortunately there's a good chance that if when you try this you'll find that most of the useful stuff in the sub-menu is grayed out. The reason is that QT Creator won't allow you to associate a Layout Manager with a container until it contains something. So in this case insert the Text Edit area into the window frist (don't worry about the size or location) then right click on the containing area to get the menu up again.

Layout Selection Menu

Now you can choose a Layout Manager (it doesn't matter which one if you only have one item), and you can immediately see that it's doing its job as the Text Edit will suddenly expand to fill the full window.

And if you compile and run the application, you'll now find that the Text Edit area resizes just like you want it to.

So What Are The Layout Managers in the Widget Toolbar For?

If you drop a Layout Manager from the Widget Toolbar into your window, what you're doing is creating a free standing layout area within the container. It will happily manage and resize its contents if you resize it, but by default this will never happen because there isn't anything that will resize the Layout Manager itself.

The point is that this Layout Manager isn't associated with the window that contains it - it's contained by it, just like any other widget. And so you're back to the original problem.

One solution is to associate a Layout Manager with the containing window, which whill then take responsibility for resizing the original (contained) Layout Manager when the size of the window changes. You've now got two nested Layout Managers.

While at first glance this may not appear very useful, it does allow you to create hybrid layouts like the following one:

hybrid layout

An Admission...

The above description confuses windows, and the area inside a window that you can add widgets to, which is called the centralWidget. But that's a topic for another day.

Email questions/comments to notes at embrisk.com.

© Embrisk Ltd. 2012