Mixed development of QML and QWidget (preliminary exploration)

Why should we engage in mixed development ？

Qml Has become more and more Qt Mainstream of development , Compared with the QWidget Faster interface development , It's easier to get started , The implementation effect is also better . But old projects are QWidget Framework , It is impossible for everyone to put QWidget Change the project interface to qml, At this time, we can use the newly developed interface qml. It can also be used. qml Do some control supply QWidget use .

QWidget The embedded Qml In several ways

• Qt4 Of QDeclarativeView
  I haven't had much contact with Qt4, In this way, there is no evaluation , Probability is also Qt5 The way of

Qt4 Of QDeclarativeView *view = new QDeclarativeView;
view->setSource(QUrl(QStringLiteral("qrc:/test.qml"));
view->show();

• QWidget::createWindowContainer combination QQuickView
  This way is to load Qml Of window, adopt createWindowContainer Convert to a QWidget, and QWidget As an outer layer widget Child controls ;QQuickView created window As the load qml The window of , This window As createWindowContainer Converted widget .
  This way is more around , And use too much window It will drag down the performance of the program

QuickView *qml_view = new QQuickView();
qml_view->setResizeMode(QQuickView::SizeRootObjectToView);
qml_view->setSource(QUrl("test.qml"));
QWidget *widget_qml_view= QWidget::createWindowContainer(qml_view, nullptr);
ui.verticalLayout->addWidget(widget_qml_view);
qml_view->show();

• QQuickWidget
  This method is very similar to our dynamic creation in code QWidget Widget . It's very convenient and easy to understand . It's also an official way of recommending .

QQuickWidget *qml_widget = new QQuickWidget(ui.widget_qml);
qml_widget->setResizeMode(QQuickWidget::SizeRootObjectToView);
qml_widget->setSource(QUrl("test.qml"));
qml_widget->show();

Something to watch out for

• QuickView and QQuickWidget load qml File widget , The root node cannot be Window, Recommended as Item
• Avoid using QQuickWidget Called when the winId(), May cause rendering problems
• Set up setResizeMode(SizeRootObjectToView) It can make qml Control follows the outer layer widget Change the size of

Final source code

• qml file

import QtQuick 2.3
Rectangle {
    
    color: "gray"
    radius:10
    Image {
    
        id:background_image
        anchors.fill: parent
        fillMode: Image.PreserveAspectCrop 
        source: "http://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
        antialiasing: true
    }
}

• cpp Source code

#include "QtUIDemo.h"
#include <QQuickWidget>
#include <QQmlApplicationEngine>
#include <QQuickView>
QtUIDemo::QtUIDemo(QWidget *parent) : QWidget(parent)
{
    
	ui.setupUi(this);
	// Mode one 
	/* QQuickView *qml_view = new QQuickView(); qml_view->setResizeMode(QQuickView::SizeRootObjectToView); qml_view->setSource(QUrl("test_view.qml")); QWidget *widget = QWidget::createWindowContainer(qml_view, nullptr); ui.verticalLayout->addWidget(widget); qml_view->show(); */
	// Mode two   recommend 
	QQuickWidget *qml_widget = new QQuickWidget();
	qml_widget->setResizeMode(QQuickWidget::SizeRootObjectToView);
	qml_widget->setSource(QUrl("test_view.qml"));
	qml_widget->show();
	ui.verticalLayout->addWidget(qml_widget);
}