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 <= ) 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 <= ) 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 = ; function onClicked(btn) { clickCount += 1 ; if ((clickCount % 5 ) == ) { btn.color = Qt.rgba( 1 , , , 1 ); } else { btn.color = Qt.rgba( , 1 , , 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 = ; function factorial(a) { a = parseInt(a); if (a > ) 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 <= ) return 1 ; else return a * factorial(a - 1 ); }