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
86
87
88
|
/****************************************************************************
**
** Copyright (C) 2018 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator documentation.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** 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. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
**
****************************************************************************/
/*!
\contentspage {Qt Creator Manual}
\previouspage quick-connections-backend.html
\page quick-states.html
\nextpage quick-components.html
\title Adding States
User interfaces are designed to present different interface configurations
in different scenarios, or to modify their appearances in response to user
interaction. Often, there are a set of changes that are made concurrently,
such that the interface could be seen to be internally changing from one
\e state to another.
This applies generally to interfaces regardless of their complexity. A photo
viewer may initially present images in a grid, and when an image is clicked,
change to a detailed state where the individual image is expanded and the
interface is changed to present new options for image editing. At the other
end of the scale, when a button is pressed, it may change to a
\e pressed state in which its color and position are modified so that it
appears to be pressed down.
In QML, any item can change between different states to apply sets of
changes that modify the properties of relevant items. Each state can
present a different configuration that can, for example:
\list
\li Show some UI items and hide others.
\li Present different available actions to the user.
\li Start, stop or pause animations.
\li Execute some script required in the new state.
\li Change a property value for a particular item.
\li Show a different view or screen.
\endlist
The \uicontrol State pane displays the different \l{State}{states}
of the component in the Design mode. The \uicontrol State pane is
collapsed by default to save space. Select \uicontrol Expand in
the context menu to view the whole pane.
\image qmldesigner-transitions.png "State pane"
To add states, click the \inlineimage plus.png
button. Then modify the new state in the editor. For example, to change the
appearance of a button, you can hide the button image and show another image
in its place. Or, to add movement to the screen, you can change the position
of an object on the canvas and then add animation to the change between the
states.
To determine when the state should be applied, select
\uicontrol {Set when Condition} in the menu and specify a
\l [QtQuick]{State::when}{when} property for the state.
You can preview the states in the \uicontrol State pane and click them to
switch between states on the canvas.
For more information about using states, see \l{Creating Screens}.
If you add animation to the states, you can run the application to test the
animation.
For more information about adding animation, see \l{Animating Screens}.
*/
|
