Monday, August 26, 2013

Tutorial: Adjustable UI with QSplitters

Monterey version 3.0 now has an adjustable UI!  Not only is the window itself able to be scaled, but now you can apportion the UI how you'd like.  If you want, you can make the graphs taller or shorter (even hide them), and you can adjust the widths of both side panels.  Upon closing, Monterey saves your window geometry so when you open it again, the UI is setup the way you like.

Here are the relevant pieces of code:
As you can see, it's all pretty simple and easy to do.  The default values are set using QSplitter::setStretchFactor(int index, int value), which uses the relative weight of each stretch factor to adjust the sizes.

Thanks for stopping by,

Chris Konstad


  1. Stretch factors are very, very important to master when designing flexible UI's. You'll find really quickly that using splitters is really hard if you don't understand them. Also, just a tip, but when saving state of widgets, sometimes a foreach loop that uses all the splitters in the UI is way easier. You can use the object name as the key right from the pointer.

  2. I learned that the hard way today while banging my head against my desk when my UI was all messed up. XD Yeah, that foreach loop trick is handy. I probably should have done it that way to make it easy to add more QSplitters later. This is my first attempt to make a really user-adjustable UI.

    1. It's a lot more important when you have, say, 8-10 splitters. It just reduces the code bloat immensely. The disadvantage is that you have less control, mainly in the area around the object naming. If you change the name, the key cannot be manually updated.