一、鼠标事件

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

（1）Rect.qml

import QtQuick 2.0 Rectangle { width: 50; height: 50 color: "teal" 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.he += 5 } } } }

（a）拖拽属性设置：MouseArea中的drag分组属性提供了一个使元素可被拖拽的简便方法。drag.target属性用来指定被拖拽的元素的id（这里为parent表示被拖拽的就是所在元素本身）；drag.active属性获取元素当前是否正在被拖拽的信息；drag.axis属性用来指定拖拽的方向，可以是水平方向（Drag.XAxis）、垂直方向（Drag.YAxis）或者两个方向都可以（Drag.XandYAxis）；drag.minimumX和drag.maximumX限制了元素在指定方向上被拖拽的范围。 （b）acceptedButtons：Qt.LeftButton | Qt.RightButton：MouseArea所能接受的鼠标按键，可取的值有Qt.LeftButton（鼠标左键）、Qt.RightButton（鼠标右键）和Qt.MiddleButton（鼠标中键）。 （c）mouse.button：为MouseArea信号中所包含的鼠标事件参数，其中mouse为鼠标事件对象，可以通过它的x和y属性获取鼠标当前的位置；通过button属性获取按下的按键。 （d）mouse.modigiers & Qt.ShiftModifier：通过modifiers属性可以获取按下的键盘修饰符，modifiers的值由多个按键进行位组合而成，在使用时需要将modifiers与这些特殊的按键进行按位与来判断按键，常用的按键有Qt.NoModifier（没有修饰键）、Qt.ShiftModifier（一个Shift键）、Qt.ControlModifier（一个Ctrl键）、Qt.AltModifier（一个Alt键）。

（2）MainForm.qml

import QtQuick 2.7 Rectangle { width: 360; height: 360 property alias mouseArea: mouseArea MouseArea { id: mouseArea anchors.fill: parent } Rect { x: 25; y: 25 opacity: (360.0 - x)/360 } }

（3）运行效果

二、键盘事件

当一个按键按下或释放时，会产生一个键盘事件，并将其传递给获得了焦点的QML元素。在QML中，Keys属性提供了基本的键盘事件处理器，所有可视化元素都可以通过它来进行按键处理。

（1）MainForm.qml

import QtQuick 2.7 Rectangle { width: 360; height: 360 property alias mouseArea: mouseArea 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.pixelSize: 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.pixelSize: 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.pixelSize: 20 text: "影视" } } } }

（a）KeyNavigation.tab: play：QML中的KeyNavigation元素是一个附加属性，可以用来实现使用方向键或Tab键来进行元素的导航。它的子属性有backtab、down、left、priority、right、tab和up等，本例中使用tab属性设置焦点转移次序，“KeyNavigation.tab: play”表示按下Tab键，焦点转移到id为“play”的元素（“游戏”图标）。 （b）/*移动图标位置*/：这里使用Keys熟悉来进行按下方向键后的事件处理，它也是一个附加属性，对QML所有的基本可视元素均有效。Keys属性一般与focus属性配合使用，只有当focus值为true时，它才起作用，由Keys属性获取相应键盘事件的类型，进而决定所要进行的操作。本例中Keys.onUpPressed表示方向键↑被按下的事件，相应地执行该元素y坐标-10（上移）操作，其余方向的操作与之类同。

（2）运行效果

三、输入控件与焦点

QML用于接收键盘输入的有两个元素：TextInput和TextEdit。TextInput是单行文本输入框，支持验证器、输入掩码和现实模式等，与QLineEdit不同，QML的文本输入元素只有一个闪动的光标和用户输入的文本，没有边框等可视元素。因此，为了能够让用户意识到这是一个可输入元素，通常需要一些可视化修饰，比如绘制一个矩形框，但更好的办法是创建一个组件，组件被定义好后可在编程中作为“输入控件”直接使用，效果与可视化设计的文本框一样。

（1）TextBox.qml

import QtQuick 2.0 FocusScope { property alias label: label.text property alias text: input.text Row { spacing: 5 Text { id: label text: "标签" } Rectangle { width: 100; height: 20 color: "white" border.color: "gray" TextInput { id: input anchors.fill: parent anchors.margins: 4 focus: true text: "请输入内容..." } } } }

（2）MainForm.qml

import QtQuick 2.7 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 } TextBox { id: tBx2 x: 25; y: 60 label: "姓名" text: focus ? "" : "请输入内容..." KeyNavigation.tab: tBx1 } }

（3）运行效果 TextEdit与TextInput非常类似，唯一的区别是：TextEdit是多行的文本编辑组件。与TextInput一样，它没有一个可视化的显示，所以用户在使用时也要像上述步骤一样将它定制成一个复合组件，然后使用。