QML教程（七） JavaScript

目录

一、对属性值使用 JavaScript 表达式

二、在 QML 中添加 JavaScript 函数

三、使用 JavaScript 文件

四、属性绑定中的 JavaScript

五、信号处理程序中的 JavaScript

六、将信号连接到 JavaScript 函数

七、启动执行 JavaScript

QML 提供的 JavaScript 主机环境可以运行有效的标准 JavaScript表达式，例如条件运算符、数组、变量设置和循环。除了标准的 JavaScript 属性之外，QML 全局对象还包括许多帮助程序方法，这些方法简化了构建 UI 和与 QML 环境的交互。

QML提供的JavaScript环境比Web浏览器中的环境更严格。例如，在 QML 中，您不能添加或修改 JavaScript 全局对象的成员。在常规 JavaScript 中，可以通过使用变量而不声明它来意外执行此操作。在 QML 中，这将引发异常，因此必须显式声明所有局部变量。请参阅 JavaScript 环境限制，了解从 QML 执行的 JavaScript 代码限制的完整描述。JavaScript 主机环境|Qt QML 6.4.1https://doc.qt.io/qt-6/qtqml-javascript-hostenvironment.html#javascript-environment-restrictions

QML文档的各个部分可以包含JavaScript代码：

属性绑定的主体。这些 JavaScript 表达式描述了 QML 对象属性之间的关系。当属性的依赖项更改时，该属性也会根据指定的关系自动更新。
信号处理程序的主体。每当 QML 对象发出相关信号时，都会自动计算这些 JavaScript 语句。
自定义方法的定义。在 QML 对象主体中定义的 JavaScript 函数成为该对象的方法。
独立的 JavaScript 资源 （.js） 文件。这些文件实际上与 QML 文档是分开的，但它们可以导入到 QML 文档中。导入文件中定义的函数和变量可用于属性绑定、信号处理程序和自定义方法。

一、对属性值使用 JavaScript 表达式

Item {
    width: Math.random()
    height: width < 100 ? 100 : (width + 50) /  2
}

二、在 QML 中添加 JavaScript 函数

import QtQuick

Item {
    id: container
    width: 320
    height: 480

    function randomNumber() {
        return Math.random() * 360;
    }

    function getNumber() {
        return container.randomNumber();
    }

    TapHandler {
        // This line uses the JS function from the item
        onTapped: rectangle.rotation = container.getNumber();
    }

    Rectangle {
        color: "#272822"
        width: 320
        height: 480
    }

    Rectangle {
        id: rectangle
        anchors.centerIn: parent
        width: 160
        height: 160
        color: "green"
        Behavior on rotation { RotationAnimation { direction: RotationAnimation.Clockwise } }
    }

}

三、使用 JavaScript 文件

// myscript.js
function getRandom(previousValue) {
    return Math.floor(previousValue + Math.random() * 90) % 360;
}

import QtQuick
import "myscript.js" as Logic

Item {
    width: 320
    height: 480

    Rectangle {
        color: "#272822"
        width: 320
        height: 480
    }

    TapHandler {
        // This line uses the JS function from the separate JS file
        onTapped: rectangle.rotation = Logic.getRandom(rectangle.rotation);
    }

    Rectangle {
        id: rectangle
        anchors.centerIn: parent
        width: 160
        height: 160
        color: "green"
        Behavior on rotation { RotationAnimation { direction: RotationAnimation.Clockwise } }
    }

}

四、属性绑定中的 JavaScript

import QtQuick 2.12

Rectangle {
    id: colorbutton
    width: 200; height: 80;

    color: inputHandler.pressed ? "steelblue" : "lightsteelblue"

    TapHandler {
        id: inputHandler
    }
}

任何 JavaScript 表达式（无论多么复杂）都可以在属性绑定定义中使用，只要表达式的结果是其类型可以分配给属性的值。但是，不建议使用复杂的绑定和副作用，因为它们会降低代码的性能、可读性和可维护性。

有两种方法可以定义属性绑定：最常见的方法在前面的示例中的属性初始化中显示。第二种（也是更罕见的）方法是从命令式 JavaScript 代码中为属性分配一个从 Qt.binding（） 函数返回的函数，如下所示：

import QtQuick 2.12

Rectangle {
    id: colorbutton
    width: 200; height: 80;

    color: "red"

    TapHandler {
        id: inputHandler
    }

    Component.onCompleted: {
        color = Qt.binding(function() { return inputHandler.pressed ? "steelblue" : "lightsteelblue" });
    }
}

五、信号处理程序中的 JavaScript

QML 对象类型可以发出信号以响应发生的某些事件。这些信号可以由信号处理程序函数处理，客户端可以定义这些函数以实现自定义程序逻辑。

假设由矩形类型表示的按钮具有 TapHandler 和文本标签。当用户按下按钮时，点击处理程序会发出其点击信号。客户端可以使用 JavaScript 表达式对处理程序中的信号做出反应。QML 引擎根据需要执行处理程序中定义的这些 JavaScript 表达式。通常，信号处理程序绑定到 JavaScript 表达式以启动其他事件或分配属性值。

import QtQuick 2.12

Rectangle {
    id: button
    width: 200; height: 80; color: "lightsteelblue"

    TapHandler {
        id: inputHandler
        onTapped: {
            // arbitrary JavaScript expression
            console.log("Tapped!")
        }
    }

    Text {
        id: label
        anchors.centerIn: parent
        text: inputHandler.pressed ? "Pressed!" : "Press here!"
    }
}

六、将信号连接到 JavaScript 函数

发出信号的 QML 对象类型还为其信号提供默认信号处理程序。但是，有时客户端希望在另一个 QML 对象发出信号时触发在 QML 对象中定义的函数。这种情况可以通过信号连接来处理。QML 对象发出的信号可以通过调用信号的方法并将 JavaScript 函数作为参数传递来连接到 JavaScript 函数。例

// script.js

function jsFunction() {
    console.log("Called JavaScript function!")
}

import QtQuick 2.12
import "script.js" as MyScript

Item {
    id: item
    width: 200; height: 200

    TapHandler {
        id: inputHandler
    }

    Component.onCompleted: {
        inputHandler.tapped.connect(MyScript.jsFunction)
    }
}

七、启动执行 JavaScript

有时需要在应用程序（或组件实例）启动时运行一些命令性代码。虽然将启动脚本作为全局代码包含在外部脚本文件中很诱人，但由于 QML 环境可能尚未完全建立，这可能会有严重的限制。例如，某些对象可能尚未创建，或者某些属性绑定可能尚未建立。

QML 对象在其实例化完成时发出附加的信号。相应处理程序中的 JavaScript 代码在对象实例化后运行。因此，编写应用程序启动代码的最佳位置是顶级对象的处理程序，因为此对象在完全建立 QML 环境时发出。

import QtQuick 2.0

Rectangle {
    function startupFunction() {
        // ... startup code
    }

    Component.onCompleted: startupFunction();
}

QML 文件中的任何对象（包括嵌套对象和嵌套的 QML 组件实例）都可以使用此附加属性。如果在启动时要执行多个处理程序，则它们将按未定义的顺序顺序运行。onCompleted()

同样，每个在被摧毁之前都会发出一个 destruction() 信号