Qml and C++ mixed programming--How to load qml resources in ui interface and access QML object members in C++

C++ ui loading qml interface

It may be that the information I searched is not comprehensive enough, and I did not find the information about nesting the qml interface in the ui interface. After general exploration, I finally understood how to embed the qml interface.
First of all, we need to understand the principle of loading the UI interface. Here we create a vertical layout verticallayout, as shown in the following figure,
Insert picture description here then create a qml file, create a new qrc resource, and then add a qml file, as shown below

Because I created the layout layout, the loading interface needs to use the addWidget property of QVBoxLayout, so I created a new QQuickWidget object

QQuickWidget *qw = new QQuickWidget(this);		//新建QQuickWidget布局
qw->setResizeMode(QQuickWidget::SizeRootObjectToView);		//设置大小，跟随布局大小
qw->setFocus();
qw->setSource(QUrl::fromLocalFile("://qosm.qml"));		//加载QML资源
ui->verticalLayout->addWidget(qw);		//加载布局

In this way, the qml layout is successfully loaded. The official tutorial is not very friendly to novices. It is loaded with QQuickView. Finally, show() is used to display the qml layout. It cannot be embedded in a ui layout according to my own ideas, and QQuickView always pops up two interfaces , Can’t be loaded, maybe I didn’t use it correctly.
Insert picture description here Here I click the button to load the map. The map program is written in qml. You can write other tests at will.

Note: Be careful to load. setSource(QUrl::fromLocalFile("://qosm.qml"));Once the path is less than the load fails, I always fail to load according to the official path, ://qosm.qmlso the success rate is relatively high

C++ read qml object

Follow the official tutorial of C++ and QML interaction

// MyItem.qml
import QtQuick 2.0

Item {
    function myQmlFunction(msg: string) : string {
        console.log("Got message:", msg)
        return "some return value"
    }
}

// main.cpp
QQmlEngine engine;
QQmlComponent component(&engine, "MyItem.qml");
QObject *object = component.create();

QString returnedValue;
QString msg = "Hello from C++";
QMetaObject::invokeMethod(object, "myQmlFunction",
        Q_RETURN_ARG(QString, returnedValue),
        Q_ARG(QString, msg));

qDebug() << "QML function returned:" << returnedValue;
delete object;

The above is the code of the official tutorial, but I loaded qml with ui. I tried to operate it for two days, but we need to understand how C++ builds the qml engine.
First, we need to get the QQmlEngine object, and QQuickWidget can return QQmlEngine Object and QUrl object
Insert picture description here

//获取object对象
QQmlComponent component(qw->engine(),qw->source());
    object = component.create();

Read the function return value by clicking the button
Insert picture description here

to sum up

Knowledge needs to be flexible. It is really confusing to follow the official tutorial at the beginning, but we need to check official documents more and understand the mechanism behind it, so that we can write the code we need according to our needs