Qt Quick Examples - Threading

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: (messageObject) => {
        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;
        }
    }
}

Example project @ code.qt.io