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

How to make a component move a few times when clicked on time



  • Hello and Happy New Year to you all.

    I have this simple code and want that when rect3 is clicked once, its x coordination changes making it move forward a few times. I tried to use Repeater but it doesn't work as expected:

    import QtQuick 2.12
    import QtQuick.Window 2.12
    
    Window {
        visible: true
        width: 800
        height: 700
        title: qsTr("Welcome to QML")
    
        Image {
            id: image
            source: "images/background.png"
        }
    
        Rectangle {
            id: rect1
            x: 50; y: 400
            width: 80; height: 60
            color: "royalblue"
        }
        Rectangle {
            id: rect2
            anchors.left: rect1.right
            anchors.right: rect3.left
            anchors.top: rect1.top
            width: 80; height: 60
            color: "green"
        }
        Rectangle {
            id: rect3
            x: 210; y: 400
            width: 80; height: 60
            color: "royalblue"
    
            MouseArea {
                anchors.fill: parent
                onClicked: { rep.enabled = true }
            }
        }
    
        Repeater {
            id: rep
            enabled: false
            count: 5
            delegate: rect3.x
            model: rect3.x += 5
        }
    
    }
    

    What's the problem please?
    Is there any simpler code for that objective please?



  • hi,
    @tomy said in How to make a component move a few times when clicked on time:

    Repeater

    Repeater will repeat Items.

    Repeater{ // this will create 5 rectangles 
    model:5
    Rectangle{
    }
    }
    

    Here you need a Timer to repeat the same action (x++) few times

    @tomy said in How to make a component move a few times when clicked on time:

        delegate: rect3.x
        model: rect3.x += 5
    

    Where you saw this ?? Please use Qt's Doc when you want to try a new Type ..

    // exemple with Timer

    property int tick : 0 
    
        Timer{
          id:t
         repeat:tick<5
         running: false
         onTriggered : { 
           rect3.x += 1  
           tick++
       }
    
    }
        Rectangle {
            id: rect3
            x: 210; y: 400
            width: 80; height: 60
            color: "royalblue"
          
            MouseArea {
                anchors.fill: parent
                onClicked: {
                     tick=0
                     t.start()
              }
            }
        }
    


  • Hello @tomy.

    You must consult the Qt documentation to check the correct use of the Repeater component with the model/view/delegate paradigm. If you still have doubts, check this excellent book https://qmlbook.github.io/ in chapter 7.

    You can use a Timer, as @LeLev recommends or you can use a Behavior component.

    import QtQuick 2.12
    import QtQuick.Window 2.12
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        property int steps: 50
        property int count: 100
    
        Rectangle{
            id: rect3
            width: 100
            height: 100
            color: "blue"
    
            Behavior on x{
                NumberAnimation{
                    duration: 1000
                }
            }
    
            MouseArea{
                id: mouseArea
                anchors.fill: parent
                onClicked: parent.x += (steps * count)
            }
        }
    }
    

    Good luck!!



  • @oria66
    @tomy said in How to make a component move a few times when clicked on time:

    move forward a few times

    The timer is used to perform " few times" action, Behavior can still be used in my exemple.

    @oria66 in your exemple, the rectangle will move in one go to the last position.



  • @LeLev
    Thank you.
    I firstly wanted to use Timer but since Repeater gets a bool value, and I hoped it was an int, I changed my mind from Timer to something else because I though it wouldn't do what I needed.

    @oria66
    Thank you.
    For my example, I think Timer is better. :)



  • @tomy you can use Behavior component as @oria66 suggested, to animate the movement


Log in to reply