Anwendungsfall - Integration von JavaScript in QML

JavaScript-Code kann problemlos in QML integriert werden, um UI-Logik, imperative Kontrolle oder andere Vorteile zu bieten.

Verwendung von JavaScript-Ausdrücken für Eigenschaftswerte

JavaScript-Ausdrücke können in QML als Bindungen verwendet werden. Ein Beispiel:

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

Beachten Sie, dass Funktionsaufrufe, wie z. B. Math.random(), nicht neu bewertet werden, wenn sich ihre Argumente nicht ändern. Die Bindung an Math.random() wird also eine Zufallszahl sein und nicht neu ausgewertet, aber wenn die Breite auf andere Weise geändert wird, wird die Höhenbindung neu ausgewertet, um dies zu berücksichtigen.

Hinzufügen von JavaScript-Funktionen in QML

JavaScript-Funktionen können in QML-Elementen deklariert werden, wie im folgenden Beispiel. Dadurch können Sie die Methode über die Element-ID aufrufen.

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

}

Verwendung von JavaScript-Dateien

JavaScript-Dateien können verwendet werden, um die Logik aus den QML-Dateien zu abstrahieren. Dazu platzieren Sie Ihre Funktionen zunächst in einer .js-Datei wie im gezeigten Beispiel.

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

Dann importieren Sie die Datei in eine beliebige .qml-Datei, die die Funktionen verwenden muss, wie die unten stehende QML-Datei.

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

}

Weitere Einzelheiten über die von QML verwendete JavaScript-Engine und den Unterschied zu Browser-JS finden Sie in der vollständigen Dokumentation zu JavaScript-Ausdrücken in QML-Dokumenten.

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.