Dynamic component : component on component



  • Hi,
    I have an application with the c++ part which provide data to Qml. My data isn't always the same. I want display these data properly on Column.
    When I have new data, I add Text component on a Column without problem.
    But I want create Column on column to organize my data :

    ____________________
    |  _______         |
    | | text  |        |
    | |_______|        |
    |                  |
    |  _______         |
    | | text  |        |
    | |_______|        |
    |                  |
    |  ______________  |
    | |    _______   | |
    | |   | text  |  | |
    | |   |_______|  | |
    | |    ______    | |
    | |   | text |   | |
    | |   |______|   | |
    | |______________| |
    |__________________|
    
    

    To do this, I want create dynamically component column on the main component.

    Item {
        id:previewInfo
        property variant dataCurrentItem: myApp.searchResult.length>0 ? myApp.searchResult[listResult.currentIndex] : ""
    
        Component {
            id:simpleComponent
            Text{
                wrapMode: Text.WordWrap;
                font.pixelSize: 21;
                font.family: fontAller_Lt.name
                color:cst_COLOR_WHITE;
            }
        }
    
        Component {
            id: columnComponent
            Column {
                id:myColumn
                width:200; height: 200;
            }
        }
    
        Column {
            id: mainColumn
            width: parent.width; height:parent.height
            spacing:20
        }
    
        onDataCurrentItemChanged: {
            for(var i=0; i<mainColumn.children.length; ++i) {
                mainColumn.children[i].destroy()
            }
            if(dataCurrentItem) {
                if(dataCurrentItem.data1) {
                    simpleComponent.createObject(mainColumn,{"text":dataCurrentItem.data1});
                }
    
                if(dataCurrentItem.data2) {
                    simpleComponent.createObject(columnComponent,{"text":dataCurrentItem.data2});
                    columnComponent.createObject(mainColumn);
                }
            }
        }
    }
    

    But it doesn't work and I have the error

    QQmlComponent: Created graphical object was not placed in the graphics scene.
    


  • I have found a solution.
    I have to create first my object column. Then I can create "children" :

    Item {
        id:previewInfo
        property variant dataCurrentItem: myApp.searchResult.length>0 ? myApp.searchResult[listResult.currentIndex] : ""
    
        Component {
            id:simpleComponent
            Text{
                wrapMode: Text.WordWrap;
                font.pixelSize: 21;
            }
        }
    
        Component {
            id: columnComponent
            Column {
                id:myColumComposed
                width:200;
                function addText(data){
                    if(data) {
                        simpleComponent.createObject(myColumComposed,{"text":data});
                    }
                }
            }
        }
    
        Column {
            id: mainColumn
            width: parent.width; height:parent.height
            spacing:20
        }
    
    
        onDataCurrentItemChanged: {
            for(var i=0; i<mainColumn.children.length; ++i) {
                mainColumn.children[i].destroy()
            }
    
            if(dataCurrentItem) {
                if(dataCurrentItem.data1) {
                    simpleComponent.createObject(mainColumn,{"text":data1});
                }
                 if(dataCurrentItem.data2) {
                    simpleComponent.createObject(mainColumn,{"text":data2});
                }
    
                var objectColumn = columnComponent.createObject(mainColumn);
                objectColumn.addText("data3");
                objectColumn.addText("data4");
            }
        }
    }
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.