大致步骤如下:
(1)新建QML应用程序,项目名称为QMLloadjs。
(2)右击项目视图”资源“-》”qml.qrc"下的“/”节点,选择“添加新文件...”项,选择“Qt”下的“JSFile”模板。
(3)创建js文件
js文件代码示例如下
function getRandomNumber() {
return Math.random()*360;
}
(4)右击项目视图”资源“-》”qml.qrc"下的“/”节点,选择“添加新文件...”项,新建RotateRect.qml文件,示例代码 如下
import QtQuick 2.0
import "demojs.js" as Logic //导入js文件
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=Logic.getRandomNumber();//调用js函数
}
}
(5)MainForm.ui.qml示例代码如下
import QtQuick 2.6
Rectangle {
property alias mouseArea: mouseArea
property alias textEdit: textEdit
width: 360
height: 360
MouseArea {
id: mouseArea
anchors.fill: parent
}
TextEdit {
id: textEdit
visible: false
}
RotateRect{
x:50
y:50
}
}
效果图: