QML中的JavaScript用法詳解

http://www.2cto.com/kf/201412/364184.html

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

1、QML文件中的JS表達式

初始化時屬性綁定——

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

// Property2.qml   import QtQuick 2.0   Rectangle {     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表達式——

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

// Handler.qml   import QtQuick 2.0   Rectangle {     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表達式——

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

// InlineFunction.qml   import QtQuick 2.0   Item {     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表達式——

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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

使用connect()處理信號——

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

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

使用Component.onCompleted附加信號

?

1 2 3 4 5 6 7 8 9 10 11

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

2、QML文件中的JS資源

用獨立的JS文件實現QML邏輯部分——

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

// MyButton.qml   import QtQuick 2.0 import "my_button_impl.js" as Logic   Rectangle {     id: rect     width: 360     height: 360     color: "red"       MouseArea {         id: mousearea         anchors.fill: parent         onClicked: Logic.onClicked(rect)     } }   // my_button_impl.js   var 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文件定義爲共享庫——

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

// Calculator.qml   import QtQuick 2.0 import "factorial.js" as FactorialCalculator   Text {     width: 500     height: 100     property int input: 10     text: "The factorial of " + input + " is: " + FactorialCalculator.factorial(input) }   // factorial.js   .pragma library   var 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類型——

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

// MyWorkerScript.qml   import QtQuick 2.0   Rectangle {     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.js   WorkerScript.onMessage = function(message) {     WorkerScript.sendMessage({ 'reply': 'Mouse is at ' + message.x + ',' + message.y }) }

3、導入JS文件

在JS文件中導入另一個JS文件——

?

1	.import “filename.js” as Qualifier

在JS文件中導入QML模塊——

?

1	.import TypeNamespace MajorVersion.MinorVersion as Qualifier

在JS文件中使用Qt.include()來導入另一個JS文件——

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

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