快捷導航

QML與JavaScript交互的四種方式(內(nèi)聯(lián)調(diào)用、外部文件、信號處理與工作線程)

更新時間：2026年03月26日 10:13:38 作者：Quz

JavaScript作為一種強大的編程語言,用于實現(xiàn)業(yè)務(wù)邏輯和與用戶交互,下面這篇文章主要介紹了QML與JavaScript交互的四種方式,分別是內(nèi)聯(lián)調(diào)用、外部文件、信號處理與工作線程,需要的朋友可以參考下

引言

在Qt6中，QML引擎深度集成了JavaScript。本文將用四個示例，展示QML與Javascript的四種交互方式：內(nèi)聯(lián)調(diào)用、外部文件、信號處理、工作線程（WorkerScript）。

交互方式說明

方式一：內(nèi)聯(lián)調(diào)用

演示效果：

適用場景：邏輯簡單，僅在當前組件內(nèi)部使用的短代碼。

在 QML 根元素內(nèi)直接定義 function，就像在 HTML 中寫 JS 一樣。

關(guān)鍵代碼 (來自 JSInlineFunc.qml )：

Rectangle {
    // 1. 定義一個內(nèi)聯(lián) JS 函數(shù)
    function calculateArea(w, h) {
        return w * h
    }
    Text {
        // 2. 屬性綁定中直接調(diào)用：當 width 或 height 變化時自動重算
        text: "計算面積: " + calculateArea(this.width, this.height) 
    }
    Button {
        // 3. 在信號處理器（如 onClicked）中調(diào)用
        onClicked: {
            var result = calculateArea(100, 100)
            textResult.text = "Area: " + result
        }
    }
}

關(guān)鍵點：

作用域：這些函數(shù)可以訪問該 QML 文件內(nèi)的所有 id 和屬性。
綁定特性：在屬性綁定（如 text: ...）中使用時，若參數(shù)發(fā)生變化，函數(shù)會自動重新執(zhí)行。

方式二：外部文件

演示效果：

適用場景：通用的工具函數(shù)（如日期格式化、字符串處理），需要在多個 QML 文件中共享。

關(guān)鍵代碼：
首先在 Utility.js 中定義函數(shù)，并使用 .pragma library 聲明這是一個共享庫。

// Utility.js
.pragma library 
function formatDate(date) {
    return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
}

然后在 JSImportFile.qml 中導入并使用：

import "Utility.js" as Util // 定義別名為 Util
Text {
    // 使用 別名.函數(shù)名 進行調(diào)用
    text: "日期: " + Util.formatDate(new Date()) 
}

關(guān)鍵點：

必須使用 as 關(guān)鍵字定義別名（如Util），避免命名沖突。同時注意Util首字母要大寫。
加上 .pragma library 后，該 JS 文件在整個應(yīng)用程序中只有一份實例（單例），適合存放無狀態(tài)的工具函數(shù)。如果不加這行，每個導入它的 QML 組件都會生成一個新的 JS 上下文副本。

方式三：信號處理

演示效果：

適用場景：將復雜的邏輯封裝在 JS 函數(shù)中，通過 QML 的信號（Signal）來觸發(fā)，保持代碼整潔。

關(guān)鍵代碼 (來自 JSSignal.qml )：

Text {
    id: myText
    property int counter: 0
    // 1. 定義處理邏輯
    function handleButtonClick() {
        myText.counter++
    }
    Connections {
        target: myButton // 目標按鈕
        // 2. 將按鈕的 onClicked 信號連接到 JS 函數(shù)
        function onClicked() { myText.handleButtonClick() } 
    }
}

關(guān)鍵點：

這體現(xiàn)了 Qt 的 信號與槽 (Signal & Slot) 機制。JS 函數(shù)在 QML 中可以直接作為槽函數(shù)使用。
這種方式解耦了 UI 元素（Button）和業(yè)務(wù)邏輯（Text 的計數(shù)邏輯）。

方式四：工作線程 (WorkerScript)

演示效果：

適用場景：耗時操作（如圖像處理、大規(guī)模計算）。如果在主線程做這些，界面會“卡死”。

原理：使用 WorkerScript 將 JS 代碼放到后臺線程運行。注意：后臺線程不能訪問 QML 的 UI 元素（DOM），只能通過消息傳遞（Message Passing）交互。

關(guān)鍵代碼 (來自 WorkerScriptDemo.qml 和 script.mjs)：

Step 1: QML 端 (發(fā)送與接收)

// 工作線程腳本
WorkerScript {
    id: myWorker
    source: "script.mjs"
    // 接收工作線程返回的消息
    onMessage: function (msgObj) {
        isProcessing = false;
        if (msgObj.error) {
            resultText = "錯誤: " + msgObj.error;
        } else {
            resultText = "計算結(jié)果: " + msgObj.result +
                    "\n耗時: " + msgObj.time + " ms" +
                    "\n任務(wù)ID: " + msgObj.taskId +
                    "\n原始消息: " + JSON.stringify(msgObj.originalMessage)
        }
    }
}
//發(fā)送按鈕
Button {
    id: btnCalc
    text: "計算斐波那契數(shù)列"
    font.pointSize: 12
    enabled: !isProcessing && myWorker.ready
    onClicked: {
        isProcessing = true;
        resultText = "計算斐波那契數(shù)列 ...";
        myWorker.sendMessage({ 'taskId': 1001, 'n': textField.text, 'timestamp': Date.now() });
    }
}

Step 2: JS 端 (處理與回傳)

// script.mjs
// 計算斐波那契數(shù)列（遞歸，耗時操作）
function fibonacci(n) {
    function fib(n) {
        if (n <= 1) return n;
        return fib(n - 1) + fib(n - 2);
    }
    return fib(n);
}
// 監(jiān)聽主線程發(fā)送的消息
WorkerScript.onMessage = function(message) {   
    try {
        var startTime = Date.now();
        var result;
        // 計算斐波那契數(shù)列
        result = fibonacci(message.n || 30);        
        var endTime = Date.now();
        var processingTime = endTime - startTime;
        // 將結(jié)果發(fā)送回主線程
        WorkerScript.sendMessage({
            result: result,
            time: processingTime,
            taskId: message.taskId,
            originalMessage: message
        });
    } catch (error) {
        // 錯誤處理
        WorkerScript.sendMessage({
            error: error.toString(),
            originalMessage: message
        });
    }
}

關(guān)鍵點：

異步特性：調(diào)用 sendMessage 后，主線程立即繼續(xù)執(zhí)行，不會等待。
數(shù)據(jù)隔離：Worker 內(nèi)部無法訪問 id: mainWindow 等 UI 對象，必須通過 message 對象傳遞所需的所有數(shù)據(jù)。

總結(jié)

方式	關(guān)鍵字	適用場景	備注
內(nèi)聯(lián)調(diào)用	function	簡單的 UI 邏輯	訪問方便，但不易復用
外部文件	import … as	工具類庫、常量定義	推薦使用 `.pragma library`
信號連接	Connections	響應(yīng)事件	實現(xiàn) UI 與邏輯解耦
工作線程	WorkerScript	耗時計算、網(wǎng)絡(luò)請求	唯一不阻塞 UI 的方式