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

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

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


Log in to reply