QML调用js函数

步骤示例如下:

(1)新建QML应用程序,项目名称为“QMLjs”

(2)右击项目视图“资源”-》“qml.qrc”下的“/”节点,选择“添加新文件...”项,新建RotateRect.qml文件。

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();
    }
}

 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
    }
}

 效果图

QML调用js函数_第1张图片

 

你可能感兴趣的:(Qt)