QML中的JavaScript用法详解

来源：互联网发布：新疆4g网络开通时间编辑：程序博客网时间：2024/04/28 12:03

熟悉JavaScript的应该都了解Netscape公司，一代骄子虽然倒下了，却给后人留下了最为珍贵的产品和经验，在互联网发展史上享有举足轻重的地位，这里就不讲故事了，虽然很精彩，从未被磨灭。QML是对JavaScript的扩展，提供了JS主机环境，用法相似，但有些地方与浏览器/服务器端提供的JS主机环境（如Node.js）是不同的，用起来又有一些限制，下面列举一些常用的方法。

1、QML文件中的JS表达式

初始化时属性绑定——

[plain] view plain copy
// 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()完成属性绑定——

[plain] view plain copy
// 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表达式——

[plain] view plain copy
// 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表达式——

[plain] view plain copy
// 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表达式——

[plain] view plain copy
// 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()处理信号——

[plain] view plain copy
// 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附加信号

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

2、QML文件中的JS资源

用独立的JS文件实现QML逻辑部分——

[plain] view plain copy
// 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文件定义为共享库——

[plain] view plain copy
// 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类型——

[plain] view plain copy
// 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文件——

[plain] view plain copy
.import “filename.js” as Qualifier  

在JS文件中导入QML模块——

[plain] view plain copy
.import TypeNamespace MajorVersion.MinorVersion as Qualifier  

在JS文件中使用Qt.include()来导入另一个JS文件——

[plain] view plain copy
// 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);  
}  

转载：http://blog.csdn.net/ieearth/article/details/42105615

0 0