如何在qml中睡眠

Question

当我现在按下按钮时，它会立即转到下一页。可以让这个 loading.gif 睡眠 5 秒吗？

我试图给它一个duration: 5000但是它给出了一个错误

----完整代码已更新----

Login.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.15

Component
{
    Rectangle
    {
    
        Rectangle
        {
            anchors.fill: parent

            // Timer for Creating delay
            Timer 
            {
                id: timer
            }

            function delay(delayTime,cb) 
            {
                timer.interval = delayTime;
                timer.repeat = false;
                timer.triggered.connect(cb);
                timer.start();
            }

        ColumnLayout 
        {
            // Some other items.

            Button
            {
                onClicked:
                {
                    backend.inloggen(email.text, wachtwoord.text, dropdown.currentText)

                    delay(5000, function() 
                    {
                        loading_container.visible = true 
                    })

                    stack.push(btnHomepage) 
                }
            }
    
            Rectangle
            {
                id: loading_container
                visible: false

                AnimatedImage
                {
                    source: "./images/loading.gif"
                }
            }
        }
        }
    }
}

错误：Login.qml:170: ReferenceError: delay is not defined

遗憾的是更新 QtQuick nad QtQuick.controls 更新不是解决方案

Answer 1

您可以使用 Timer 创建延迟，这是您的代码，我添加了一个创建延迟的函数，它获得持续时间，如 5000 表示 5 秒，以及一个将连接到计时器的函数。这个函数就像一个单发。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    // Timer for Creating delay
    Timer {
        id: timer
    }
    function delay(delayTime,cb) {
        timer.interval = delayTime;
        timer.repeat = false;
        timer.triggered.connect(cb);
        timer.start();
    }
    Rectangle
    {
        id: loading_container
        anchors.fill: parent
        color: "#d71616"
        anchors.rightMargin: 0
        anchors.bottomMargin: 0
        anchors.leftMargin: 0
        anchors.topMargin: 60
        visible: false


    }

    Button {
        id: button
        x: 0
        y: 0
        width: 151
        height: 62
        text: qsTr("Click me ")

        onClicked:
        {

            delay(5000, function() {

                loading_container.visible = true

            })



        }


    }
}

Answer 2

当你更新问题时，试试这个：

Component 封装了具有明确接口的 QML 类型。

你的使用方式不对

你在程序中使用函数的方式也是错误的。

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Item {
    width: 640
    height: 480

    Timer
    {
        id: timer
    }

    function delay(delayTime,cb)
    {
        timer.interval = delayTime;
        timer.repeat = false;
        timer.triggered.connect(cb);
        timer.start();
    }


            Rectangle
            {
                anchors.fill: parent

                // Timer for Creating delay


//            ColumnLayout
//            {
                // Some other items.

                Button
                {
                    onClicked:
                    {
//                        backend.inloggen(email.text, wachtwoord.text, dropdown.currentText)

                        delay(5000, function()
                        {
                            loading_container.visible = true
                        })

//                        stack.push(btnHomepage)
                    }
                }

                Rectangle
                {
                    id: loading_container
                    visible: false

                    AnimatedImage
                    {
                        source: "what ever is your source path"
                    }
                }
            }
//    }
}

Answer 3

在您的代码中，按钮无法访问延迟功能，因此您会收到参考错误只需将功能移动到根项中的按钮和计时器

如何在qml中睡眠

How to give sleep in qml

qml