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")
}