QStyle Class

  • Header: QStyle

  • CMake:

    find_package(Qt6 REQUIRED COMPONENTS Widgets)

    target_link_libraries(mytarget PRIVATE Qt6::Widgets)

  • qmake: QT += widgets

  • Inherits: QObject

  • Inherited By: QCommonStyle

  • Group: QStyle is part of appearance

Detailed Description

Qt contains a set of QStyle subclasses that emulate the styles of the different platforms supported by Qt (QWindowsStyle, QMacStyle etc.). By default, these styles are built into the Qt GUI module. Styles can also be made available as plugins.

Qt's built-in widgets use QStyle to perform nearly all of their drawing, ensuring that they look exactly like the equivalent native widgets. The diagram below shows a QComboBox in nine different styles.

Nine combo boxes

Topics:

Setting a Style

The style of the entire application can be set using the QApplication::setStyle() function. It can also be specified by the user of the application, using the -style command-line option:

 
Sélectionnez
./myapplication -style windows

If no style is specified, Qt will choose the most appropriate style for the user's platform or desktop environment.

A style can also be set on an individual widget using the QWidget::setStyle() function.

Developing Style-Aware Custom Widgets

If you are developing custom widgets and want them to look good on all platforms, you can use QStyle functions to perform parts of the widget drawing, such as drawItemText(), drawItemPixmap(), drawPrimitive(), drawControl(), and drawComplexControl().

Most QStyle draw functions take four arguments:

  • an enum value specifying which graphical element to draw

  • a QStyleOption specifying how and where to render that element

  • a QPainter that should be used to draw the element

  • a QWidget on which the drawing is performed (optional)

For example, if you want to draw a focus rectangle on your widget, you can write:

 
Sélectionnez
void MyWidget::paintEvent(QPaintEvent * /* event */)
{
    QPainter painter(this);

    QStyleOptionFocusRect option;
    option.initFrom(this);
    option.backgroundColor = palette().color(QPalette::Background);

    style()->drawPrimitive(QStyle::PE_FrameFocusRect, &option, &painter, this);
}

QStyle gets all the information it needs to render the graphical element from QStyleOption. The widget is passed as the last argument in case the style needs it to perform special effects (such as animated default buttons on macOS), but it isn't mandatory. In fact, you can use QStyle to draw on any paint device, not just widgets, by setting the QPainter properly.

QStyleOption has various subclasses for the various types of graphical elements that can be drawn. For example, PE_FrameFocusRect expects a QStyleOptionFocusRect argument.

To ensure that drawing operations are as fast as possible, QStyleOption and its subclasses have public data members. See the QStyleOption class documentation for details on how to use it.

For convenience, Qt provides the QStylePainter class, which combines a QStyle, a QPainter, and a QWidget. This makes it possible to write

 
Sélectionnez
    QStylePainter painter(this);
    ...
    painter.drawPrimitive(QStyle::PE_FrameFocusRect, option);

instead of

 
Sélectionnez
    QPainter painter(this);
    ...
    style()->drawPrimitive(QStyle::PE_FrameFocusRect, &option, &painter, this);

Creating a Custom Style

You can create a custom look and feel for your application by creating a custom style. There are two approaches to creating a custom style. In the static approach, you either choose an existing QStyle class, subclass it, and reimplement virtual functions to provide the custom behavior, or you create an entire QStyle class from scratch. In the dynamic approach, you modify the behavior of your system style at runtime. The static approach is described below. The dynamic approach is described in QProxyStyle.

The first step in the static approach is to pick one of the styles provided by Qt from which you will build your custom style. Your choice of QStyle class will depend on which style resembles your desired style the most. The most general class that you can use as a base is QCommonStyle (not QStyle). This is because Qt requires its styles to be QCommonStyles.

Depending on which parts of the base style you want to change, you must reimplement the functions that are used to draw those parts of the interface. To illustrate this, we will modify the look of the spin box arrows drawn by QWindowsStyle. The arrows are primitive elements that are drawn by the drawPrimitive() function, so we need to reimplement that function. We need the following class declaration:

 
Sélectionnez
class CustomStyle : public QProxyStyle
{
    Q_OBJECT

public:
    CustomStyle(const QWidget *widget);
    ~CustomStyle() {}

    void drawPrimitive(PrimitiveElement element, const QStyleOption *option,
                       QPainter *painter, const QWidget *widget) const override;
};

To draw its up and down arrows, QSpinBox uses the PE_IndicatorSpinUp and PE_IndicatorSpinDown primitive elements. Here's how to reimplement the drawPrimitive() function to draw them differently:

 
Sélectionnez
void CustomStyle::drawPrimitive(PrimitiveElement element, const QStyleOption *option,
                                QPainter *painter, const QWidget *widget) const
{
    if (element == PE_IndicatorSpinUp || element == PE_IndicatorSpinDown) {
        QPolygon points(3);
        int x = option->rect.x();
        int y = option->rect.y();
        int w = option->rect.width() / 2;
        int h = option->rect.height() / 2;
        x += (option->rect.width() - w) / 2;
        y += (option->rect.height() - h) / 2;

        if (element == PE_IndicatorSpinUp) {
            points[0] = QPoint(x, y + h);
            points[1] = QPoint(x + w, y + h);
            points[2] = QPoint(x + w / 2, y);
        } else { // PE_SpinBoxDown
            points[0] = QPoint(x, y);
            points[1] = QPoint(x + w, y);
            points[2] = QPoint(x + w / 2, y + h);
        }

        if (option->state & State_Enabled) {
            painter->setPen(option->palette.mid().color());
            painter->setBrush(option->palette.buttonText());
        } else {
            painter->setPen(option->palette.buttonText().color());
            painter->setBrush(option->palette.mid());
        }
        painter->drawPolygon(points);
    } else {
    QProxyStyle::drawPrimitive(element, option, painter, widget);
    }
}

Notice that we don't use the widget argument, except to pass it on to the QWindowStyle::drawPrimitive() function. As mentioned earlier, the information about what is to be drawn and how it should be drawn is specified by a QStyleOption object, so there is no need to ask the widget.

If you need to use the widget argument to obtain additional information, be careful to ensure that it isn't 0 and that it is of the correct type before using it. For example:

 
Sélectionnez
    const QSpinBox *spinBox = qobject_cast<const QSpinBox *>(widget);
    if (spinBox) {
    ...
    }

When implementing a custom style, you cannot assume that the widget is a QSpinBox just because the enum value is called PE_IndicatorSpinUp or PE_IndicatorSpinDown.

The documentation for the Styles example covers this topic in more detail.

Qt style sheets are currently not supported for custom QStyle subclasses. We plan to address this in some future release.