How to make visible property work immediately in QML? - qt

Question

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?

Answer 1

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