QML中的Keys事件

QML的Keys元素专门用来处理键盘事件KeyEvent。它定义了许多特定的按键信号。
onAsteriskPressed
onBackPressed
onBacktabPressed
onCallPressed
onCancelPressed
onContext1Pressed
onContext2Pressed
onContext3Pressed
onContext4Pressed
onDeletePressed
onDigit0Pressed
onDigit1Pressed
onDigit2Pressed
onDigit3Pressed
onDigit4Pressed
onDigit5Pressed
onDigit6Pressed
onDigit7Pressed
onDigit8Pressed
onDigit9Pressed
onDownPressed
onEnterPressed
onEscapePressed
onFlipPressed
onHangupPressed
onLeftPressed
onMenuPressed
onNoPressed
onPressed
onReleased
onReturnPressed
onRightPressed
onSelectPressed
onSpacePressed
onTabPressed
onUpPressed
onVolumeDownPressed
onVolumeUpPressed
onYesPressed


不过使用了onPressed和onReleased就能够解决我们大部分问题。




1.在使用按键事件的组件元素中必须设置其focus为1.获取焦点。
Rectangle {  
    width: 100  
    height: 100  
    focus: true  
  
    Keys.onPressed: {  
        if(event.key == Qt.Key_B) 
            console.log("Key B was pressed") ； 
else if (event.key === Qt.Key_Down) {  }    
    } 
} 


2.当一个焦点获取到了按键事件并且处理后，我们应该把设置event.accepted = true。这条语句的
作用就是防止事件向上层传递也就是向父层传递，即使父对象的focus没有设置为ture


Rectangle {  
    width: 100  
    height: 100  
    focus: true  
  
    Keys.onPressed: { event.accepted = true//设置成了事件已接收，防止向上层传递 
        if(event.key == Qt.Key_B) 
            console.log("Key B was pressed") ； 
else if (event.key === Qt.Key_Down) {  }    
    } 
} 




3.Keys的enabled属性，改属性默认我true，当设置为false不能响应按键事件，影响的只是当前QML对象。Keys的enabled不同于Item的enabled，后者默认为true，为false时按键事件和鼠标事件都不能响应，影响的是当前对象及所有孩子对象，这一点在使用是需要特别注意。


Rectangle {  
    width: 100  
    height: 100  
    focus: true  
    enabled:false //不能响应下面的按键事件
 
    Keys.onPressed: { event.accepted = true//设置成了事件已接收，防止向上层传递 
        if(event.key == Qt.Key_B) 
            console.log("Key B was pressed") ； 
else if (event.key === Qt.Key_Down) {  }    
    } 
} 


4.orwardTo是个列表属性list<Object>，设置按键事件传递的顺序，某个QML对象在这个列表属性中时，即使没有设置focus为true也能响应按键事件，如果某个按键事件被列表属性中前面的Item处理了，后面的Item就不会再收到这个按键信号。


5.priority属性用来设置处理按键事件时的优先级，默认是Keys.BeforeItem，也就是说优先处理Keys附加属性的按键事件，然后才是Item本身的按键事件，但Keys已经处理过的按键事件就不会再传递到当前Item了，反之Keys.afterItem亦然


6.KeyNavigation元素--附件属性，可以用来实现用方向键或者Tab键来进行项目的导航


Grid {  
    width: 100; height:200  
    columns: 2  
  
    Rectangle{  
        id: topLeft  
        width: 50; height: 50  
        color: focus ? "red" : "lightgray"  
        focus: true  
        KeyNavigation.right: topRight  
        KeyNavigation.down: bottomLeft  
    }  
    Rectangle{  
        id: topRight  
        width: 50; height: 50  
        color: focus ? "red" : "lightgray"  
        focus: true  
        KeyNavigation.left: topLeft  
        KeyNavigation.down: bottomRight  
    }  
    Rectangle{  
        id: bottomLeft  
        width: 50; height: 50  
        color: focus ? "red" : "lightgray"  
        focus: true  
        KeyNavigation.right: bottomRight  
        KeyNavigation.up: topLeft  
    }  
    Rectangle{  
        id: bottomRight  
        width: 50; height: 50  
        color: focus ? "red" : "lightgray"  
        focus: true  
        KeyNavigation.left: bottomLeft  
        KeyNavigation.up: topRight  
    }  
}  


7.当上面代码作为一个可重用或者可被导入的组件时，简单的使用focus属性无效。
可以用QML焦点作用域（focus scope）解决，通过FocusScope元素创建。




FocusScope {
        id:foc
        width: 800;
        height: 480;
        Rectangle {
            width: 100
            height: 100
            focus: true
            enabled:false //不能响应下面的按键事件


            Keys.onPressed: { event.accepted = true//设置成了事件已接收，防止向上层传递
                if(event.key == Qt.Key_B)
                    console.log("Key B was pressed") ;
            else if (event.key === Qt.Key_Down) {  }
            }
        }
    }