Design Application with Qt

Question

I have to implement a graphical user interface design. The framework of choice is Qt.

After some work on the implementation a few difficulties and questions turned out. The main point is that there are some fancy design elements with gradients, kind of 3D effects, shadows and so on.

The currently used approach - which I really don't like very much - is to use the bitmaps from the graphic design as Backgrounds of various widgets. This has some very nasty drawbacks according to the placement of the elements and to scalability. This approach generates a fairly static user interface, that is difficult to maintain and adapt.

I would appreciate it to generate all the graphical elements dynamically at runtime using as many default tools from Qt as possible. But I just don't know how to implements such complex visual effects. As an example you can assume the following image.

Question: How would an reasonable approach look like to get results like that below. (I don't want exact solutions, just some pointers, general approaches and best practices.)

Answer 1

You'd be best off using custom widgets and building the effect in the paint event. There's an example here: showing a custom LED widget. There's also some slides here about custom painting and using SVG images within the paint command for widgets: http://saim.pub.ro/ITNQ/L5_Slides_v01.pdf. Using SVGs within the paint command makes it a bit easier instead of using fixed BMP graphics files, as you can use the layout engine then.

Answer 2

Qt 5 offers stylesheets to customize the look of your UI.

Specifically, if you want to stamp a texture onto buttons, have a look at this example. It shows how to use borders to specify areas that should not be stretched.

Answer 3

Another solution is using Qt Style Sheets which allows you to customize your widgets. Check the examples: Qt Style Sheets Examples | QtWidgets 5.3 | Documentation | Qt Project

Here's styles for QPushButton which looks "similar" like button on image. But it may be sufficent for your requiments.

background-color: qradialgradient(spread:pad, cx:0.499807, cy:0.489, radius:0.5, fx:0.499, fy:0.488909, stop:0.0795455 rgba(0, 147, 185, 255), stop:1 rgba(30, 30, 30, 255));
border: 5px solid black;
border-radius: 15px;