Creating "pretty" Qt Custom Widgets

Question

What is the process behind making custom widgets (using Qt) that don't look...well...ugly?

I know it is fairly trivial to make a "custom widget" that has say, a listbox and a pushbutton slapped together into one, but how would I go about making something that looks more like this:

QAnalogWidgets

I have made some rough mock-ups that basically use a PNG background (that I made in Photoshop) with basic elements like QLabels placed on top of them, but I don't think this is how I should be doing it. I know that Qt supports CSS -- is this what people use to create widgets that actually look good? Do I need to be working in the paintEvent methods? OpenGL?

Trying to search for anything "custom widget qt" related is just giving me tons of info about how to import them into the Designer, etc -- so any leads would be appreciated.

Thanks!

Answer 1

There's basically three different things to try, in the order listed:

1. CSS / stylesheets. Stylesheets, when sufficiently powerful for your needs, are great and allow for runtime style changes. See the stylesheet examples.
2. Custom painting. You can do virtually anything you want with custom painting. Qt's support for PNGs and SVGs should help a lot. You'll want to take a look at the painting examples. Also, take a look at the QStyle documentation to understand what kinds of style information you should consider.
3. Custom styles. If you need to customize the whole application, you might be better off creating your own style. Not for the faint of heart.

Basically, go with the easiest possible solution that will work for you. Also, take a look at Qt Creator, it's nicely styled and all the source code is available.

Answer 2

Here is a tutorial to create custom Window by removing System top bar and drawing the bacground : http://qt.developpez.com/tutoriels/braindeadbzh/customwindow/.

Since he is sub-classing a QWidget, you can do this for all QWidget subclass like QPushButton).

When You want to use them in QTDesigner, just include your class and then promote a "classic" widget to your custom one. This can be helpful: http://pepper.troll.no/s60prereleases/doc/designer-using-custom-widgets.html.