QML笔记整理——QtQuick用户交互：鼠标移动、点击、拖拽和键盘输入

QtQuick用户交互：鼠标移动、点击、拖拽和键盘输入

1、事件处理

1）Qt使用信号槽的基础处理大部分（非所有）的时间相应问题

2）在QML，类似地当有事件发生时，一个与事件相关的信号会被发出。所以，要处理事件，需要定义一个槽。这个槽仅仅是一个属性（property）；这个属性的名字与事件的类型是相关的（鼠标点击、计时、键盘按键等等）

2、鼠标区域（Mouse Area）

1）Mouse Area用于定义屏幕的某区域接收鼠标事件，位置与大小，与普通的items是一样的（可以对Mouse Area使用anchors）

2）两种方法处理鼠标输入：处理信号和动态属性绑定

3、与鼠标事件相关的信号

onClicked、onDoubleClicked、onPressedAndHold、onReleased等等。如：

    Rectangle {

        ...

        acceptedButtons: Qt.LeftButton | Qt.RightButton

        onClicked: {

            if(mouse.button == Qt.RightButton)

                parent.color = "blue"

            else

                parent.color = "red"

        }
        ...

    }

4、拖拽元素

通过设置MouseArea的属性drag，可以让某个元素被拖拽。如：

    Rectangle {
        id: opacitytest;
        ...
        Image {
            id: pic;
            MouseArea {
                anchors.fill: parent
                drag.target: pic
                drag.axis: "XAxis"
                drag.minimumX: 0
                drag.maximumX: opacitytest.width - pic.width
            }
        }
        ...
    }

5、鼠标悬停与属性
    Rectangle {
        ...
        color: mouse_area.containsMouse ? "green" : "blue"
        MouseArea {
            id: mouse_area
            anchors.fill: parent
            hoverEnabled: true
        }
        ...
    }

6、鼠标区域的注意点
1）鼠标区域只会相应acceptedButtons所定义的鼠标按键，槽不会接收到其他的鼠标按键事件；多个鼠标按键被按下时，pressedButtons属性会记录所有的按键，若有acceptedButtons指定的按钮被按下，没有指定的按钮也会被记录
2）当hoverEnabled为false时，鼠标按下，containsMouse为true

7、信号VS属性绑定
1）当一个信号只影响到某个元素时，信号更容易使用
2）属性绑定只能针对有id的元素使用，多个元素可以对同一个鼠标事件做出相应

8、键盘输入
1）接收文本输入：TextInput and TextEdit(different: TextEdit is multi-line)
2）在元素之间导航：a）改变元素的焦点；b）导航键（arrows keys），tab and backtab
3）按键输入：相应任意的按键

9、改变焦点
1）UIs只有一个TextInput的时候，焦点自动在TextInput上
2）若有多个TextInput，需要通过鼠标点击来改变焦点
3）若TextInput没有文字，鼠标无法点击，除非他有width属性或通过anchors布局过
4）通过设置focus属性来改变焦点

10、焦点导航
    TextInput {
        id: name_field
        ...
        focus: true
        KeyNavigation.tab: address_field
    }
    TextInput {
        id: address_field
        ...
        KeyNavigation.backtab: name_field
    }
1）id为name_field的元素定义了KeyNavigation.tab，当按Tab键的时候焦点就移动到了address_field上
2）id为address_field的元素定义了KeyNavigation.backtab，当按shift+Tab键的时候焦点移动到了name_field上

11、按键导航
为non-text元素使用导航键，non-text元素也可以有焦点

1）

  Rectangle {
        //设置宽、高、颜色等属性
        Rectangle {
            id: leftRect
            color: focus ? "red" : "darkred"
            KeyNavigation.right: rightRect
            focus: true
        }
        Rectangle {
            id: rightRect
            color: focus ? "#00ff00" : "green"
            KeyNavigation.left: leftRect
        }
    }
2）图片旋转的例子
    Rectangle {
        width: 400; height: 400; color: "black"
        Image {
            id: home
            x: 150; y: 150
            source: "images/home01.jpg"
            transformOrigin: Item.Center
        }
        Keys.onLeftPressed: 
            home.rotation = (home.rotation - 10) % 360
        Keys.onRightPressed: 
            home.rotation = (home.rotation + 10) % 360
        focus: true
    }
This property-transformOrigin-holds the origin point around which scale and rotation transform
Nine transform origin are available. The default transform origin is Item.Center
The nine transform origin are TopLeft, Top, TopRight, Left, Center, Right, BottomLeft, Bottom, BottomRight

12、键盘按键输入

1）所有可是元素都可以通过Keys的attached属性进行键盘事件处理

2）支持的键盘事件包括：A）通用事件（onPressed、onReleased）；B）专用事件（onReturnPressed、onSelectPressed、

onVolumePressed等等，他们都有个类型为KeyEvent的参数event）

3）处理通用信号时，需要显示的告知事件被处理了，event.accepted = true；否则这个事件将会传递

4）专用事件默认就将事件处理了

    Item {//Handle a key event with a generic handler
        focus: true
        Keys.onPressed: {
            if(event.key == Qt.Key_Left){//See Qt::Key for codes
                console.log("move left")
                event.accepted = true//Must accept explicity
            }
        }
    }
    Item {//Handle a key event with a specialized handler
        focus: true
        Keys.onLeftPressed://Accepts the event by default
            console.log("move left")
    }