QML基础 3 --事件处理（鼠标、键盘事件）

鼠标事件（MouseArea）

该模块只能在MouseArea确定的范围内进行鼠标动作，响应鼠标的单击、拖拽等事件。
例：

import QtQuick 2.0

Rectangle {
    width: 50
    height: 50
    color: "teal"
    MouseArea{
        anchors.fill: parent
        drag.axis: Drag.XAxis //获取元素当前是否正在被拖拽(水平拖拽）； Drag.YAxis 垂直方向；Drag.XAndYAxis 水平垂直都可
        drag.minimumX: 0
        drag.maximumX: 360-parent.width
        acceptedButtons: Qt.LeftButton|Qt.RightButton
        onClicked: {
            if(mouse.buttom==Qt.RightButton){
                parent.color="red"
                parent.width-=5
                parent.height-=5

            }else if((mouse.button == Qt.LeftButton)&&(mouse.modifiers & Qt.ShiftModifier)){
                parent.color="teal"
                parent.width=50
                parent.height=50
            }else{
                parent.color="green"
                parent.width+=5
                parent.height+=5
            }
        }
    }
}

拖拽属性设置
MouseArea分组属性提供了一个使元素可被拖拽的简便方法。drag.axis属性用来指定拖拽的方向，可以是Drag.XAxis（水平方向）、Drag.YAxis （垂直方向）、Drag.XAndYAxis （水平垂直都可）。

acceptedButtons: Qt.LeftButton|Qt.RightButton
MouseArea所能接受的按键：Qt.LeftButton|Qt.RightButton| Qt.MiddleButton；

Mouse.button
为MouseArea信号中包含的鼠标事件参数，用来获取按下的按键；

mouse.modifiers & Qt.ShiftModifier （同时按Shift键进行操作）
通过modifiers属性可以获取按下的键盘修饰符，modifiers的值由多个按键进行位组合而成，在使用时需要将modifiers与这些特殊的按键进行按位与来判断按键，常用的按键有Qt.NoModifier（没有修饰键）、QtShiftModifier(一个shift键)、QtControlModifier(一个control键)、QtAltModifier(一个alt键)。

实现效果：

键盘事件（Keys）

当一个按键被按下或释放时，会产生一个键盘事件，并将其传递给获得焦点的QML元素。在QML中，Keys属性提供了基本的键盘按键事件处理器。
例：

import QtQuick 2.0

Rectangle {
    Row{
//        x:50
//        y:50
        spacing: 30
        Rectangle{
            id:music
            width: 100
            height: 100
            radius: 6 //角半径
            color: focus ? "red ": "lightgray"
            scale: focus ? 1 : 0.8
            focus: true
            KeyNavigation.tab: play

            //改变图标的位置，可进行上下左右移动
            Keys.onUpPressed: music.y -=10
            Keys.onDownPressed: music.y +=10
            Keys.onLeftPressed: music.x -=10
            Keys.onRightPressed: music.x +=10

            Text{
                anchors.centerIn: parent
                color:  parent.focus ? "balck": "gray"

                font.pointSize: 20
                text: "音乐"
            }
        }

        Rectangle{
            id:play
            width: 100
            height: 100
            radius: 6
            color: focus ? "red ": "lightgray"
            scale: focus ? 1 : 0.8
            focus: true
            KeyNavigation.tab: movie

            //改变图标的位置，可进行上下左右移动
            Keys.onUpPressed: play.y -=10
            Keys.onDownPressed: play.y +=10
            Keys.onLeftPressed: play.x -=10
            Keys.onRightPressed: play.x +=10

            Text{

                anchors.centerIn: parent
                color:  parent.focus ? "balck": "gray"


                font.pointSize: 20
                text: "游戏"
            }

        }

        Rectangle{
            id:movie
            width: 100
            height: 100
            radius: 6
            color: focus ? "red ": "lightgray"
            scale: focus ? 1 : 0.8
            focus: true
            KeyNavigation.tab: music

            //改变图标的位置，可进行上下左右移动
            Keys.onUpPressed: movie.y -=10
            Keys.onDownPressed: movie.y +=10
            Keys.onLeftPressed: movie.x -=10
            Keys.onRightPressed: movie.x +=10

            Text{

                anchors.centerIn: parent
                color:  parent.focus ? "balck": "gray"


                font.pointSize: 20
                text: "影视"
            }
        }
    }
}

KeyNavigation.tab: play
QML中的KeyNavigation元素可以用来方向键或Tab键进行元素导航。其子属性有backtab\down\left\priority\right\tab\up等。

移动图标位置： focus值为true时，表示按下按键后起作用

实现效果