Solved 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 useTimer
but sinceRepeater
gets abool
value, and I hoped it was anint
, I changed my mind fromTimer
to something else because I though it wouldn't do what I needed.@oria66
Thank you.
For my example, I thinkTimer
is better. :) -