在Qt编程时需要对事件进行处理,如对鼠标事件、键盘事件等的处理。在QML编程中同样需要对鼠标、键盘等事件进行处理。
当一个按键被按下或释放时,会产生一个键盘事件,并将其传递给获得了焦点的QML元素。在QML中,Keys属性提供了基本的键盘事件处理器,所有可视元素都可以通过它来进行按键处理。
本文实例利用键盘事件处理制作一个模拟桌面应用图标选择程序,运行效果如下图所示,按Tab键切换选项,当前选中的图标以彩色放大显示,还可以用←、↑、↓、→方向键移动图标位置。
具体实现步骤如下。
(1) 新建项目
新建QML应用程序,选择项目“Qt Quick Application - Empty”模板,项目名称为“Keyboard”。
(2) 主程序
打开“main.qml”文件,编写代码如下:
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
width: 450
height: 240
visible: true
title: qsTr("Keyboard")
Rectangle {
width: 360
height:360
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:"影视"
}
}
}
}
}
其中,
- (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 (上移)操作,其余方向的操作与之类同。
————————————————
觉得有用的话请关注点赞,谢谢您的支持!
对于本系列文章相关示例完整代码有需要的朋友,可关注并在评论区留言!