QML中的JavaScript用法詳解

QML中的JavaScript用法詳解

熟悉JavaScript的應該都瞭解Netscape公司，一代驕子雖然倒下了，卻給後人留下了最為珍貴的產品和經驗，在互連網發展史上享有舉足輕重的地位，這裡就不講故事了，雖然很精彩，從未被磨滅。QML是對JavaScript的擴充，提供了JS主機環境，用法相似，但有些地方與瀏覽器/伺服器端提供的JS主機環境（如Node.js）是不同的，用起來又有一些限制，下面列舉一些常用的方法。

1、QML檔案中的JS運算式

初始化時屬性綁定——

// Property.qmlimport QtQuick 2.0Rectangle {    id: colorButton    width: 360; height: 360    color: mouseArea.pressed ? "steelblue" : "lightsteelblue"    MouseArea {        id: mouseArea        anchors.fill: parent    }}

使用Qt.binding()完成屬性綁定——

// Property2.qmlimport QtQuick 2.0Rectangle {    id: colorbutton    width: 360; height: 360    color: "yellow"    MouseArea {        id: mouseArea        anchors.fill: parent    }    Component.onCompleted: {        color = Qt.binding(function() { return mouseArea.pressed ? "red" : "green" })    }}

訊號處理中的JS運算式——

// Handler.qmlimport QtQuick 2.0Rectangle {    id: button    width: 200; height: 100; color: "lightblue"    MouseArea {        id: mouseArea        anchors.fill: parent        onPressed: label.text = "I am Pressed!"        onReleased: label.text = "Click Me!"    }    Text {        id: label        anchors.centerIn: parent        text: "Press Me!"    }}

QML檔案中函數的JS運算式——

// InlineFunction.qmlimport QtQuick 2.0Item {    function factorial(a) {        a = parseInt(a);        if (a <= 0)            return 1;        else            return a * factorial(a - 1);    }    MouseArea {        anchors.fill: parent        onClicked: console.log(factorial(5))    }}

JS檔案中函數的JS運算式——

// factorial.jsfunction factorial(a) {    a = parseInt(a);    if (a <= 0)        return 1;    else        return a * factorial(a - 1);}// ExternalFunction.qmlimport QtQuick 2.0import "factorial.js" as MathFunctionsItem {    MouseArea {        anchors.fill: parent        onClicked: console.log(MathFunctions.factorial(10))    }}

使用connect()處理訊號——

// Connecting.qmlimport QtQuick 2.0import "script.js" as MyScriptItem {    id: item    width: 360; height: 360    MouseArea {        id: mouseArea        anchors.fill: parent    }    Component.onCompleted: {        mouseArea.clicked.connect(MyScript.jsFunction)    }}// script.jsfunction jsFunction() {    console.log("Called JavaScript function!")}

使用Component.onCompleted附加訊號

// Startup.qmlimport QtQuick 2.0Rectangle {    function startupFunction() {        console.log("startFunction called")    }    Component.onCompleted: startupFunction()}

2、QML檔案中的JS資源

用獨立的JS檔案實現QML邏輯部分——

// MyButton.qmlimport QtQuick 2.0import "my_button_impl.js" as LogicRectangle {    id: rect    width: 360    height: 360    color: "red"    MouseArea {        id: mousearea        anchors.fill: parent        onClicked: Logic.onClicked(rect)    }}// my_button_impl.jsvar clickCount = 0;function onClicked(btn) {    clickCount += 1;    if ((clickCount % 5) == 0) {        btn.color = Qt.rgba(1,0,0,1);    } else {        btn.color = Qt.rgba(0,1,0,1);    }}

JS檔案定義為共用庫——

// Calculator.qmlimport QtQuick 2.0import "factorial.js" as FactorialCalculatorText {    width: 500    height: 100    property int input: 10    text: "The factorial of " + input + " is: " + FactorialCalculator.factorial(input)}// factorial.js.pragma libraryvar factorialCount = 0;function factorial(a) {    a = parseInt(a);    if (a > 0)        return a * factorial(a - 1);    factorialCount += 1;    return 1;}function factorialCallCount() {    return factorialCount;}

使用WorkerScript這個QML類型——

// MyWorkerScript.qmlimport QtQuick 2.0Rectangle {    width: 300; height: 300    Text {        id: myText        text: 'Click anywhere'    }    WorkerScript {        id: myWorker        source: "worker_script.js"        onMessage: myText.text = messageObject.reply    }    MouseArea {        anchors.fill: parent        onClicked: myWorker.sendMessage({ 'x': mouse.x, 'y': mouse.y })    }}// worker_script.jsWorkerScript.onMessage = function(message) {    WorkerScript.sendMessage({ 'reply': 'Mouse is at ' + message.x + ',' + message.y })}

3、匯入JS檔案

在JS檔案中匯入另一個JS檔案——

.import “filename.js” as Qualifier

在JS檔案中匯入QML模組——

.import TypeNamespace MajorVersion.MinorVersion as Qualifier

在JS檔案中使用Qt.include()來匯入另一個JS檔案——

// Including.qmlimport QtQuick 2.0import "script2.js" as MyScriptItem {    width: 360; height: 360    MouseArea {        anchors.fill: parent        onClicked: {            MyScript.showCalculations(10)            console.log("Call factorial() from QML:", MyScript.factorial(10))        }    }}// script2.jsQt.include("factorial2.js")function showCalculations(value) {    console.log("Call factorial() from script2.js:", factorial(value));}// factorial2.jsfunction factorial(a) {    a = parseInt(a);    if (a <= 0)        return 1;    else        return a * factorial(a - 1);}