Как отложить действие JavaScript в QML?

Я создаю приложение C ++ на основе QML.

Чтобы было проще:

В моем основном файле 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});
}

Это нормально работает. Но созданный объект (символ) появляется в окне приложения с анимацией перевода (около 1 секунды), и я хотел бы дождаться завершения анимации первого объекта, прежде чем создавать второй ...

Поскольку мы не можем использовать функцию JavaScript setTimeOut () в QML, мне интересно, как я мог этого добиться. Я не понимаю, как я могу использовать объект QML Timer или даже PauseAnimation ...

Кто-нибудь знает, как добавить задержку между двумя операциями QML JavaScript?


c++ javascript qt qml qt-quick
person Benoit    schedule 11.07.2012    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Я думаю, что этот тип таймера QML может помочь вам достичь того, что вы хотеть.

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

       Text { id: time }
}
person Redanium    schedule 15.07.2016

arrow_upward
0
arrow_downward

Вероятно, вы могли бы сделать это так, чтобы вы создали только один «Символ» из действия кнопки и запускали новый символ при каком-либо событии в новом объекте. Возможно, окончание анимации запускает событие, которое вы могли бы использовать?

person onion    schedule 12.07.2012
comment
Привет, спасибо за помощь. действительно, я мог дождаться завершения анимации, вставив scriptAction в конце. Однако функция, которую я хочу вызвать после создания символа, может отличаться в процессе выполнения программы, и это нарушит мои начальные шаги (выполняемые в функции actionOnButtonClicked ()). Обратите внимание, что в моем примере кода я намеренно использовал for для создания нескольких объектов в этой функции с целью упрощения, но эта функция фактически выполняет несколько операций между созданием разных объектов ... - person Benoit; 12.07.2012

arrow_upward
0
arrow_downward

Давно я скучал по QML. Но позвольте мне предложить решение. Я думаю, это может сработать, если вы вызываете это translationAnimation.running = true в Component.onComlpeted событии. Я уже публиковал глупый ответ раньше. Теперь я заменяю его ленивым / уродливым способом сделать это. Вероятно, это неправильный способ сделать это, хотя этот код может помочь в вашем случае использования.

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;

}
person RajaRaviVarma    schedule 13.07.2012