用例 - 在 QML 中集成 JavaScript

如何在 QML 应用程序中集成 JavaScript 代码的示例

可以将 JavaScript 代码轻松集成到 QML 中，以提供 UI 逻辑、命令式控制或其他好处。

使用 JavaScript 表达式作为属性值

可以将 JavaScript 表达式用作 QML 中的绑定。例如

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

请注意，函数调用，如 Math.random()，除非它们的参数发生变化，否则不会重新评估。因此，绑定到 Math.random() 将是随机数字一次，不会重新评估，但如果以其他方式更改宽度，则高度绑定将重新评估以考虑这一点。

在 QML 中添加 JavaScript 函数

可以在 QML 项目中声明 JavaScript 函数，如下例中所示。这允许您使用组 ID 调用方法。

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 文件

可以使用 JavaScript 文件来从 QML 文件中提取逻辑。为此，首先按照以下示例将函数放入 .js 文件中。

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

然后，将文件导入任何需要使用该函数的 .qml 文件中，如下面的示例 QML 文件所示。

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 } }
    }

}

有关 QML中所用 JavaScript 引擎的详细信息以及与浏览器 JS 的区别，请参阅 QML 文档中 JavaScript 表达式的完整文档。