QML编程之旅 -- 事件处理

QML编程之旅 – 事件处理

QML也可以对键鼠事件进行处理。因为QML程序更多的是用于实现触摸式用户界面，所以更多的是对鼠标（在触摸屏上可能是手指）单击的处理。

1、鼠标事件

与之前的窗口部件不同，在QML中如果一个元素想要处理鼠标事件，就要在其上放置一个MouseArea元素 。也就是说，用户只能在MouseArea确定的范围内进行鼠标的动作。

import QtQuick 2.0

Rectangle {							//定义一个矩形元素
    width: 50; height: 50			//宽高都是50
    color: "teal"					//初始为蓝绿色
    MouseArea {						//定义MouseArea元素处理鼠标事件
        anchors.fill: parent		//事件响应区充满整个矩形
        /* 拖曳属性设置 */				//(a)
        drag.target: parent
        drag.axis: Drag.XAxis
        drag.minimumX: 0
        drag.maximumX: 360 - parent.width
        acceptedButtons:  Qt.LeftButton|Qt.RightButton	//(b)
        onClicked: {					//处理鼠标事件的代码
            if (mouse.button == Qt.RightButton) {		//(c)
                /* 设置矩形为蓝色并缩小尺寸 */
                parent.color = "blue";
                parent.width -= 5;
                parent.height -= 5;
            }else if((mouse.button == Qt.LeftButton)&&(mouse.modifiers & Qt.ShiftModifier)) {	//(d)
                /* 把矩形重新设为蓝绿色并恢复原来的大小 */
                parent.color = "teal";
                parent.width = 50;
                parent.height = 50;
            }else {
                /* 设置矩形为绿色并增大尺寸 */
                parent.color = "green";
                parent.width += 5;
                parent.height += 5;
            }
        }
    }
}

2、键盘事件

在QML中，Keys属性提供了基本的键盘事件处理。

Rectangle {
    property alias mouseArea: mouseArea

    width: 360
    height: 360

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }

    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             //(a)
            /* 移动图标位置 */                    //(b)
            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 ? "black" : "gray"  //被选中（获得焦点）时显黑字，否则变灰
                font.pointSize: 20				//字体大小
                text: "音乐"						//文字内容为“音乐”
            }
        }
        Rectangle {                             //第二个矩形元素（“游戏”图标）
            id: play
            width: 100; height: 100
            radius: 6
            color: focus ? "green" : "lightgray"
            scale: focus ? 1 : 0.8
            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 ? "black" : "gray"
                font.pointSize: 20
                text: "游戏"
            }
        }
        Rectangle {                             //第三个矩形元素（“影视”图标）
            id: movie
            width: 100; height: 100
            radius: 6
            color: focus ? "blue" : "lightgray"
            scale: focus ? 1 : 0.8
            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 ? "black" : "gray"
                font.pointSize: 20
                text: "影视"
            }
        }
    }
}

3、输入控件与焦点

QML用于接收键盘输入的有两个元素：TextInput和TextEdit.

Rectangle {
    property alias mouseArea: mouseArea

    width: 360
    height: 360
    color: "lightgray"					//背景设为亮灰色为突出文本框效果

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }
    /* 以下直接使用定义好的复合组件，生成所需文本框控件 */
    TextBox {							//“学号”文本框
        id: tBx1
        x:25; y:25
        focus: true						//初始焦点之所在
        label: "学号"					//设置提示标签文本为“学号”
        text: focus ? "" : "请输入内容..."	//获得焦点则清空提示文字，由用户输入内容
        KeyNavigation.tab: tBx2         //按【Tab】键焦点转移至“姓名”文本框
    }
    TextBox {							//“姓名”文本框
        id: tBx2
        x:25; y:60
        label: "姓名"
        text: focus ? "" : "请输入内容..."
        KeyNavigation.tab: tBx1         //按【Tab】键焦点又回到“学号”文本框
    }
}

QML 的事件处理，相对还是简单，QML的编程与之前窗体的编程有很大的不同，思维方式上也不尽相同。多练习练习就会了。本文档主要阐述了事件的一般处理方法。具体说明可以参考《Qt5开发与实例》中的相关内容。