qt - 如何在 qml 中提供 sleep

Question

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

我尝试给它指定一个持续时间:5000，但随后出现错误

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

登录.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:未定义延迟

遗憾的是，更新 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

            })



        }


    }
}