Integrating QML Code with Existing Qt UI Code

Integrating with a QWidget-based UI

If you have an existing QWidget-based UI, QML widgets can be integrated into it using QQuickView. QQuickView is a subclass of QWidget so you can add it to your user interface like any other QWidget. Use QQuickView::setSource() to load a QML file into the view, then add the view to your UI:

 QQuickView *qmlView = new QQuickView;
 qmlView->setSource(QUrl::fromLocalFile("myqml.qml"));

 QWidget *widget = myExistingWidget();
 QVBoxLayout *layout = new QVBoxLayout(widget);
 layout->addWidget(qmlView);

The one drawback to this approach is that QQuickView is slower to initialize and uses more memory than a QWidget, and creating large numbers of QQuickView objects may lead to performance degradation. If this is the case, it may be better to rewrite your widgets in QML, and load the widgets from a main QML widget instead of using QQuickView.

Keep in mind that QWidgets were designed for a different type of user interface than QML, so it is not always a good idea to port a QWidget-based application to QML. QWidgets are a better choice if your UI is comprised of a small number of complex and static elements, and QML is a better choice if your UI is comprised of a large number of simple and dynamic elements.

 QGraphicsScene* scene = myExistingGraphicsScene();
 QQmlEngine *engine = new QQmlEngine;
 QQmlComponent component(engine, QUrl::fromLocalFile("myqml.qml"));
 QGraphicsObject *object =
     qobject_cast<QGraphicsObject *>(component.create());
 scene->addItem(object);