Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

[Solved] Flickable does not flick dynamically added children!



  • Hi Guys,

    A few days ago i needed to add items dynamically to my Qml in some project. i made it and it was working fine.
    But today when i tried to add items dynamically to a Flickable, i didn't made it right. it is not working.
    I tried to add some static items to Flickable and i was able to flick them but i never was able to flick "dynamically added items".

    I really tried almost everything but it didn't work. I hope you guys can help me. Here it is my "Main.qml" :

    import QtQuick 2.4
    import QtQuick.Controls 1.3
    import QtQuick.Window 2.2
    
    ApplicationWindow {
        title: qsTr("Add Items Dynamically to Flickable")
        width: 640
        height: 480
        visible: true
    
        property int counter:0
    
        function createRect()
        {
            var component = Qt.createComponent("Rect.qml");
            var rect = component.createObject(container,{"x":container.width/4,"y":container.height/4*counter});
            if(rect != null )
            {
                rect.name = "Rectangle[" + counter + "]";
                console.log(container.contentHeight);
            }
            counter++;
         }
    
        MainForm
        {
            anchors.fill: parent
    
            Button
            {
                id:button_creator
                anchors.verticalCenter: parent.verticalCenter
                anchors.left:parent.left
                anchors.leftMargin: parent.width/10
                text:"Create!"
                onClicked:createRect()
            }
    
            Flickable
            {
                id:container
                interactive:true
                flickableDirection: Flickable.VerticalFlick
                clip:true
                contentWidth: width
                contentHeight: height/6*(3*counter-0.5)
                anchors.verticalCenter: parent.verticalCenter
                anchors.right:parent.right
                anchors.rightMargin: parent.width/10
                width:parent.width*0.6
                height:parent.height*0.8
            }
        }
    }
    

    And here it is my "Rect.qml" :

    import QtQuick 2.4
    
    Rectangle
    {
        property string name: "";
    
        width:parent.height/2
        height:width/3
        color:"navy"
    
        Text
        {
            anchors.centerIn: parent
            font.pixelSize: parent.height/2
            text:name
            color:"white"
        }
    }
    

    thank you guys and sorry for my bad English! :D



  • This post is deleted!

  • Moderators

    @iMasoud Make the newly created items a child of Flickable's contentItem.

    var rect = component.createObject(container.contentItem,{"x":container.width/4,"y":container.height/4*counter});
    


  • Hi @p3c0 ,

    yes, that's it! thank you very much! :)


  • Moderators

    @iMasoud You're Welcome :)
    It is documented here.
    Happy Coding ..


Log in to reply