用例 - 在 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 表达式的完整文档。