Show QQuickWidget inside QGraphicsScene

Question

I was upgrading some old code that was working fine to display my qml files inside a QGraphicsScene, but I was using the QDeclarativeView + QGraphicsProxyWidget method, so I converted to the new QT 6.5 / qtquick 2 format using QQuickWidget.

OLD CODE (QT 4.8 / qt quick 1) - Working fine

    QGraphicsScene scene;
    QML_view = new QDeclarativeView;
    QDeclarativeContext *context = QML_view->rootContext();
    context->setContextProperty( "Vars_list", QVariant::fromValue( dataList ) );
    QML_view->rootContext()->setContextProperty( "myObject", this );
    QML_view->setSource( QUrl( "myqmlfile.qml" ) );

    QGraphicsProxyWidget *proxy = scene.addWidget( QML_view );
    proxy->setZValue( 10 );

NEW CODE (QT 6.5 / qt quick 1)

    QGraphicsScene scene;
    QQuickWidget *QML_widget = new QQuickWidget();
    QQmlContext* context = QML_widget->rootContext();
    context->setContextProperty( "Vars_list", QVariant::fromValue( dataList ) );
    QML_widget->rootContext()->setContextProperty( "myObject", this );
    QML_widget->setSource( QUrl( "myqmlfile.qml" ) );

    scene.addWidget( QML_widget );

The qml shows up ok but all the qml buttons are unresponsive, and any existing buttons I may have on my QGraphicsScene show up on top of the qml display too.

So I tried another way replacing scene.addWidget( QML_widget ) with QML_widget->show(). The qml file now works as supposed, but as I was expecting I now have a second separate window opened on the taskbar which I don't want. Any clues about what's the best approach here to fix this issue?

score 1 · Answer 1 · answered Apr 16 '23 at 21:43

I'm using Qt 6.5.0 and QtQuick.Controls 6.5 everything works fine. As per this page it says QtQuick.Controls 1 is deprecated.

Warning: The Qt Quick Controls 1 module is deprecated since Qt 5.12. Use the latest Qt Quick Controls module instead.

The buttons in my Main.qml are responsive and output the desired console message. Also the QML widget is on top of the QPushButton if I use the line proxy->setZValue(10); same as you did in your Qt 4.8 example code.

main.cpp

#include <QApplication>
#include <QGraphicsProxyWidget>
#include <QGraphicsScene>
#include <QGraphicsView>
#include <QPushButton>
#include <QQmlApplicationEngine>
#include <QQuickWidget>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    const QUrl url(u"qrc:/untitled15/Main.qml"_qs);

    QGraphicsScene scene;

    QQuickWidget *quickWidget = new QQuickWidget();
    quickWidget->setSource(url);

    QGraphicsProxyWidget *proxy = scene.addWidget(quickWidget);
    proxy->setZValue(10);

    QPushButton *button = new QPushButton("Button");
    scene.addWidget(button);

    QGraphicsView view(&scene);
    view.setWindowTitle("Hello World");
    view.resize(800, 600);
    view.show();

    return app.exec();
}

Main.qml

import QtQuick
import QtQuick.Controls

Item {
    width: 400
    height: 300

    Column {
        anchors.centerIn: parent

        Text {
            text: "Hello from QML"
            color: "red"
        }

        Button {
            text: "Button #0"
            onPressed: console.log("pressed", text)
        }
        Button {
            text: "Button #1"
            onPressed: console.log("pressed", text)
        }
        Button {
            text: "Button #2"
            onPressed: console.log("pressed", text)
        }
    }
}

Show QQuickWidget inside QGraphicsScene

1 Answers1