键盘按键事件处理
键盘事件分为通用事件和专用事件
键盘按键事件主要是键盘的左右上下按键,enter,tab键等
按键导航
1.Tab键使用:组件之间的导航,使用tab键进行导航
Rectangle {
id: rect1
width: 200
height: 112
color: "lightblue"
TextInput {
id: name
anchors.left: parent.left
y: 16
anchors.right: parent.right
text: "Field 1"
font.pixelSize: 32
color: focus ? "black" : "blue"
focus: false //true
KeyNavigation.tab: age
}
TextInput {
id: age
anchors.left: parent.left
y: 64
anchors.right: parent.right
text: "Field 2"
font.pixelSize: 32
color: focus ? "black" : "gray"
KeyNavigation.backtab: name
}
}
KeyNavigation.tab: age,按下tab键,将焦点导航到id为age的组件。
同理,KeyNavigation.backtab: name,按下shift+tab键,焦点将返回id为name的组件
2.键盘左右键
Rectangle {
id: rect2
anchors.top: rect1.bottom
anchors.topMargin: 5
width: 400
height: 200
color: "black"
Rectangle {
id: leftRect
x: 25
y: 25
width: 150
height: 150
color: focus ? "red" : "darkred"
KeyNavigation.right: rightRect
focus: false //true
}
Rectangle {
id: rightRect
x: 225
y: 25
width: 150
height: 150
color: focus ? "#00ff00" : "green"
KeyNavigation.left: leftRect
}
}
KeyNavigation.right: rightRect, 按下键盘向右键,聚焦到id为rightRect的组件;同理:KeyNavigation.left: leftRect,将导航的leftRect组件。
键盘事件
1.通用事件
通用事件: 没有指定具体哪个按键的事件,比如:onPressed, onReleased, …
处理通用事件时,需要通知事件已经被处理了:
event.accepted = true
否则,这个事件将会传递下去;
Item {
focus: true
Keys.onPressed: {
if (event.key == Qt.Key_Left) {
console.log("move left");
// Must accept explicitly
event.accepted = true;
}
}
}
2.专用事件
专用事件:onReturnedPressed, onSelectPressed,
onVolumeUpPressed, …
专用事件默认就将事件处理了。
Item {
focus: true
// Accepts the event by default
Keys.onLeftPressed:
console.log("move left")
}
例子
实现键盘左右键转动图片
Rectangle {
id: rect3
anchors.top: rect2.bottom
anchors.topMargin: 5
width: 400
height: 400
color: "black"
Image {
id: rocket
x: 150; y: 150
source: "images/rocket.jpg"
//transform-origin是变形原点,原点就是元素绕着旋转或变形的点
transformOrigin: Item.Left
}
Keys.onLeftPressed:
rocket.rotation -= 10
Keys.onRightPressed:
rocket.rotation = (rocket.rotation + 10) % 360
focus: true
}
练习题
• 制作一个用户界面,布局与下面的图类似。并支持以下特性: • 当 items获取焦点的时候,颜色发生改变
• 点击一个item,就让它获取焦点
• 焦点可以通过方向键改变
代码如下:
Rectangle {
id: rect4
anchors.left: rect1.right
anchors.leftMargin: 5
width: 400
height: 400
opacity: 1
Grid {
columns: 2
spacing: 10
width: parent.width
height: parent.height
Rectangle {
id: rect4_lefttop
width: 50
height: 50
color: focus ? "lightblue" : "darkblue"
focus: true
KeyNavigation.right: rect4_righttop
KeyNavigation.down: rect4_leftbottom
MouseArea {
anchors.fill: parent
onClicked: parent.focus = true;
}
}
Rectangle {
id: rect4_righttop
width: 50
height: 50
color: focus ? "green" : "darkgreen"
KeyNavigation.left: rect4_lefttop
KeyNavigation.down: rect4_rightbottom
MouseArea {
anchors.fill: parent
onClicked: parent.focus = true;
}
}
Rectangle {
id: rect4_leftbottom
width: 50
height: 50
color: focus ? "gray" : "darkgray"
KeyNavigation.up: rect4_lefttop
KeyNavigation.right: rect4_rightbottom
MouseArea {
anchors.fill: parent
onClicked: parent.focus = true;
}
}
Rectangle {
id: rect4_rightbottom
width: 50
height: 50
color: focus ? "purple" : "darkpurple"
KeyNavigation.up: rect4_righttop
KeyNavigation.left: rect4_leftbottom
MouseArea {
anchors.fill: parent
onClicked: {
parent.focus = true;
}
}
}
}
}
• 使用Grid和Rectangle组成界面,space设置组件键间隔
• color: focus ? “purple” : "darkpurple"根据聚焦与否改变组件颜色
• 用KeyNavigation.left/right/up/down导航,将焦点转到响应的id的组件
• 在组件内使用MouseArea.onClicked: parent.focus = true, 使得点击组件时候聚焦,颜色改变
注意
• 如果不加parent.foucs: MouseArea.onCLiced: focus = true, 那么聚焦的不是当前的组件,而是根组件,颜色不会改变
QML__Nokia内部培训资料.pdf