Project application with Qt

Question

I need to implement graphical user interface design. The basis of the selection is Qt.

After some work on the implementation, several difficulties and questions arose. The main thing is that there are some fancy design elements with gradients, a variety of 3D effects, shadows, etc.

The current approach, which I really don’t really like, is to use bitmaps from graphic design as the background of various widgets. This has some very unpleasant drawbacks in terms of element placement and scalability. This approach creates a fairly static user interface that is difficult to maintain and adapt.

I would appreciate it to dynamically generate all graphic elements at runtime using as many default tools from Qt as possible. But I just don’t know how to implement such complex visual effects. An example is the following image.

Question: How a reasonable approach will look like the one shown below. (I don't want the exact solutions, just some pointers, general approaches and best practices.)

Answer 1

It’s best to use custom widgets and create an effect in the paint event. Here's an example: showing a custom LED widget . There are also some slides about custom painting and using SVG images in the paint command for widgets: http://saim.pub.ro/ITNQ/L5_Slides_v01.pdf . Using SVG in the paint command simplifies the work instead of using fixed BMP image files, since then you can use the layout mechanism.

Answer 2

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

In particular, if you want to apply texture to the buttons, see this example . It shows how to use borders to indicate areas that should not be stretched.

Answer 3

Another solution is to use Qt style sheets, which allows you to customize your widgets. Check out the examples: Qt Style Examples | QtWidgets 5.3 | Documentation | Qt Project

Here are the styles for QPushButton that look like a button in the image. But that may be enough for your wishes.

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; 

Answer 4

For a detailed description of how to do something similar in QML, see this answer . If you are familiar with QPainter, you can port it to widgets using C ++.