快捷導(dǎo)航

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

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

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

引言

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

交互方式說(shuō)明

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

演示效果：

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

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

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

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

關(guān)鍵點(diǎn)：

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

方式二：外部文件

演示效果：

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

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

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

然后在 JSImportFile.qml 中導(dǎo)入并使用：

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

關(guān)鍵點(diǎn)：

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

方式三：信號(hào)處理

演示效果：

適用場(chǎng)景：將復(fù)雜的邏輯封裝在 JS 函數(shù)中，通過(guò) QML 的信號(hào)（Signal）來(lái)觸發(fā)，保持代碼整潔。

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

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

關(guān)鍵點(diǎn)：

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

方式四：工作線程 (WorkerScript)

演示效果：

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

原理：使用 WorkerScript 將 JS 代碼放到后臺(tái)線程運(yùn)行。注意：后臺(tái)線程不能訪問(wèn) QML 的 UI 元素（DOM），只能通過(guò)消息傳遞（Message Passing）交互。

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

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

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

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

// script.mjs
// 計(jì)算斐波那契數(shù)列（遞歸，耗時(shí)操作）
function fibonacci(n) {
    function fib(n) {
        if (n <= 1) return n;
        return fib(n - 1) + fib(n - 2);
    }
    return fib(n);
}
// 監(jiān)聽(tīng)主線程發(fā)送的消息
WorkerScript.onMessage = function(message) {   
    try {
        var startTime = Date.now();
        var result;
        // 計(jì)算斐波那契數(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) {
        // 錯(cuò)誤處理
        WorkerScript.sendMessage({
            error: error.toString(),
            originalMessage: message
        });
    }
}

關(guān)鍵點(diǎn)：

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

總結(jié)

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