How to integrate QML code into existing Widget based project?
-
Hi,
I have an existing Widget baset Project and I want to add a qml based ui element into this project. I tried it but qml window is shown in second window, not in mainwindow.gauge.qml
import QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Controls.Styles 1.4 import QtQuick.Extras 1.4 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") Rectangle { width: 350 height: 350 CircularGauge { id: gauge anchors.fill: parent minimumValue: 0 maximumValue: 300 stepSize: 0.001 value: 132.578 Rectangle { color: "blue" width: parent.width/4+20 height: parent.width/10 x: gauge.width/2-width/2 y: gauge.height/5 z: 0 Text { id:numberText font.family: "Helvetica" font.pointSize: 24 color: "white" text: gauge.value.toLocaleString(Qt.locale("de_DE"), 'f', 3) smooth: true anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right } } style: CircularGaugeStyle { labelInset: outerRadius * 0.15 labelStepSize: gauge.maximumValue/10 minimumValueAngle: -90 maximumValueAngle: 90 minorTickmarkCount: 1 minorTickmarkInset: outerRadius * 0.02 tickmarkLabel: Text { font.pixelSize: Math.max(6, outerRadius * 0.1) text: styleData.value color: styleData.value >= 80 ? "black" : "black" antialiasing: true } needle: Rectangle { y: outerRadius * 0.15 implicitWidth: outerRadius * 0.02 implicitHeight: outerRadius * 0.9 antialiasing: true color: "red" } foreground: Item { Rectangle { width: outerRadius * 0.2 height: width radius: width / 2 color: "red" anchors.centerIn: parent } } } } } }mainwindow.cpp:
#include <QQuickView> ... QQuickView *qmlView = new QQuickView(); qmlView->setSource(QUrl("qrc:/gauge.qml")); QWidget *container = QWidget::createWindowContainer(qmlView, this); ui->horizontalLayoutStatus->addWidget(container); ....pro file:
QT += qml quick -
@kahlenberg said in How to integrate QML code into existing Widget based project?:
Window
Hi,
Use Rectangle or Item instead of Window. Because Window automatically sets up the window for use with QtQuick.Thanks
-
Hi
I was wondering if not
http://doc.qt.io/qt-5/qquickwidget.html
is teh one you want to use ? -
@TobbY
Thanks for reply. I tried Item and Rectangular, but it didn't show anything.@mrjj I tried it, it shows in different window.
This shows in different window:
QQuickWidget *view = new QQuickWidget; view->setSource(QUrl("qrc:/gauge.qml")); view->show();I tried to embed it into a Layout. It didn't show anything.
QQuickWidget *view = new QQuickWidget; view->setSource(QUrl("qrc:/gauge.qml")); ui->horizontalLayoutStatus->addWidget(view); -
Hi
Can you try to give it parent?
QQuickWidget *view = new QQuickWidget(this);
I had no issue with it becoming window.But pay attention to what @TobbY says
Im not 100% sure u can stuff Window {} into
QQuickWidget . not tried it. -
you should make a minimal (not)working example, because I can ensure you, QQuickWidget does work. I'm currently using it.
Also, keep in mind this bug QQuickwidget not show virtual keyboard in ios when using QQuickWidget.
Currently only with a "Somewhat important" priority 😞, So it may stay for a while.
-
Hi,
Please refer this code. it works well for me, maybe you are missing something.QHBoxLayout *layout = new QHBoxLayout(this); QQuickView *qmlView = new QQuickView(); qmlView->setSource(QUrl(QStringLiteral("qrc:/gauge.qml"))); QWidget *container = QWidget::createWindowContainer(qmlView, this); ui->centralWidget->setLayout(layout); layout->addWidget(container);import QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Controls.Styles 1.4 import QtQuick.Extras 1.4 import QtQuick.Controls 1.4 Rectangle { visible: true width: 640 height: 480 //title: qsTr("Hello World") Rectangle { width: 350 height: 350 CircularGauge { id: gauge anchors.fill: parent minimumValue: 0 maximumValue: 300 stepSize: 0.001 value: 132.578 Rectangle { color: "blue" width: parent.width/4+20 height: parent.width/10 x: gauge.width/2-width/2 y: gauge.height/5 z: 0 Text { id:numberText font.family: "Helvetica" font.pointSize: 24 color: "white" text: gauge.value.toLocaleString(Qt.locale("de_DE"), 'f', 3) smooth: true anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right } } style: CircularGaugeStyle { labelInset: outerRadius * 0.15 labelStepSize: gauge.maximumValue/10 minimumValueAngle: -90 maximumValueAngle: 90 minorTickmarkCount: 1 minorTickmarkInset: outerRadius * 0.02 tickmarkLabel: Text { font.pixelSize: Math.max(6, outerRadius * 0.1) text: styleData.value color: styleData.value >= 80 ? "black" : "black" antialiasing: true } needle: Rectangle { y: outerRadius * 0.15 implicitWidth: outerRadius * 0.02 implicitHeight: outerRadius * 0.9 antialiasing: true color: "red" } foreground: Item { Rectangle { width: outerRadius * 0.2 height: width radius: width / 2 color: "red" anchors.centerIn: parent } } } } } }
-
@TobbY
Thanks. It worked but my centralWidget is not empty. I have put some GUI elements such as drop-down menu, buttons, radio buttons using Designer.
If I use the code it shows only gauge, other gui elements are not shown. I want to show the gauge on existing GUI. -
Hello,
Simply add a widget in your MainWindow and assign your QML container like this.
``` QWidget *container = QWidget::createWindowContainer(qmlView, this); QHBoxLayout *layout = new QHBoxLayout(this); ui->widget->setLayout(layout); ui->widget->setGeometry(container->geometry()); layout->addWidget(container);
