Integration von JavaScript in QML

JavaScript-Code lässt sich problemlos in QML integrieren, um UI-Logik, imperative Steuerung oder andere Vorteile zu bieten.

Verwendung von JavaScript-Ausdrücken für Eigenschaftswerte

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

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

Beachten Sie, dass Funktionsaufrufe wie `Math.random()` nur neu ausgewertet werden, wenn sich ihre Argumente ändern. Eine Bindung an `Math.random()` liefert also eine Zufallszahl und wird nicht neu ausgewertet. Wird jedoch die Breite auf andere Weise geändert, wird die Bindung für die Höhe neu ausgewertet, um dies zu berücksichtigen.

Hinzufügen von JavaScript-Funktionen in QML

JavaScript-Funktionen können für QML-Elemente deklariert werden, wie im folgenden Beispiel gezeigt. 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 Logik aus QML-Dateien auszulagern. Dazu fügen Sie Ihre Funktionen zunächst in eine .js-Datei ein, wie im gezeigten Beispiel.

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

Importieren Sie die Datei anschließend in eine beliebige .qml-Datei, die die Funktionen nutzen soll, wie in der folgenden Beispiel-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 } }
    }

}

Grünes Quadrat, um einen von JavaScript berechneten Winkel gedreht

Weitere Informationen zur von QML verwendeten JavaScript-Engine sowie zu den Unterschieden gegenüber Browser-JS finden Sie in der vollständigen Dokumentation zu JavaScript-Ausdrücken in QML-Dokumenten.

Animationen Visuelle Arbeitsfläche

© 2026 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.