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

问题描述

我已经为“ 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中，我需要像 discovery.deviceFilter（）这样的回调来调用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 ++属性，该属性应该以javascript函数作为参数来执行。？

解决方法

您可以创建一个信号 deviceFilterChanged ，该信号在C ++逻辑的回调中发出。可以在您的QML自定义类型 DeviceDiscovery 中监听此信号，因此您可以在此处编写日志和QML操作。

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

在这里您可以了解如何将信号暴露给QML：Exposing Signals

,

完整示例

devicediscovery.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

main.cpp

#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,"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
    }
}