QML基础 4 --QML集成JavaScript

JavaScript代码集成在qml中，可以提供用户界面（UI）逻辑、必要的控制及其他用途。
QML集成JavaScript有两种方式：
1、 一种是直接在QML代码中写JavaScript函数，然后调用；
2、 把JavaScript代码写在外部文件中，需要时用import语句导入.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() { //定义JavaScript函数
        return Math.random() * 360;//随机旋转的角度值
    }
    Behavior on rotation {   //行为动画
        RotationAnimation {
            direction: RotationAnimation.Clockwise
        }
    }
    MouseArea {
        anchors.fill: parent // 矩形内部区都接受鼠标点击
        onClicked: rect.rotation = getRandomNumber();//在单击事件中调用JavaScript函数
    }
}

效果如下

第二种

myscript.js

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

My_java.qml

import QtQuick 2.0
import "myscript.js" as Logic//导入JS文件
//include <QtDebug>

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
        //使用导入的JS文件中定义的JavaScript函数
        onClicked: rect.rotation = Logic.getRandomNumber()
    }
}

编写好JS文件后，在.qml文件中用import引入该JS文件即可

实现效果

在复杂、规模较大的QML程序中，使用JavaScript函数完成特定的功能逻辑，最后直接在主窗口上布局这些组件