Intégration de JavaScript dans QML

Le code JavaScript peut être facilement intégré à 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és

Les expressions JavaScript peuvent être utilisées dans QML en tant que liaisons. Par exemple :

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

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

Ajout de fonctions JavaScript dans QML

Les fonctions JavaScript peuvent être déclarées sur des éléments QML, comme dans l’exemple ci-dessous. Cela vous permet d’appeler la méthode à l’aide de 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 extraire la logique des fichiers QML. Pour ce faire, placez d’abord vos fonctions dans un fichier .js, comme dans l’exemple présenté.

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

Importez ensuite le fichier dans n'importe quel fichier .qml qui doit utiliser ces 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 les différences par rapport au JavaScript des navigateurs, consultez la documentation complète sur les expressions JavaScript dans les documents QML.