Представление загрузки QML во время выполнения функции

Question

Я пытаюсь создать объект кнопки qml, который отображает экран во время выполнения функции. Я планирую использовать этот экран загрузки, когда мне нужно проанализировать больший набор данных / запустить более медленную функцию. В настоящее время это то, что я придумал.

//LoadingButton.qml
import QtQuick 2.4
import QtQuick.Controls 1.2

Item
{
    id: impl
    function callbackFunction() { console.log("This is a dummy funciton and needs to be overwritten in the implementation") } //empty dummy function

    property alias style: button.style
    Button {
        id: button
        anchors.fill: parent
        onClicked: {
            loadingScreen.visible = true;
            console.log("Loading should be visible")
            impl.callbackFunction();
            loadingScreen.visible = false;
            console.log("Loading should be hidden")
        }
    }

    Rectangle
    {
        width: 500
        height: 500
        x:0
        y:0
        z: 60
        id: loadingScreen
        color: "red"
        visible: false
    }
}

В этом примере корректно запускается callbackFunction после перезаписи в родительском объекте, но видимость Rectangle не изменяется до тех пор, пока не будет завершена более медленная функция. Кроме того, приложение останавливается до завершения.

Есть ли способ заставить прямоугольник показать / скрыть выполнение функции в середине - javascript?

Answer 1

лучшее решение - это, конечно, переместить медленную функцию в фоновый поток. Таким образом, GUI остается отзывчивым.

Если вы хотите сохранить функцию обратного вызова в том же потоке, что и GUI, вы можете использовать таймер, который будет задерживать запуск медленной функции до тех пор, пока не отобразится экран загрузки. Обратите внимание, что GUI будет заблокировано во время выполнения медленной функции.

import QtQuick 2.4
import QtQuick.Controls 1.2

Item
{
    id: impl

    function callbackFunction() {
        console.log("This is a dummy funciton and needs to be overwritten in the implementation")
        var cnt = 0
        var largeNumber = 1
        while (cnt < 99999999) {
            largeNumber += largeNumber/3
            cnt++
        }

        //put this at the end of your slow function
        loadingScreen.visible = false;
        console.log("Loading should be hidden")
    }

    property alias style: button.style
    Button {
        id: button
        anchors.fill: parent
        onClicked: {
            loadingScreen.visible = true;
            console.log("Loading should be visible")
            timer.start()
        }
    }

    Timer {
        id: timer
        interval: 500
        repeat: false
        onTriggered: impl.callbackFunction()
    }

    Rectangle
    {
        id: loadingScreen
        width: 500
        height: 500
        x:0
        y:0
        z: 60
        color: "red"
        visible: false
        BusyIndicator {
            anchors.centerIn: parent
            running: loadingScreen.visible
        }
    }
}