How to use images for Qt GUI widgets

Question

I have been working on a Qt application for some time now, and after rewriting a lot of the code, I wanted to give the GUI a lift. So I was looking at GUI designs, and noticed most use images instead of native buttons/scroll bars/etc.

My main question is how I could take a native widget, say a push button, and display an image of a push button that has all the functionality of a push button (animated click, signals, slots, etc.). I have seen QML and other ways to do this, but I haven't found a way to do this using regular C++ and Qt.

Answer 1

The simplest way is to use the palette and/or stylesheets to get the appearance you want, or at least close to what you want. That is the way I'd recommend for most uses, honestly.

For buttons, you can do something by inhering from QAbstractButton and having your own images you draw for all the various states. You'd need to figure out the states you want to support, and when to draw them (look at the options passed to paintEvent, for example). This is a little more difficult, but code-wise is fairly simple. Your main problems with this option are generating the images, and that the result is fragile for resizing -- that is, basically, don't allow those buttons to resize. The other drawback is that you would have to do something similar for every widget you want to style, and many of them aren't nearly as simple as buttons.

To go all the way, you can look at QStyle, and how the various styles are implemented. Using those, you can really make any widget appear just how you want it to appear (within the constraints of the size it is drawn in). This is the hardest option by far to understand what to do, and what the options are. Also, the last time I looked, many of the options aren't incredibly well documented for what they do in specific cases, so when I had to make some changes this way it was very much a matter of trial and error.