JavaScript代码可以被很容易地集成进QML，来提供用户界面（UI）逻辑、必要的控制及其他用途。QML集成JavaScript有两种方式：一种是直接在QML代码中写JavaScript函数，然后调用；另一种是把JavaScript代码写在外部文件中，需要时用import语句导入.qml源文件中使用。

一、调用JavaScript函数

示例：编写JavaScript函数实现图形的旋转，每单击一次鼠标，矩形就转动一个随机的角度：

（1）RotateRect.qml

import QtQuick 2.0 Rectangle { id: rect width: 60; height: 60 gradient: Gradient { GradientStop { position: 0.0; color: "yellow" } GradientStop { position: 0.33; color: "blue" } GradientStop { position: 1.0; color: "aqua" } } function getRandomNumber() { return Math.random() * 360; } Behavior on rotation { RotationAnimation { direction: RotationAnimation.Clockwise } } MouseArea { anchors.fill: parent onClicked: rect.rotation = getRandomNumber(); } }

注意：由于Qt Quick 2.3及以上版本环境的MainForm.ui源文件不再支持在其中直接编写JavaScript代码，故遇到需要在程序中编写成段（一行以上）JavaScript代码的情况，一般都是通过定义组件的方式，在外部.qml文件中写JavaScript代码，而主窗体UI文件直接使用包括JavaScript的组件。

（2）MainForm.qml

import QtQuick 2.7 Rectangle { property alias mouseArea: mouseArea width: 360; height: 360 color: "lightgray" MouseArea { id: mouseArea anchors.fill: parent } TextEdit { id: textEdit visible: false } RotateRect { x: 50; y: 50 } }

（3）运行效果

二、导入JS文件

首先新建JS File，取名为myscript.js （1）myscript.js

function getRandomNumber() { return Math.random() * 360; }

（2）RotateRect.qml

import QtQuick 2.0 import "myscript.js" as Logic Rectangle { id: rect width: 60; height: 60 gradient: Gradient { GradientStop { position: 0.0; color: "yellow" } GradientStop { position: 0.33; color: "blue" } GradientStop { position: 1.0; color: "aqua" } } Behavior on rotation { RotationAnimation { direction: RotationAnimation.Clockwise } } MouseArea { anchors.fill: parent onClicked: rect.rotation = Logic.getRandomNumber(); } }

（3）MainForm.qml

import QtQuick 2.7 Rectangle { property alias mouseArea: mouseArea width: 360; height: 360 color: "lightgray" MouseArea { id: mouseArea anchors.fill: parent } TextEdit { id: textEdit visible: false } RotateRect { x: 50; y: 50 } }

（4）运行效果

当编写好一个JS文件后，其中定义的函数就可以在任何.qml文件中使用，只需在开头用一句import导入该JS文件即可，而在QML文档中无须再写JavaScript函数，这样就将QML的代码与JavaScript代码隔离开来了。 在开发界面复杂、规模较大的QML程序时，一般都会将JavaScript函数写在独立的JS文件中，再在组件的.qml源文件中import（导入）使用这些函数以完成特定的功能逻辑，最后直接在主窗体UI界面上布局这些组件即可。