Some strange component behavior
-
Hi,
Please look at this simple code. Why while the user hasn't still moved the racket, its y property is changed!? (Console writes "Y changed")
main.qml:
import QtQuick 2.12 import QtQuick.Window 2.12 Window { id: window visible: true width: 700; height: 500 color: "gray" Rectangle { id: table width: window.width / 1.15; height: window.height / 1.15 y: 10 anchors.horizontalCenter: parent.horizontalCenter color: "royalblue" } Racket { id: racket x: table.width - 10 y: table.height / 2 } }
Racket.qml:
import QtQuick 2.12 Rectangle { width: 15; height: 65 property int oldY: y property bool yUwards property bool yDwards onYChanged: { console.log("Y changed\n") if (y > oldY) yDwards = true else if (y < oldY) yUwards = true oldY = y } MouseArea { anchors.fill: parent anchors.margins: -parent.height drag.target: parent drag.axis: Drag.YAxis drag.minimumY: table.y drag.maximumY: table.height - parent.height + 10 } }
-
@tomy. If you look carefully, the y property of Racket component instantiation is set to table.height/2. That is the moment and the cause because you see that message on the console. At the creation of the component the y change triggering the signal onYChanged. Maybe you must change your logic if you want to obtain a different behavior.
By the way, it's not healthy to use properties of external components in your component. For example, Why you use table object inside Rocket.qml? It works now, but when the application grow that will be a problem. Besides, your Rocket component will be more portable. Imagine you want to use Rocket.qml in other application, or in other part of your program.
My recommendation is to use local properties inside Rocket, something like:
Rocket.qml
import QtQuick 2.12 Rectangle { width: 15; height: 65 property real minY: 0 property real maxY: 0 property int oldY: y property bool yUwards property bool yDwards onYChanged: { console.log("Y changed\n") if (y > oldY) yDwards = true else if (y < oldY) yUwards = true oldY = y } MouseArea { anchors.fill: parent anchors.margins: -parent.height drag.target: parent drag.axis: Drag.YAxis drag.minimumY: minY drag.maximumY: maxY - parent.height + 10 } }
main.qml
... Racket { id: racket x: table.width - 10 y: table.height / 2 minY: table.y maxY: table.height } ...
Good luck...
-
Hi! the Y value for your racket component has a data binding "table.height / 2"
I believe these type of bindings are evaluated only after the respective component is created and initialized, that is, the y property would first have default value(0) then would be assigned to the value evaluated from
table.height / 2If suppose, if you have assigned y: 200 directly this would put y=200 during component initialization.