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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
/****************************************************************************
**
** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
** All rights reserved.
** Contact: Nokia Corporation (qt-info@nokia.com)
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:FDL$
** Commercial Usage
** Licensees holding valid Qt Commercial licenses may use this file in
** accordance with the Qt Commercial License Agreement provided with the
** Software or, alternatively, in accordance with the terms contained in a
** written agreement between you and Nokia.
**
** GNU Free Documentation License
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of this
** file.
**
** If you have questions regarding the use of this file, please contact
** Nokia at qt-info@nokia.com.
** $QT_END_LICENSE$
**
****************************************************************************/
/*!
\page qdeclarativestates.html
\target qmlstates
\title QML States
\section1 Overview
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 An Address Book application with a 'View Contact' state and an 'Edit Contact' State. In the first state the contact information presented is read-only (using labels), and in the second it is editable (using editors).
\o A button with a pressed and unpressed state. When pressed the text moves slightly down and to the right, and the button has a slightly darker appearance.
\endlist
\section1 States in QML
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
To define a state for an item, add a \l State element to the \l{Item::states}{states} property. To
change the current state of an \l Item, set the \l{Item::state}{state} property to the name
of the required state.
Here is an example of using states. In the default state \c myRect is positioned at 0,0. In the 'moved' state it is positioned at 50,50. Clicking within the mouse area changes the state from the default state to the 'moved' state, thus moving the rectangle.
\snippet doc/src/snippets/declarative/states.qml 0
\snippet doc/src/snippets/declarative/states.qml 1
State changes can be animated using \l{state-transitions}{Transitions}.
For example, adding this code to the above \c Item element animates the transition to the "moved" state:
\snippet doc/src/snippets/declarative/states.qml transitions
See \l{state-transitions}{Transitions} for more information.
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
*/
|
