Using QML with a qt widgets type of ui form?

Question

So I would like to create an Application which looks something like this:

click here

What this application does is, I can select shapes through the combobox on the left and put them on the Area to the right. With the slider I can vary the sizes. The checkboxes select a border or make the shape have a filling color.

My Problem is I would like to create these shapes through using QML, as its relatively easy to create such basic shapes with rectangle, circle etc. ,however I would also like to have the nice interface seen on the left. Is this possible with QML only or do I need to integrate QML into qtwidgets or something like that? I know that there is a slider and a button also present in QML, which look perfectly fine but I would like to have a clear area on the right which indicates to the user where he can create shapes and the ui stuff on the left. What is the correct approach here?

I don't understand the link between the title of the question and what you want to achieve. You can do everything in QML (and then don't bother with QtDesigner ui at all). Or you can embed some QtQuick in a given QWidget of your window, for example using QQuickWidget that you can drag&drop in QtDesigner. — ymoreau

Fryz Fryz · Accepted Answer · 2019-02-28T14:36:33

For the drawing part of your app, using QGraphicsScene https://doc.qt.io/qt-5/qgraphicsscene.html could also be an alternative to stay with Qt Widget instead of mixing it with QML.

But if you want to stick with QML you can look at QQuickView https://doc.qt.io/qt-5/qquickview.html and here is a small example of integration :

#include <QQuickView>
#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    // ..

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

    // some set up if needed
    container->setMinimumSize(1280, 600);
    container->setMaximumSize(1280, 600);
    container->setFocusPolicy(Qt::TabFocus);

    // ..

    view->setSource(QUrl("main.qml"));
    view->setResizeMode(QQuickView::SizeViewToRootObject);

    ui->verticalLayout->addWidget(container);

    // ..

}

Using QML with a qt widgets type of ui form?

2 Answers