在JS中创建QML对象

时间:2016-05-31 09:01:39

标签: javascript qt qml

我正在尝试显示" Block_Cloud.qml"来自JS函数的主页上的元素。尽管有以下文档我没有结果: Official docthis example

我已经在另一个项目中使用了我的JS函数,它可以工作。

这是我的Block_Cloud.qml:

import QtQuick 2.0
import QtQuick.Controls 1.3

Rectangle {
    id:block
    property alias textBlock: textBlock.text
    property alias descriptionCloud: descriptionCloud.text
    property alias checkBoxName : cloudCheckBox.text
    property alias theBoxIsChecked : cloudCheckBox.checked
    width: 100
    height: 62
    color:"red"

Text{

    id:textBlock
    text:"Nuage n°"
   CheckBox {
        id: cloudCheckBox
        x: 25
        y: 29
        text: "test"
        anchors.left:textBlock.left
        anchors.top:textBlock.bottom
    }
    Text{
        id:descriptionCloud
        text:"test"
        anchors.top:cloudCheckBox.bottom
    }

}
}

我的DataConfigBuilder.js:

    .import QtQuick 2.0 as QtQuickModuleImportedInJS

//CLASSES
function Cloud(name, description){
    this.name = name;
    this.description = description;
    this.getName = function(){
        return this.name;
    }
    this.getDescription = function(){
        return this.description;
    }
}

//DATA
var configCloudList = [];

//Functions REGISTER
function configCloudRegister(cloudList){
    var length = cloudList.length;
    for(var i=0; i<length;i++){
        var cloud = new Cloud(cloudList[i].name,cloudList[i].description);
        configCloudList.push(cloud);
    }

}

//Functions SHOW
function showTheClouds(parentBox){
    for(var i=0; i<configCloudList.length; i++){
        var component = Qt.createComponent("Block_Cloud.qml");

        if(component.status == QtQuickModuleImportedInJS.Component.Ready){
            var dynamicObject = component.createObject(parentBox);
            if(dynamicObject == null){
                console.log("error creatng block");
                console.log(component.errorString());
                return false;
            }
            var lastChild = parentBox.children.length;
            dynamicObject.parent = parentBox;
            dynamicObject.y = lastChild*62;
            dynamicObject.textBlock = "Cloud n°"+ i;
            dynamicObject.checkBoxName = configCloudList[i].name;
            dynamicObject.descriptionCloud=configCloudList[i].description;

    }else{
        console.log("error loading block component");
        console.log(component.errorString());
        return false;
    }
}
    return false;
}

我的main.qml:

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import "DataConfigBuilder.js" as DataConfigBuilder



ApplicationWindow {
    title: qsTr("Hello World")
    width: 400
    height: 400
    visible: true

    function myQmlFunction(configCloudList){
        DataConfigBuilder.configCloudRegister(configCloudList)
        DataConfigBuilder.showTheClouds(newDisplayCloud)
        return "CloudList for config recieved"
    }

    Rectangle{
        id:newDisplayCloud
        color:"pink"
        width: 384
        height: 302
    }



}

感谢您的帮助:)

1 个答案:

答案 0 :(得分:0)

我发现了我的错误,我无法调用该函数&#34; showTheClouds&#34;在功能QML中,它不会做任何事情。 我必须通过信号在组件中调用它。