QML参考指南06:在QML中定义JavaScript资源

QML应用程序的程序逻辑可以在JavaScript中定义。JavaScript代码可以在QML文档中内联定义,也可以分为JavaScript文件(在QML中称为JavaScript Resources)。

QML支持两种不同类型的JavaScript资源:代码隐藏实现文件和共享(库)文件。两种JavaScript资源都可以由其他JavaScript资源导入,或包含在QML模块中。

代码隐藏的实现资源

导入到QML文档中的大多数JavaScript文件都是QML文档导入它们的有状态实现。在这些情况下,文档中定义的QML对象类型的每个实例都需要JavaScript对象和状态的单独副本,以便正确运行。

导入JavaScript文件时的默认行为是为每个QML组件实例提供唯一的隔离副本。如果该JavaScript文件未使用.import语句导入任何资源或模块,则其代码将在与QML组件实例相同的范围内运行,因此可以访问和操作在该QML组件中声明的对象和属性。否则,它将具有自己的唯一作用域,如果需要,应将QML组件的对象和属性作为参数传递给JavaScript文件的功能。

代码隐藏实现资源的示例如下:

// MyButton.qml
import QtQuick 2.0
import "my_button_impl.js" as Logic // A new instance of this JavaScript resource
                                    // is loaded for each instance of Button.qml.
 Rectangle {
    id: rect
    width: 200
    height: 100
    color: "red"
 
    MouseArea {
        id: mousearea
        anchors.fill: parent
        onClicked: Logic.onClicked(rect)
    }
}    
// my_button_impl.js
var clickCount = 0;   // this state is separate for each instance of MyButton
function onClicked(button) {
    clickCount += 1;
    if ((clickCount % 5) == 0) {
        button.color = Qt.rgba(1,0,0,1);
    } else {
        button.color = Qt.rgba(0,1,0,1);
    }
}

通常,应在QML文件中内联定义简单的逻辑,但为了保持可维护性和可读性,应将更复杂的逻辑分离到代码隐藏的实现资源中。

共享的JavaScript资源(库)

默认情况下,从QML导入的JavaScript文件与QML组件共享它们的上下文。这意味着JavaScript文件可以访问相同的QML对象,并且可以对其进行修改。因此,每个导入都必须具有这些文件的唯一副本。

上一节介绍了JavaScript文件的有状态导入。但是,某些JavaScript文件是无状态的,并且在某种意义上更像可重用的库,因为它们提供了一组帮助程序函数,这些函数不需要从其导入位置中获取任何内容。如果使用特殊的实用标记来标记此类库,则可以节省大量内存并加快QML组件的实例化,如以下示例所示。

 // factorial.js
.pragma library
 
var factorialCount = 0;
 
function factorial(a) {
    a = parseInt(a);
 
    // factorial recursion
    if (a > 0)
        return a * factorial(a - 1);
 
    // shared state
    factorialCount += 1;
 
    // recursion base-case.
    return 1;
}
 
function factorialCallCount() {
    return factorialCount;
}

编译指示必须出现在任何JavaScript代码(注释除外)之前。

请注意,多个QML文档可以导入"factorial.js"并调用它提供的factorial和factorialCallCount函数。JavaScript导入的状态在导入QML的文档之间共享,因此,在从未调用阶乘函数的QML文档中调用时,factorialCallCount函数的返回值可能为非零。

例如:

 // Calculator.qml
import QtQuick 2.0
import "factorial.js" as FactorialCalculator // This JavaScript resource is only
                                             // ever loaded once by the engine,
                                             // even if multiple instances of
                                             // Calculator.qml are created.
 
Text {
    width: 500
    height: 100
    property int input: 17
    text: "The factorial of " + input + " is: " + FactorialCalculator.factorial(input)
}           

由于共享,.pragma库文件无法直接访问QML组件实例对象或属性,尽管QML值可以作为函数参数传递。

发布了52 篇原创文章 · 获赞 4 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/caridle/article/details/105694003
QML
今日推荐