用户界面的各个部分可以用状态(state)来描述。状态定义了一组属性更改,并且可以由特定条件触发。这些状态可以附加过渡(transition),过渡定义发生状态更改时要运行的动画或动作。
一、状态(state、states和State)
state属性用于保存当前item的状态。states属性被指定为State对象的数组。任何State属性都要放在states数组中。
State元素定义了当前item的一系列状态。State的name属性表示状态的名称。name属性默认是一个空字符串。 可以通过将此name设置为空字符串来将item恢复为默认状态。除了name外,State元素还包含了一系列的PropertyChanges元素,PropertyChanges和State绑定,内部定义了在对应状态下的作用目标(target)和相应的属性值。 这样,可以在状态变化时,更改对应目标的属性值。
示例
import QtQuick 2.9
Item {
id: root
width: 640
height: 480
state: "stop"
Rectangle {
id:light1
x:30
y:30
width: light1.x+parent.width/3
height: light1.width
color: "yellow"
border.color: "black"
radius: light1.width/2
}
Rectangle {
id:light2
x:light1.width+2*light1.x
y:light1.y
width: light1.width
height: light1.height
color: "yellow"
border.color: "black"
radius: light1.width/2
}
states: [
State {
name: "stop"; when:mouseare.pressed
PropertyChanges {
target: light1
color:"black"
}
PropertyChanges {
target: light2
color:"red"
}
},
State {
name: "go"
PropertyChanges {
target: light1
color:"green"
}
PropertyChanges {
target: light2
color:"black"
}
}
]
MouseArea {
id:mousearea
anchors.fill: root
onClicked: {
if (root.state=="go") {
root.state="stop"
}
else {
root.state="go"
}
}
}
}
上述代码使用rectangle画圆(只需要将rectangle的width和height设为相同的值,然后radius属性设为height或者width的一半即可)。在states中定义了stop和go两种状态,然后状态变换时,light1和light2对应进行变化。此外,states中的State的name属性还可以和when连用,格式是name:"state val";when condition
二、过渡(transitions和Transition)
状态更改时,过渡此时可以运行状态变化是的动画或者动作。可以使用from和to属性定义从某个特定状态切换到其他状态时的过渡。from和to后面还可以接通配符*,表示任何状态。
transitions的作用和states是等同的,Transition和State是等同的
示例
将下面代码添加到上述代码的最后面
transitions: [
Transition {
from: "go"
to: "stop"
ColorAnimation {
target:light1
property:"color"
duration: 1000
}
ColorAnimation {
target:light2
property:"color"
duration: 1000
}
},
Transition {
from: "stop"
to: "go"
ColorAnimation {
target:light1
property:"color"
duration: 1000
}
ColorAnimation {
target:light2
property:"color"
duration: 1000
}
}
]
上述两个Transition只是from和to不同,而且状态较少,可以使用通配符指定任何过渡状态
transitions: [
Transition {
from: "*"
to: "*"
ColorAnimation {
target:light1
property:"color"
duration: 1000
}
ColorAnimation {
target:light2
property:"color"
duration: 1000
}
}
]
效果完全
参考
《qml book》
欢迎大家评论交流,作者水平有限,如有错误,欢迎指出