[Solved] Flickable does not flick dynamically added children!

iMasoud

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

KiwiJeff

This post is deleted!

p3c0

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

iMasoud

Hi @p3c0 ,

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

p3c0

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