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

Send press event to mouseArea from a parent QML



  • Hello,

    I have a Component that use 2 custom button that I made. Lets call this component "ListFunction". This ListFunction is used in a ListView. I want from this listView to be able the press the button by pressing Left and Right arrow. But I don't know how to achieve that.

    Here is what I've tried :

    Custom Button :

    import QtQuick 2.0
    
    Rectangle{
        property alias press: press
    
        width: name.width < 100 ? 100 : 250
        height: 30
        border.width: 1
        border.color: "black"
        radius: height/2
        color: press.pressed ? "#e30613" : "#575757"
    
        Text{
            id: name
            text: qsTr("button")
            font.pixelSize: 13
            font.bold: true
            anchors.centerIn: parent
            z:99
        }
    
        MouseArea{
            id: press
            anchors.fill: parent
            preventStealing : true
        }
    
        function pressButton(){
            press.pressed()
        }
    }
    
    

    ListFunction :

    import QtQuick 2.0
    import QtQuick.Controls 1.3
    
    Item {
    
        property string libelleBoutonG : ""
        property string libelleBoutonD : ""
        property alias btnG: btnG
        property alias btnD: btnD
    
        Rectangle{
            width: parent.width
            height :parent.height
            color: "transparent"
    
            CustomButton{ //The button that should be activated on the Right arrow press
                id: btnG
                libelle: libelleBoutonG
                anchors.right: test.left
                anchors.rightMargin: parent.width/16
                anchors.verticalCenter: test.verticalCenter
                width: parent.width/6
                height: parent.height/2.5
            }
    
    
            CustomButton{  //The button that should be activated on the Leftarrow press
                id: btnD
                libelle: libelleBoutonD
                anchors.left : test.right
                anchors.leftMargin: parent.width/16
                anchors.verticalCenter: test.verticalCenter
                width: parent.width/6
                height: parent.height/2.5
            }
        }
    
    }
    

    **In the ListView : **

        Keys.onLeftPressed: {  //Listen for LeftArrow 
            listView.currentItem.btnG.pressButton()  // Tried to call the press() function from the btnG
        }
        Keys.onRightPressed: {
            listView.currentItem.btnD.pressButton()
        }
    

    What I've tried does not work it does not recognize the press() function.
    Here is the error I get :

    TypeError: Property 'press' of object CustomButton_QMLTYPE_10(0x96b2a58) is not a function
    

    How can I achieve this properly ?

    Thank you in advance for your help


  • Moderators

    hi @DavidM29

    Hard to tell, by my guess would be this alias

    property alias press: press

    to be the culprit. Usually not a good idea to name properties like object id.s. For me at least this always led to strange and undefined behaviour.



  • @J-Hilk
    In fact I found the solution to correct the error message I got. But I'm still not capable to press the button by pressing the Arrow.

    the only thing I need now is to find a way to send press event to the mouse area.

    I tried to change the "pressed" property of the mouse area but it is read only. And the pressed() function is not working without a MouseEvent.


  • Moderators

    @DavidM29
    well, A MouseArea needs a MouseEvent to function. I don't know how one would emulate that.

    Why don't you defined your own signal in the root element of your customButton. Than chain the onPressed event from the mouse area to that signal. Also you should have no problem calling your own signal programatically.



  • @J-Hilk
    How do you chain the onPressed event ?


  • Moderators

    @DavidM29 something like this

    Item {
        id:root
        signal pressed()
    
        MouseArea{
           anchors.fill: parent
           onPressed: root.pressed()
        }
    
    
    }
    


  • I'm not sure to understand what this code do :

    Does it call the onPressed event of the mouse area when the root.pressed() signal is emitted or does it emit the root.pressed() signal when I press the mouse area ?

    I'm not sure to understand.


  • Moderators

    @DavidM29 said in Send press event to mouseArea from a parent QML:

    I'm not sure to understand what this code do :

    Does it call the onPressed event of the mouse area when the root.pressed() signal is emitted or does it emit the root.pressed() signal when I press the mouse area ?

    I'm not sure to understand.

    MouseArea pressed signal triggers the root item pressed signal

    Item {
        id:root
        signal pressed()
    
        onPressed: console.log("root pressed signal");
    
        MouseArea{
           anchors.fill: parent
           onPressed: {
               console.log("MouseArea pressed signal");
               root.pressed()
           }
        }
    }
    


  • @J.Hilk
    That is what I thought.

    So your idea is to use this root.pressed signal to implement the function I would have implement on the mouse area.
    I get it now.

    Thank you it is a good idea.



  • @J-Hilk
    Do you have any idea how could I keep the color change on press of my button ? I tried to add a bool property that I change to true once I emit the root.pressed signal but I don't know how to change it back to false once I release the button.


  • Moderators

    @DavidM29 , ähm, MouseArea has a onReleased: signal you could use ?



  • @J.Hilk
    I used the Key.onReleased() event and the MouseArea onReleased event and now it seems to be all good. Thank you !


Log in to reply