CODEWITHSUNDEEP
qtqmlqt5
JustWe
JustWe

Reputation: 4484

How to make visible property work immediately in QML?

Demo:

Window {
    visible: true
    width: 640
    height: 480

    Component.onCompleted: {
        test.visible = true // 1. Show rect
        for(var i = 0; i < 5000000000; i++){var t = i * i} // 2. Slow process, Sleep here
    }

    Rectangle {
        id: test
        color: "red"
        width: 100; height: 100
        visible: false
    }
}

The visible property works when function completed. In the demo, the test rectangle couldn't show at the moment after 1., have to wait until function finished.

I understand it should cause by the process blocks rendering. But is there any trick to solve this problem?

Upvotes: 1

Views: 2675

Answers (1)

eyllanesc
eyllanesc

Reputation: 243975

The heavy tasks should not be executed in the GUI thread, but in another thread so that they do not get blocked. QML offers to WorkerScript, this allows you to execute tasks in another thread:

slow_process.js

WorkerScript.onMessage = function() {
    for(var i = 0; i < 5000000000; i++){
        var t = i * i
        console.log(t)
    }
}

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480

    Component.onCompleted: {
        test.visible = true // 1. Show rect
        ws.sendMessage()
    }

    WorkerScript {
        id: ws
        source: "slow_process.js"
    }

    Rectangle {
        id: test
        color: "red"
        width: 100; height: 100
        visible: false
    }
}

Upvotes: 3

Related Questions