Qt Quick Examples - Threading

This is a collection of QML multithreading examples

threading.qml Example File

timedisplay.qml Example File

Spinner.qml Example File

workerscript.qml Example File

main.cpp Example File

threading.pro Example File

threading.qmlproject Example File

threading.qrc Example File

threadedlistmodel.qmlproject Example File

workerscript.qmlproject Example File

This is a collection of QML multithreading examples.

Threading is a collection of QML multithreading examples.

Running the Example

To run the example from Qt Creator , open the Welcome mode and select the example from Examples . For more information, visit Building and Running an Example.

Threaded ListModel

Threaded ListModel ** contains a ListView and a ListModel . The ListModel object is updated asynchronously in another thread, and the results propagate back to the main thread. A timer requests updates from the worker thread periodically:

<Code snippet "threading/threadedlistmodel/timedisplay.qml:0" not found>

Inside the worker thread, the ListModel is synchronized once the data is finished loading:

<Code snippet "threading/threadedlistmodel/dataloader.mjs:0" not found>

WorkerScript

WorkerScript contains an example of using a WorkerScript to offload expensive calculations into another thread. This keeps the UI from being blocked. This example calculates numbers in Pascal’s Triangle, and not in a very optimal way, so it will often take several seconds to complete the calculation. By doing this in a WorkerScript in another thread, the UI is not blocked during this time.

When the UI needs another value, a request is sent to the WorkerScript :

Spinner {
    id: rowSpinner
    label: "Row"
    onValueChanged: {
        resultText.text = "Loading...";
        myWorker.sendMessage( { row: rowSpinner.value, column: columnSpinner.value } );
    }
}

The workerscript then is free to take a really long time to calculate it:

WorkerScript.onMessage = function(message) {
    //Calculate result (may take a while, using a naive algorithm)
    var calculatedResult = triangle(message.row, message.column);
    //Send result back to main thread
    WorkerScript.sendMessage( { row: message.row,
                                column: message.column,
                                result: calculatedResult} );
}

When it’s done, the result returns to the main scene via the WorkerScript type:

WorkerScript {
    id: myWorker
    source: "workerscript.mjs"

    onMessage: {
        if (messageObject.row == rowSpinner.value && messageObject.column == columnSpinner.value){ //Not an old result
            if (messageObject.result == -1)
                resultText.text = "Column must be <= Row";
            else
                resultText.text = messageObject.result;
        }
    }
}