javascript - 如何将 javascript 函数添加到 QML 属性？

Question

我已经为“DeviceDiscovery”类型编写了 C++ 类

class DeviceDiscovery : public QObject
{
    Q_OBJECT
   //HERE I NEED TO ADD A PROPERTY "deviceFilter" so that below client code can execute, I am not sure which property variable I need to add here.
};

然后通过 qmlRegisterType("com.company.Devices" , 1, 0, "DeviceDiscovery"); 注册它

在 QML 中，我需要调用 deviceFilter 属性作为像 discovery.deviceFilter()这样的回调，以便调用 javascript 控制台日志。

 DeviceDiscovery {
        id: discovery
        deviceFilter: function() { console.log("device filter is called")};
 }

//I need to call
MouseArea{
  anchors.fill:parent
  onClicked:discovery.deviceFilter(); //So that above javascript function gets called.
}

有人可以帮我，如何添加一个 C++ PROPERTY，它应该以 javascript 函数作为参数来执行。？

标签： javascriptqtqml

Answer 1

完整示例

设备发现.h

#ifndef DEVICEDISCOVERY_H
#define DEVICEDISCOVERY_H

#include <QObject>
#include <QJSValue>

class DeviceDiscovery : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QJSValue deviceFilter READ  deviceFilter WRITE setDeviceFilter)

    QJSValue m_deviceFilter;

public:
    explicit DeviceDiscovery(QObject *parent = nullptr){}
    //GET METHOS
    QJSValue deviceFilter() const
    {
        return m_deviceFilter;
    }

public slots://SET METHOD
    void setDeviceFilter(QJSValue deviceFilter)//This funciton required to set javascript funciton at construction or run time in QML
    {
        m_deviceFilter = deviceFilter;
    }


};

#endif // DEVICEDISCOVERY_H

主文件

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "devicediscovery.h"

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    qmlRegisterType<DeviceDiscovery>("com.company.Devices" , 1, 0, "DeviceDiscovery");

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import com.company.Devices 1.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    DeviceDiscovery {
           id: discovery
           //default javascript
           deviceFilter: function(numberCount) { console.log("function called with argument")
           console.log(numberCount)};
    }

    Component.onCompleted: {
        discovery.deviceFilter(5)//call with parameter
        //Runtime assignment of new javascript callback.
        discovery.deviceFilter = function() { return console.log("function called with out argument") }
        discovery.deviceFilter()//call without parameter
    }
}