Intégration de JavaScript dans QML

Le code JavaScript peut être facilement intégré dans QML pour fournir une logique d'interface utilisateur, un contrôle impératif ou d'autres avantages.

Utilisation d'expressions JavaScript pour les valeurs de propriété

Les expressions JavaScript peuvent être utilisées dans QML comme des liaisons. En voici un exemple :

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

Notez que les appels de fonction, comme Math.random(), ne seront pas réévalués à moins que leurs arguments ne changent. Ainsi, la liaison à Math.random() sera un nombre aléatoire et ne sera pas réévaluée, mais si la largeur est modifiée d'une autre manière, la liaison à la hauteur sera réévaluée pour en tenir compte.

Ajout de fonctions JavaScript dans QML

Les fonctions JavaScript peuvent être déclarées sur les éléments QML, comme dans l'exemple ci-dessous. Cela vous permet d'appeler la méthode en utilisant l'identifiant de l'élément.

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

}

Utilisation de fichiers JavaScript

Les fichiers JavaScript peuvent être utilisés pour abstraire la logique des fichiers QML. Pour ce faire, placez d'abord vos fonctions dans un fichier .js, comme dans l'exemple ci-dessous.

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

Ensuite, importez le fichier dans tout fichier .qml qui doit utiliser les fonctions, comme dans l'exemple de fichier QML ci-dessous.

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

}

Pour plus de détails sur le moteur JavaScript utilisé par QML, ainsi que sur la différence avec le navigateur JS, voir la documentation complète sur les expressions JavaScript dans les documents QML.

Animations Visual Canvas

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