How to give sleep in qml

Question

When I press the button now it instantly goes to the next page. Is it possible to give this loading.gif a sleep of 5 seconds?

I have tried to give it a duration: 5000 but then it gives an error

---- FULL CODE UPDATED ----

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"
                }
            }
        }
        }
    }
}

Error: Login.qml:170: ReferenceError: delay is not defined

Sadly updating the the QtQuick nad QtQuick.controls update wasn't the solution

user_9484913 · Answer

you can create delays by using Timer here is your code, I add one function that creates delay it gets duration like 5000 means 5 seconds, and one function that will be connected to Timer. This function acts like a singleshot.

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

            })



        }


    }
}

user_9484913 · Answer

As you update the question, Try this :

Component encapsulated QML types with well-defined interfaces.

the way that you use it is wrong.

The way that you use Function in your program is also wrong.

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"
                    }
                }
            }
//    }
}

user_14707880 · Answer

In your code, the button doesn't have access to the Delay function, hence the reference error you get Simply move the function to the button and the Timer in the root item

How to give sleep in qml

3 Answers