如何延迟QML中的JavaScript操作

How to delay JavaScript action within QML?

本文关键字：QML 中的 JavaScript 操作 延迟 何延迟      更新时间：2023-09-26

我正在构建一个基于QML的C++应用程序。

简单来说：

在我的主QML文件中，我有一个按钮（矩形），当点击时调用JavaScript函数（在外部JS文件中定义）：

// My JS file linked to the main QML window
[...]
function actionOnButtonClicked()
{
    var x = 0;
    var y = 0;
    for(var i = 0; i < 3; i++)
    {
        createObject(x, y);
        x = x + 10;
        y = y + 10;
    } 
}

正如你所看到的，在这个函数中，我调用n（这里＝3）次另一个JS函数来动态创建几个QML对象以添加到场景中：

function createObject(xPosition, yPosition)
{
    component = Qt.createComponent("Symbol.qml");
    component.createObject(windowApp, {"x": xPosition, "y": yPosition});
}

这很好用但是创建的对象（Symbol）出现在windowApp中，并带有平移动画（大约1秒），我想等待第一个对象的动画完成后再创建第二个对象。。。

由于我们无法在QML中使用setTimeOut（）JavaScript函数，我想知道如何实现这一点。我不知道如何使用QML Timer对象，甚至PauseAnimation。。。

有人知道如何在2个QML JavaScript操作之间添加延迟吗？

我认为这种QML定时器类型可以帮助您实现您想要的。

import QtQuick 2.0
Item {
       Timer {
               interval: 500; running: true; repeat: true
               onTriggered: time.text = Date().toString()
             }
       Text { id: time }
}

您可能只需要通过按钮操作创建一个"Symbol"，并在新对象中的某个事件上触发一个新符号。也许动画结尾触发了一个你可以使用的事件？

已经有一段时间了，我错过了QML。但让我试着提出一个解决方案。如果您在Component.onComlpeted事件中调用translationAnimation.running = true，我想这可能会起作用。我以前发布过一个愚蠢的答案。现在我用一种懒惰/丑陋的方式来代替它。这可能不是正确的方法，尽管这段代码可能有助于您的用例。

CreateObject.js

.pragma library
var objects = null;
var objectCount = 0;
var i = 0;
var mainWin;
var x = 0;
var y = 0;
function calledOnbuttonAction(parentWindow)
{
    if(objects === null)
    {
        mainWin = parentWindow;
        x = 0;
        y = 0;
        objects = new Array();
        createObject(x,y);
    }
    else
    {
        if(x <= mainWin.width)
            x = x + 28;
        else
        {
            x = 0;
            if(y <= mainWin.height)
                y = y + 28;
            else
            {
                console.debug("Exceeded window area!")
                return;
            }
        }
        createObject(x,y);
    }
}
function createObject(xPos, yPos)
{
    i++;
    var component = Qt.createComponent("Object.qml");
    objects[objectCount++] = component.createObject(mainWin, {"x": xPos, "y": yPos});
}

main.qml

import QtQuick 1.1
import "CreateObjects.js" as CreateObject
Rectangle {
    id: mainWindow
    width: 360
    height: 360
    Text {
        text: qsTr("Click inside window")
        anchors.centerIn: parent
        font.pixelSize: 18
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            CreateObject.calledOnbuttonAction(mainWindow); //passing the parent window object
        }
    }
}

Object.qml//您的中的符号

//The Symbol
import QtQuick 1.1
import "CreateObjects.js" as CreateObject
Rectangle {
    id: obj
    width: 25
    height: 25
    gradient: Gradient {
        GradientStop {
            position: 0
            color: "#d11b1b"
        }
        GradientStop {
            position: 1
            color: "#ea4848"
        }
    }
    property alias animationStatus: completedAnimation
    NumberAnimation {
        id: completedAnimation;
        target: obj;
        property: "opacity";
        duration: 800;
        from: 0;
        to: 1.0;
        onRunningChanged: {
            if(!running && CreateObject.i < 900) // Decrease or increase the value according to the number of objects you want to create
            {
                CreateObject.calledOnbuttonAction();
            }
        }
    }
    Component.onCompleted: completedAnimation.running = true;
}
相关文章：