QML mouse pressed and onEntered

[sharethl]

How can I pressed mouse and move into a mouse area, and this mouse area could run onEntered?

With current code, once I press and hold on buttonMouseArea 1, and move mouse to another buttonMouseArea 2, Area 2 will not response onEntered.

Thanks

    MouseArea {
        id: buttonMouseArea
        anchors.fill: parent
        hoverEnabled: true
        onEntered: console.log(txt.text);

        //        onClicked: root.clicked()
        //        onPressed: alternatesRow.visible = true // enable buble effect
        //        onReleased: alternatesRow.visible = false // enable buble effect
    }

[p3c0]

@sharethl What is wrong with your current code ?

[sharethl]

@p3c0 With current code, once I press and hold on buttonMouseArea 1, and move mouse to another buttonMouseArea 2, Area 2 will not response.

[p3c0]

@sharethl AFAIK it doesn't trigger if the area under mouse changes while the mouse is still pressed. Some info here. BTW, are you trying to do drag-drop kind of thing ?

[sharethl]

@p3c0 I am actually doing QML keyboard. User pressed on wrong key, they want to press and hold move to another key and release.

[p3c0]

@sharethl Well in that case you can keep MouseArea as a parent item which will contain all other item i.e in your case keyboard keys. Then you can use onPressed and onReleased signal handlers where in you can get the exact child using childAt .
Consider the following example:

import QtQuick 2.4

Item {
    width: 140
    height: 100
    MouseArea {
        anchors.fill: parent
        onPressed: console.log(childAt(mouseX,mouseY).objectName)
        onReleased: console.log(childAt(mouseX,mouseY).objectName)
        Rectangle {
            objectName: "Rect1"
            width: 50
            height: 50
            color: "red"
        }
        Rectangle {
            objectName: "Rect2"
            x:50
            width: 50
            height: 50
            color: "green"
        }
    }
}

[sharethl]

@p3c0 Nice. But I have nested layout, and Key are in the most bottom level. How can I use childAt() find it out?

Column{
   Repeater{
      Row{
          Repeater{
               KeyDelegate
          }  
      }
  }
}

[p3c0]

@sharethl If the order of nesting is fixed then you can chain childAt method.
Alternatively you can may be use GridView. It has a similar method called itemAt. The advantage in this case is you can directly call that method using GridView's id.

[sharethl]

@p3c0 Got it working.

use nested for loop to go through column and row, to find keys.
Thank you!

MouseArea{
            anchors.fill: parent
            onMousePositionChanged: {
                var row = column.childAt(mouseX, mouseY);
                // clear all bubbles
                for (var i = 0; i < column.children.length; i++) {
                    var r = column.children[i];
                    for(var j=0; j < r.children.length; j++){
                        if(r.children[j].objectName==="KeyButton"){
                            r.children[j].bubleVisible=false;
                        }
                    }
                }
                if(row === null){
                    return;
                }
                var key = row.childAt(mouseX,5); // relative use any number 0 to height of key
                if(key !== null && key.objectName=== "KeyButton"){
                    key.bubleVisible=true;
                }
            }
            onReleased: {
                var row = column.childAt(mouseX, mouseY);
                var key = row.childAt(mouseX,5); // relative use any number 0 to height of key
                if(key !== null ){
                    key.bubleVisible= false;
                    console.log(key.text);
                }
            }
        }