blob: ddb0fc87cb45774cb0753d02de5d6d68e0459277 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
/*!
\page qmlstates.html
\target qmlstates
\title QML States
QML states typically describe user interface configurations, including:
\list
\o What UI elements are present
\o The properties of those elements (including how they behave)
\o What actions are available
\endlist
A state can also be thought of as a set of batched changes from a default configuration.
Examples of states in modern UI:
\list
\o A Contacts application has a 'View Contact' state and an 'Edit Contact' State. In the first state the information presented is static (using labels), and in the second it is editable (using editors).
\o A button has a pressed and unpressed state. When pressed the text moves down and to the right, and the button has a slightly darker appearance.
\endlist
In QML:
\list
\o Any object can use states.
\o There is a default state. The default state can be explicitly set.
\o A state can affect the properties of other objects, not just the object owning the state (and not just that object's children).
\endlist
The following example shows a simple use of states. In the default state \c myrect is positioned at 0,0. In the 'moved' state it is positioned at 50,50.
\code
Item {
Rectangle {
id: myrect
width: 100
height: 100
}
states: [
State {
name: "moved"
PropertyChanges {
target: myrect
x: 50
y: 50
}
}
]
}
\endcode
To animate state changes, you can use \l{state-transitions}{transitions}.
Other things you can do in a state change:
\list
\o override signal handlers with PropertyChanges
\o change an item's visual parent with ParentChange
\o change an item's anchors with AnchorChanges
\o run some script with StateChangeScript
\endlist
*/
|
