Some strange component behavior

[tomy]

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
    }
}

[oria66]

@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...

[Yashpal]

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 / 2

If suppose, if you have assigned y: 200 directly this would put y=200 during component initialization.