qml - Javascript 在 QML 中等待

Question

我在 QML 中有两个 javascript 函数 fun1、fun2，并且想要一个接一个地执行一个 (fun2) (fun1 )已经完成，更准确地说，在fun1中的ImageReader完成后，如何启动fun2()。 ImageReader是通过继承QImageProvider用C++编写的函数，如下:

function fun1(){
    ImageReader.magic(photo);
}
function fun2(){
    myImg.source = ""; 
    myImg.source = "image://ImageReader";
}
fun1();
fun2();

使用场景是我想用C++处理一张图片，处理完成后通过QML Image item来展示。

Answer 1

好吧，我只是想为那些会寻找相同解决方案的人总结一下。

至少有两种方法可以做到这一点:

• 任务完成时从 C++ 对象发出信号。
• 将 JS 函数传递给 C++，任务完成后将调用该函数。

测试 C++ 对象声明:

class MyItem : public QObject
{
    Q_OBJECT

public:
    MyItem(QObject *parent = 0);
    Q_INVOKABLE void someAsyncFunc();
    Q_INVOKABLE void someAnotherAsyncFunc(QJSValue value);

signals:
    void someAsyncFuncFinished();
};

测试 C++ 对象实现:

MyItem::MyItem(QObject *parent) :
QObject(parent) {}

void MyItem::someAsyncFunc()
{
    // do some work here
    emit someAsyncFuncFinished();
}

void MyItem::someAnotherAsyncFunc(QJSValue value) {
    // do some work here
    if (value.isCallable()) {
        value.call();
    }
}

将自定义项目注册为单例:

static QObject *my_singleton_provider(QQmlEngine *engine, QJSEngine *scriptEngine)
{
    Q_UNUSED(engine)
    Q_UNUSED(scriptEngine)
    static MyItem *item = nullptr;
    if(!item)
        item = new MyItem();
    return item;
}

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    qmlRegisterSingletonType<MyItem>("Qt.MyTest", 1, 0, "MyItem", my_singleton_provider);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    return app.exec();
}

还有用于测试它的 QML 文件:

1。任务完成时触发信号

Item {
    id: testItem

    function func1()
    {
        console.log("func1 executing...")
        MyItem.someAsyncFuncFinished.connect(func2);
        MyItem.someAsyncFunc();
    }

    function func2()
    {
        console.log("func2 executing...")
    }

    Component.onCompleted: func1();
}

2。将 JS 函数传递给 C++:

Item {
    id: testItem

    function func1()
    {
        console.log("func1 executing...")
        MyItem.someAnotherAsyncFunc(func2);
    }

    function func2()
    {
        console.log("func2 executing...")
    }

    Component.onCompleted: func1();
}