QML-调用JS

一、使用JS文件中的函数

1、新建js文件nomal_fun.js

function getColor(){
    return "red";
}

2、在qml中使用

import QtQuick 2.0
import "nomal_fun.js" as Balls
Rectangle{
    width: 600
    height: 480
    color: "gray"
    Rectangle {
        width: 100
        height: 100
        anchors.centerIn: parent
        Component.onCompleted: {
           color = Balls.getColor()
        }
    }
}

 

 注意：这里并没有将js文件加入到工程的资源中，而是直接通过文件访问的。

 

 

二、在js中动态创建自定义qml对象

1、dynamic-image.qml.js

// M1>>
var component;

function createImageObject() {
    component = Qt.createComponent("dynamic-image.qml");
    if (component.status === Component.Ready || component.status === Component.Error) {
        finishCreation();
    } else {
        component.statusChanged.connect(finishCreation);
    }
}

function finishCreation() {
    if (component.status === Component.Ready) {
        var image = component.createObject(root, {"x": 100, "y": 100});
        if (image === null) {
            console.log("Error creating image");
        }
    } else if (component.status === Component.Error) {
        console.log("Error loading component:", component.errorString());
    }
}

// <<M1

dynamic-image.qml是自定义的qml

2、使用

import QtQuick 2.5
import "create-component.js" as ImageCreator

Item {
    id: root

    width: 1024
    height: 600

    Component.onCompleted: ImageCreator.createImageObject();
}

 

三、传回调进入js

1、在qml里定义函数

function print(info) {
    console.log(info);
}

2、定义js文件

A.js

function test(info, callback)
{
    callback(info);
}

3、qml中使用

import "A.js" as AObject

Item {
    id: root

    function addUfo() {
        AObject.test("123", print);
    }

    function print(info) {
        console.log(info);
    }
}

和C++一致

 

四、stateful/statelss

如希望某个js是单例的，只需要在js文件开头加入：

.pragma library

注意这种形式类似于共享，它不可以直接访问QML文件中的object尽管可以通过参数的传人对所要求的object进行修改；

stateful:【不加.pragma library，默认情况】

如果在js中定义一个var count=0；那么每import一次这个js，就会有独立的count；默认是有状态【stateful】的，js文件可以直接访问在我们QML文件中所定义的object。

statelss：【加.pragma library】

count是静态的；函数里无法在里面访问id，只能将id作为参数传进去才能访问;

 

官方说明：https://doc.qt.io/qt-5/qtqml-javascript-resources.html