C++與QML交互的項(xiàng)目實(shí)踐

更新時(shí)間：2023年09月06日 10:00:10 作者：hsy12342611

本文主要介紹了C++與QML交互的項(xiàng)目實(shí)踐,將詳細(xì)介紹C++與QML的交互方式,包括在QML中調(diào)用C++函數(shù)和在C++中訪問QML元素,具有一定的參考價(jià)值,感興趣的可以了解一下

一. QML中使用C++業(yè)務(wù)類

基本流程如下：

1.將C++注冊(cè)進(jìn)入QML引擎，C++類型在qml中當(dāng)成一個(gè)子組件使用

2.在qml中完成信號(hào)與槽的綁定

測(cè)試代碼：

1.QML定義

main.qml

import QtQuick 2.7
import QtQuick.Window 2.2
import WorkClass 1.0
Window {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    signal qmlSignal1
    signal qmlSignal2(string strValue, int iValue)
    MainForm {
        anchors.fill: parent
        mouseArea.onClicked: {
            Qt.quit();
        }
    }
    MouseArea{
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        onClicked: {
            if(mouse.button === Qt.LeftButton){
                console.log(' Qt.LeftButton')
                bussiness.strValue = "HelloCpp"
                bussiness.intValue = 2022
                bussiness.sendSignal()
            }else{
                console.log(' Qt.RightButton')
                root.qmlSignal1()
                root.qmlSignal2('hesy', 2000)
            }
        }
    }
    //加載子頁(yè)面qrcode.qml
    //Loader {
    //    id:accountQRCode
    //    source:"qrcode.qml"
    //    x:(root.width - root.height / 3) / 2
    //    y:root.height / 3
    //    visible: true
    //}
    CBusiness{
        id: bussiness
        property int addpro: 0
        onIntValueChanged: {
            console.log('qml onIntValueChanged', "begin change addpro ", addpro)
            addpro++
            console.log('qml onIntValueChanged', addpro)
        }
        onAddproChanged: {
            console.log('qml onAddFun', addpro)
        }
    }
    Component.onCompleted: {
        bussiness.onSignal1.connect(function(){console.log('no name qml function')})
        bussiness.onSignal2.connect(qmlProcess1)
        root.qmlSignal1.connect(bussiness.slot1)
        root.qmlSignal2.connect(bussiness.slot2)
        console.log('Component.onCompleted')
    }
    function qmlProcess1(str, value){
        console.log('qmlProcess1', str, value)
    }
}

備注：

另外在qml中也可以使用Connections綁定C++業(yè)務(wù)類函數(shù)和qml中的方法，例如 qrcode.qml，其中target:bussiness代表上面的id: bussiness，這樣main.qml中包含qrcode.qml，實(shí)現(xiàn)了qml之間的調(diào)用，以及多個(gè)qml和C++之間的調(diào)用。

import QtQuick 2.0
Item {
    Image {
        id: qrcode
        sourceSize.width: parent.width
        sourceSize.height: parent.height
        source: ""
    }
    Text {
        id: tips
        x: parent.x
        y: parent.y
        text: qsTr("請(qǐng)掃碼")
        font.pixelSize: 24
        visible: false
    }
    Connections {
        target:bussiness
        onAccountQRCodeGenerated: {
            console.log("onAccountQRCodeGenerated invoke !");
            qrcode.source = "image://qrcode/account"
        }
        onAccountScannedSuccess: {
            console.log("onAccountScannedSuccess invoke!");
            qrcode.visible = false
            tips.visible = true
        }
        onAccountLoginSuccess: {
            console.log("onAccountLoginSuccess invoke !");
            tips.text = qsTr("登錄成功, 歡迎!")
        }
    }
}

C++中通過發(fā)射信號(hào)調(diào)用qml中方法，對(duì)應(yīng)方法名為on+大寫字母開頭函數(shù)

emit accountQRCodeGenerated();
emit accountScannedSuccess();
emit accountLoginSuccess();

2.C++業(yè)務(wù)類定義和實(shí)現(xiàn)

cbusiness.h

#ifndef CBUSINESS_H
#define CBUSINESS_H
#include <QObject>
class CBusiness : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QString strValue READ getStrValue WRITE setStrValue NOTIFY strValueChanged)
    Q_PROPERTY(int intValue READ getIntValue WRITE setIntValue NOTIFY intValueChanged)
public:
    explicit CBusiness(QObject *parent = 0);
    Q_INVOKABLE void sendSignal();
    void setStrValue(QString strValue);
    QString getStrValue() const;
    void setIntValue(int intValue);
    int getIntValue() const;
signals:
    void signal1();
    void signal2(QString strValue, int intValue);
    void strValueChanged(QString strValue);
    void intValueChanged(int intValue);
public slots:
    void slot1();
    void slot2(QString strValue, int intValue);
private:
    //類的屬性
    QString m_strValue;
    int m_intValue;
};
#endif // CBUSINESS_H

cbusiness.cpp

#include "cbusiness.h"
#include <QDebug>
CBusiness::CBusiness(QObject *parent) : QObject(parent), m_strValue(""), m_intValue(0)
{
}
void CBusiness::sendSignal()
{
    qDebug() << "CBusiness::" << __FUNCTION__;
    emit signal1();
    emit signal2(m_strValue, m_intValue);
}
void CBusiness::setStrValue(QString strValue)
{
    qDebug() << "CBusiness::" << __FUNCTION__ << strValue;
    m_strValue = strValue;
    emit strValueChanged(strValue);
    qDebug()<< "CBusiness::" << "emit strValueChanged" << endl;
}
QString CBusiness::getStrValue() const
{
    qDebug() << "CBusiness::" << __FUNCTION__;
    return m_strValue;
}
void CBusiness::setIntValue(int intValue)
{
    qDebug() << "CBusiness::" << __FUNCTION__;
    m_intValue = intValue;
    emit intValueChanged(intValue);
    qDebug()<< "CBusiness::" << "emit intValueChanged";
}
int CBusiness::getIntValue() const
{
    qDebug() << "CBusiness::" << __FUNCTION__;
    return m_intValue;
}
void CBusiness::slot1()
{
    qDebug() << "CBusiness::" << __FUNCTION__;
}
void CBusiness::slot2(QString strValue, int intValue)
{
    qDebug() << "CBusiness::" << __FUNCTION__;
    qDebug() << "CBusiness:: " << strValue << "  " << intValue;
}

3.主調(diào)函數(shù)

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "cbusiness.h"
int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    //qmlRegisterType注冊(cè)C++類型至QML
    //arg1:import時(shí)模塊名
    //arg2:主版本號(hào)
    //arg3:次版本號(hào)
    //arg4:QML類型名
    qmlRegisterType<CBusiness>("WorkClass", 1, 0, "CBusiness");
    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;
    return app.exec();
}

4.測(cè)試結(jié)果

鼠標(biāo)左鍵點(diǎn)擊：

說明：

信號(hào)和槽的綁定在qml中完成，鼠標(biāo)左鍵按下，首先打印：qml: Qt.LeftButton

bussiness.strValue = "HelloCpp" 觸發(fā) CBusiness::setStrValue（

因?yàn)槿缦拢?/p>

Q_PROPERTY(QString strValue READ getStrValue WRITE setStrValue NOTIFY strValueChanged)

此處= "HelloCpp" 其實(shí)是調(diào)用的setStrValue

）調(diào)用

bussiness.intValue = 2022觸發(fā)CBusiness::setIntValue（

因?yàn)槿缦拢?/p>

Q_PROPERTY(int intValue READ getIntValue WRITE setIntValue NOTIFY intValueChanged)

此處= 2022其實(shí)是調(diào)用的setIntValue

）調(diào)用，然后調(diào)用emit strValueChanged(strValue);，觸發(fā)qml中 onIntValueChanged調(diào)用，接著addpro++觸發(fā)onAddproChanged調(diào)用

最后調(diào)用CBusiness::sendSignal()，觸發(fā)emit signal1(); emit signal2(m_strValue, m_intValue);信號(hào)，調(diào)用qml的槽

function(){console.log('no name qml function')

和

function qmlProcess1(str, value)

鼠標(biāo)右鍵點(diǎn)擊：

說明：

鼠標(biāo)右鍵，通過qml信號(hào)調(diào)用到c++的槽函數(shù)，并且還傳遞參數(shù)給c++

二.C++使用QML

基本流程如下：

1.在C++中獲得qml對(duì)象指針

2.在C++中完成信號(hào)和槽的綁定

測(cè)試代碼：

1.QML定義

main.qml

import QtQuick 2.7
import QtQuick.Window 2.2
Item {
    id: root
    visible: true
    width: 640
    height: 480
    //title: qsTr("Hello World")
    property string msg: "I am QML Item"
    signal callCpp(string arg1, string arg2)
    MainForm {
        anchors.fill: parent
        mouseArea.onClicked: {
            Qt.quit();
        }
    }
    Rectangle {
        anchors.fill: parent
        color: "blue"
        objectName: "rect"
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            console.log("onClicked, callCpp")
            root.callCpp(root.msg, "notify cpp")
        }
    }
    onHeightChanged: {
        console.log("onHeightChanged execute")
    }
    onWidthChanged: {
        console.log("onWidthChanged execute")
    }
    //QML中的方法可以被cpp調(diào)用，也可以作為槽函數(shù)
    function qmlFun(val_arg) {
        console.log("qmlFun execute", val_arg, "return qmlFun_return_result")
        return "qmlFun_return_result"
    }
    //注意槽函數(shù)參數(shù)為var類型
    function invokeFromCpp(arg1, arg2) {
        console.log("invokeFromCpp execute ", arg1, arg2)
    }
}

2.C++業(yè)務(wù)類定義和實(shí)現(xiàn)

cbusiness.h

#ifndef CBUSINESS_H
#define CBUSINESS_H
#include <QObject>
class CBusiness : public QObject
{
    Q_OBJECT
public:
    explicit CBusiness(QObject *parent = 0);
signals:
    void callQml(const QVariant &arg1,const QVariant &arg2);
public slots:
    void invokeFromQml(const QString &arg1,const QString &arg2);
};
#endif // CBUSINESS_H

cbusiness.cpp

#include "cbusiness.h"
#include <QDebug>
CBusiness::CBusiness(QObject *parent) : QObject(parent)
{
}
void CBusiness::invokeFromQml(const QString &arg1,const QString &arg2)
{
    qDebug() << "CBusiness::" << __FUNCTION__ << arg1 << arg2;
    qDebug() << "CBusiness::" << __FUNCTION__ << " emit callQml";
    emit callQml("I am cpp", "notify qml");
}

3.主調(diào)函數(shù)

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlProperty>
#include <QQuickView>
#include <QQuickItem>
#include <QMetaObject>
#include <QDebug>
#include "cbusiness.h"
int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);
    /*
    可以用QQmlComponent\QQuickView\QQuickWidget的C++代碼加載QML文檔
    當(dāng)使用QQuickView時(shí)，qml的根不能是Window
    */
    QQuickView view(QUrl("qrc:/main.qml"));
    view.show();
    // 獲取到qml根對(duì)象的指針
    QObject *qmlObj = view.rootObject();
        /*
        修改qml屬性值的方法
        QObject::setProperty()  QQmlProperty  QMetaProperty::write()
        */
    // 通過QObject設(shè)置屬性值
    qDebug() << "cpp: " << "set qml property height";
    QQmlProperty(qmlObj, "height").write(500);  //qmlObj->setProperty("height",500);
    // 通過QObject獲取屬性值
    qDebug() << "cpp: " << "get qml property height" << qmlObj->property("height").toDouble();
    // C++訪問qml的其它屬性
    qDebug() << "cpp: " << "get qml property msg" << qmlObj->property("msg").toString();
    // 獲取QQuickItem
    QQuickItem *item = qobject_cast<QQuickItem*>(qmlObj);
    // 通過QQuickItem設(shè)置屬性值
    qDebug() << "cpp: " << "set qml property width";
    item->setWidth(300);
    // 通過QQuickItem獲取屬性值
    qDebug() << "cpp: " << "get qml property width" << item->width();
    // 通過object name訪問加載的QML對(duì)象
    // QObject::findChildren()可用于查找具有匹配object name屬性的子項(xiàng)
    QObject *qmlRect = qmlObj->findChild<QObject*>("rect");
    if(qmlRect)
    {
        qDebug() << "cpp: " << "get rect color" << qmlRect->property("color");
    }
    // C++調(diào)用QML方法
    QVariant valReturn;
    QVariant valArg = "I am cpp";
    //Q_RETURN_ARG()和Q_Arg()參數(shù)必須制定為QVariant類型
    QMetaObject::invokeMethod(qmlObj, "qmlFun",
                              Q_RETURN_ARG(QVariant,valReturn),
                              Q_ARG(QVariant,valArg));
    qDebug() << "cpp: " << "QMetaObject::invokeMethod result" << valReturn.toString(); //qml函數(shù)中返回“ok”
    CBusiness cppObj;
    // cpp和qml信號(hào)與槽關(guān)聯(lián)
    // qml信號(hào)綁訂cpp的槽，用QString類型
    QObject::connect(qmlObj, SIGNAL(callCpp(QString, QString)), &cppObj, SLOT(invokeFromQml(QString, QString)));
    //關(guān)聯(lián)cpp信號(hào)與qml槽
    // cpp的信號(hào)綁定qml槽，用QVariant類型
    QObject::connect(&cppObj, SIGNAL(callQml(QVariant, QVariant)), qmlObj, SLOT(invokeFromCpp(QVariant, QVariant)));
    return app.exec();
}

4.測(cè)試結(jié)果

信號(hào)和槽的綁定在c++代碼中完成，在c++中可以修改qml的屬性，獲取qml的屬性，調(diào)用qml的方法，傳遞和獲取參數(shù)均可以

鼠標(biāo)點(diǎn)擊

鼠標(biāo)點(diǎn)擊后，通過qml的信號(hào)callCpp調(diào)用c++的槽函數(shù)invokeFromQml，然后再通過c++的信號(hào)函數(shù)callQml調(diào)用qml的槽函數(shù)invokeFromCpp

三.QVariant中方法canConvert和convert使用總結(jié)

1.canConvert只是報(bào)告QVariant進(jìn)行兩個(gè)類型之間轉(zhuǎn)換的能力，例如QString和Int類型之間的轉(zhuǎn)換，關(guān)注類型
2.convert判斷的是QVariant進(jìn)行兩個(gè)類型的數(shù)據(jù)之間轉(zhuǎn)換的能力，例如“123”和123之間的轉(zhuǎn)換，關(guān)注數(shù)據(jù)

舉例：

QString str1 = "Qt5.7.0";
QVariant var1 = str1;
qDebug() << var1.canConvert(QVariant::Int); // true
qDebug() << var1.convert(QVariant::Int); // false
qDebug() << var1.toString(); // "0"
var1 = str1;
qDebug() << var1.convert(QVariant::String); // true
qDebug() << var1.toString(); // "Qt5.7.0"
QString str2 = "789";
QVariant var2 = str2;
qDebug() << var2.canConvert(QVariant::Int); // true
qDebug() << var2.convert(QVariant::Int); // true
qDebug() << var2.toString(); // "789"

到此這篇關(guān)于C++與QML交互的項(xiàng)目實(shí)踐的文章就介紹到這了,更多相關(guān)C++ QML交互內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: