QT study notes of QML and C++ (below)

table of Contents

Qml receives C++ object signals

C++ calls Qml object slot function

C++ access Qml object properties

C++ calls Qml object public functions QMetaObject::invokeMethod

C++ receives Qml object signal

Qml receives C++ object signals

• In main.cpp

qmlRegisterType<TestCpp>("com.testcompany.qmlcomponents", 1, 0, "TestCpp");

• Operation function of C++ attribute, plus trigger signal:

• testcpp.cpp

void TestCpp::setNumber(int number)
{
    m_iNumber += number;
    emit numberChanged();
}

• main.qml

import QtQuick 2.12
import QtQuick.Controls 2.5
import com.testcompany.qmlcomponents 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("QmlTest")

    TestCpp{
        id: testcpp
        number: 666
        onNumberChanged: {
            btn1.text = testcpp.number
        }
    }

    Button{
        id: btn1
        width: 120
        height: 50
        anchors.centerIn: parent
        onClicked: {
            text = testcpp.number;
        }
    }

    Button{
        id: btn2
        width: 120
        height: 50
        anchors.top: btn1.bottom
        anchors.margins: 15
        anchors.horizontalCenter: btn1.horizontalCenter
        onClicked:{
            testcpp.setNumber(100)
        }
    }
}

• effect

C++ calls Qml object slot function

• main.cpp
• Use engine.rootContext()->setContextProperty to register the instance object of the C++ class so that the signal slot can be used directly .

TestCpp testcpp;
testcpp.setNumber(12345);
engine.rootContext()->setContextProperty("testcpp", &testcpp);

• Code to create components through QQmlComponent

QObject::connect(&testCpp, SIGNAL(valueChanged()), qmlWindows, SLOT(addData()));

• Examples:
• main.cpp

• TestQml.qml

import QtQuick 2.12
import QtQuick.Controls 2.2
import QtQuick.Window 2.2

Window {
    width: 300
    height: 300
    color: "red"

    function addData(){
        rect.color = "yellow"
    }

    Rectangle{
        id:rect
        objectName:  "rectangle"
        height: 40
        width: 40
        anchors.centerIn: parent
        color: "blue"
    }

}

• main.qml

• The change of the attribute value triggers the valueChanged signal, and the function on the Qml side is triggered to change the color.

C++ access Qml object properties

QObject *qmlRect = qmlTest->findChild<QObject*>("rectangle");
qmlRect->setProperty("color", "pink");                       

C++ calls Qml object public functions QMetaObject::invokeMethod

• C++ directly calls public functions of Qml objects, and QMetaObject::invokeMethod is needed  .
• main.cpp

QMetaObject::invokeMethod(qmlTest, "addData");

• Execute the addData function of qmlTest.

C++ receives Qml object signal

• testcpp.h

public slots:
     void setColor();

• testcpp.cpp

void TestCpp::setColor()
{
    emit numberChanged();
}

• TestQml.qml

import QtQuick 2.12
import QtQuick.Controls 2.2
import QtQuick.Window 2.2

Window {
    width: 300
    height: 300
    color: "red"

    signal numberSignal()

    function addData(){
        rect.color = "pink"
    }

    Rectangle{
        id:rect
        objectName:  "rectangle"
        height: 40
        width: 40
        anchors.centerIn: parent
        color: "blue"
    }

    Button{
        id: button
        width: 120
        height: 50
        anchors.top: rect.bottom
        anchors.margins: 15
        anchors.horizontalCenter: rect.horizontalCenter
        onClicked:{
            emit: numberSignal()
        }
    }
}

• main.cpp

QObject::connect(&testcpp, SIGNAL(numberChanged()), qmlTest, SLOT(addData()));
QObject::connect(qmlTest, SIGNAL(numberSignal()), &testcpp, SLOT(setColor()));

• The valueChanged signal on the Qml side triggers the setColor slot function on the C++ side, and then the setColor slot function triggers the addData public function on the Qml side (which can be understood as a slot function), and then the color value is successfully modified.