Qt World Summit: Submit your Presentation

QQuickView/ QQuickWidget embeded in opacity QWidget

  • Hi! I have problem with rendering QML using QQuickView /QQiuickWidget embeded in QWidget with attribute Qt::WA_TranslucentBackground. Usual widgets behavior is correct. Any ideas?

    Container widget has this:

    setWindowFlags(Qt::FramelessWindowHint | Qt::Tool );

    QML file looking like this:

    import QtQuick 2.0 (or 1.0 for QDeclarativeView)
    Rectangle {
        id: window
        color: "red"

    Working code sample:

    QDeclarativeView *view = new QDeclarativeView(QUrl("qrc:/qml/qmlcontent"));

    Not working code sample:

    QQuickWidget *view = new QQuickWidget(QUrl("qrc:/qml/qmlcontent"));

    One more not working code sample:

    QQuickView *view = new QQuickView();
    QWidget *container = QWidget::createWindowContainer(view,  containerWidget);

  • Moderators

    Hi @xumuk, That I guess is the limitation with both QQuickWidget and createWindowContainer as documented here.

    Putting other widgets underneath and making the QQuickWidget transparent will not lead to the expected results: the widgets underneath will not be visible. This is because in practice the QQuickWidget is drawn before all other regular, non-OpenGL widgets, and so see-through types of solutions are not feasible.

    With QtQuick 1.x it was different. It used the traditional QGraphics* backend. QtQuick 2.x uses Scenegraph based on OpenGL.

  • Please refer here for more information.
    Besides, you may want to try running this example:

  • Thanks a lot for answers! But how to do semitransparent QQuickWidget on Windows/Linux using QML to get similar result like i can do this with:

    QWidget *w = new QWidget;
    w->resize(500, 400);
    QHBoxLayout *layout = new QHBoxLayout(w);
    QWidget *s = new QWidget(w);
    s->setStyleSheet("background-color: rgba(128,128,128,128)");

  • Moderators

    @xumuk As said earlier it is a limitation. But if you still need it you should have a look at the 2nd and 3rd paragraph in the link which I posted earlier. Basically you will have to do this:

    QQuickWidget *wd = new QQuickWidget(this);
    //and the opacity can be set in QML istelf for eg. for a Rectangle
    Rectangle {
        width: 300
        height: 300
        color: "green"
        opacity: 0.5

    If you load this QML in the QQuickWIdget and put a QWidget in background it should be visible.