qml demo分析(threading-線程任務)

一、關鍵類說明

　　qml內置了WorkerScript組件，該組件有一個source屬性，可以加載js文件，含有一個名為message的信號，意味着他有一個默認的onMessage槽函數，除此之外他還有一個方法，通過該方法可以給js文件中名為WorkerScript.onMessage的方法(在工作線程執行)發送消息，在次接收消息的函數體內部可以通過 WorkerScript.sendMessage的方式在發送消息給WorkerScript內置槽(在主線程執行)，WorkerScript類的詳細說明如圖1所示

圖1 WorkerScript說明

二、示例效果分析

　　該示例程序總共包含2個簡單的WorkerScript使用方法，分別應用於timedisplay.qml組件和workerscript.qml組件

1、更新視圖數據

　　如圖2所示，是一個WorkerScript的簡單使用，qml文件通過WorkerScript對象向js函數發送一個消息，js函數中更新視圖內容，消息發送流程：ui線程->工作線程處理(調用接口更新ui)

圖2 更新視圖數據

　　視圖ui文件內容如下，每個2秒鍾timer定時器就會觸發，通過worker.sendMessage發送消息給js函數，這個js文件是通過WorkerScript對象的source指定，如下第17行代碼所示

Rectangle {
    color: "white"
    width: 200
    height: 300

    ListView {
        anchors.fill: parent
        model: listModel
        delegate: Component {
            Text { text: time }
        }

        ListModel { id: listModel }

        WorkerScript {//在新線程執行操作，不阻塞ui線程，在父線程使用sendMessage發送消息 在子線程使用onMessage處理
            id: worker
            source: "dataloader.js" //加載js文件
        }

// ![0]
        Timer {
            id: timer
            interval: 2000; 
            repeat: true
            running: true
            triggeredOnStart: true//定時器開始執行一次   默認該值為false 定時器開始不執行 等過interval后才執行

            onTriggered: {
                var msg = {'action': 'appendCurrentTime', 'model': listModel};
                worker.sendMessage(msg);//在新線程里執行該操作 不阻塞ui線程 
            }
        }
// ![0]
    }
}

　　對應的js文件dataloader.js比較簡單，就一個函數，代碼如下

WorkerScript.onMessage = function(msg) {
    if (msg.action == 'appendCurrentTime') {//如果是指定動作 
        var data = {'time': new Date().toTimeString()};//獲取當前時間
        msg.model.append(data);//list添加新數據
        msg.model.sync();   // 更新數據到ui
    }
}

2、滾輪游戲

　　如圖3所示，是WorkerScript的一個更復雜的使用，就行文章開頭說的那樣，消息發送流程：ui線程->工作線程處理->ui線程

圖3 滾輪游戲

　　滾輪游戲的代碼比較簡單，在這里我就貼主要部分

WorkerScript {
        id: myWorker
        source: "workerscript.js"//指定js文件

        onMessage: {//接收js文件發送的sendMessage消息
            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;
            }
        }
    }
//! [1]
    Row {//水平方向上的兩個可以滾動的儀表框
        y: 24
        spacing: 24
        anchors.horizontalCenter: parent.horizontalCenter
//! [0]
        Spinner {
            id: rowSpinner
            label: "Row"
            onValueChanged: {
                resultText.text = "Loading...";
                myWorker.sendMessage( { row: rowSpinner.value, column: columnSpinner.value } );
            }
        }
//! [0]

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

　　其中Spinner是自己封裝的一個組件，導出了當前文本和當前索引兩個屬性，對於的js文件如下

var cache = new Array(64);
for (var i = 0; i < 64; i++)
    cache[i] = new Array(64);

function triangle(row, column) {
    if (cache[row][column])
        return cache[row][column]
    if (column < 0 || column > row)
        return -1;
    if (column == 0 || column == row)
        return 1;
    return triangle(row-1, column-1) + triangle(row-1, column);
}
//! [0]  
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} );
}
//! [0]

　　js文件就不多說了，本篇示例主要就是想分析下WorkerScript的使用，通過上邊兩種使用方式基本就能理解