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) {  }
            }
        }
    }
發佈了30 篇原創文章 · 獲贊 29 · 訪問量 6萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章