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

一、调用JavaScript函数

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

【资料图】

（1）RotateRect.qml

import QtQuick 2.0Rectangle {id: rectwidth: 60; height: 60gradient: 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: parentonClicked: rect.rotation = getRandomNumber();}}

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

Qt学习基地：

（2）MainForm.qml

import QtQuick 2.7Rectangle {property alias mouseArea: mouseAreawidth: 360; height: 360color: \"lightgray\"MouseArea {id: mouseAreaanchors.fill: parent}TextEdit {id: textEditvisible: 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.0import \"myscript.js\" as LogicRectangle {id: rectwidth: 60; height: 60gradient: 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: parentonClicked: rect.rotation = Logic.getRandomNumber();}}

（3）MainForm.qml

import QtQuick 2.7Rectangle {property alias mouseArea: mouseAreawidth: 360; height: 360color: \"lightgray\"MouseArea {id: mouseAreaanchors.fill: parent}TextEdit {id: textEditvisible: false}RotateRect {x: 50; y: 50}}

（4）运行效果

当编写好一个JS文件后，其中定义的函数就可以在任何.qml文件中使用，只需在开头用一句import导入该JS文件即可，而在QML文档中无须再写JavaScript函数，这样就将QML的代码与JavaScript代码隔离开来了。

在开发界面复杂、规模较大的QML程序时，一般都会将JavaScript函数写在独立的JS文件中，再在组件的.qml源文件中import（导入）使用这些函数以完成特定的功能逻辑，最后直接在主窗体UI界面上布局这些组件即可。

【领 QT开发教程 学习资料， 点击下方链接莬费领取↓↓ ，先码住不迷路~】

点击这里：