Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. [Solved] Flickable does not flick dynamically added children!
Forum Updated to NodeBB v4.3 + New Features

[Solved] Flickable does not flick dynamically added children!

Scheduled Pinned Locked Moved QML and Qt Quick
qmlqt quick
5 Posts 3 Posters 2.7k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • I Offline
    I Offline
    iMasoud
    wrote on last edited by p3c0
    #1

    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

    p3c0P 1 Reply Last reply
    0
    • KiwiJeffK Offline
      KiwiJeffK Offline
      KiwiJeff
      wrote on last edited by KiwiJeff
      #2
      This post is deleted!
      1 Reply Last reply
      0
      • I 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

        p3c0P Offline
        p3c0P Offline
        p3c0
        Moderators
        wrote on last edited by
        #3

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

        157

        I 1 Reply Last reply
        1
        • p3c0P 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});
          
          I Offline
          I Offline
          iMasoud
          wrote on last edited by
          #4

          Hi @p3c0 ,

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

          p3c0P 1 Reply Last reply
          0
          • I iMasoud

            Hi @p3c0 ,

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

            p3c0P Offline
            p3c0P Offline
            p3c0
            Moderators
            wrote on last edited by
            #5

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

            157

            1 Reply Last reply
            0

            • Login

            • Login or register to search.
            • First post
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • Users
            • Groups
            • Search
            • Get Qt Extensions
            • Unsolved