diff options
Diffstat (limited to 'doc/qtcreator/src/qtquick/qtquick-states.qdoc')
| -rw-r--r-- | doc/qtcreator/src/qtquick/qtquick-states.qdoc | 107 |
1 files changed, 52 insertions, 55 deletions
diff --git a/doc/qtcreator/src/qtquick/qtquick-states.qdoc b/doc/qtcreator/src/qtquick/qtquick-states.qdoc index d670fb21b5..d3902d34d6 100644 --- a/doc/qtcreator/src/qtquick/qtquick-states.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-states.qdoc @@ -55,56 +55,59 @@ \list \li Show some UI items and hide others. \li Present different available actions to the user. - \li Start, stop or pause animations. + \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. \endlist + \section1 Creating States + The \uicontrol States view displays the different \l{State}{states} - of the component in the Design mode. The \uicontrol States view is - collapsed by default to save space. Select \uicontrol Expand in - the context menu to view the whole view. + of a UI, beginning with a \e {base state}. \image qmldesigner-transitions.png "States view" 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 view, 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. - Set the value of the property to an expression that - evaluates to \c true when you want the state to be applied. - In the binding editor, select the component and property to - create the expression. For example, to change the state when - a button is pressed, you could select a button component and - its pressed property. - - \image qtquick-states-binding-editor.png "Binding editor in States view" - - You can preview the states in the \uicontrol States view and click them to - switch between states on the canvas. + button. Click the new state to switch to it in \uicontrol {Form Editor}, + and then modify the properties of components in \uicontrol Properties. - \section1 Using States + 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 view, + you can change the position of an object in \uicontrol {Form Editor} + and then add animation to the change between the states. + + The properties that you change in a state are highlighted with blue color. + In \uicontrol {Text Editor}, you can see the changes recorded as changes + to the base state. - QML states typically describe user interface configurations, such as the UI - controls, their properties and behavior and the available actions. For - example, you can use states to create two views. + \image qmldesigner-states.png "States and Properties views" - To add states, click the empty slot in the \uicontrol States view. - Then modify the new state in the \uicontrol {Form Editor} or the - \uicontrol Properties view. + \section1 Setting the Default State - \image qmldesigner-states.png "States view" + To determine the startup state of the application, + select \inlineimage icons/action-icon.png + to open the \uicontrol Actions menu, and then select + \uicontrol {Set as Default}. - The properties that you change in a state are highlighted with blue color. - In the \uicontrol {Text Editor}, you can see the changes recorded as changes - to the base state. + To reset the state later, select \uicontrol Actions > + \uicontrol {Reset Default}. + + \section1 Applying States + + To determine when a state should be applied, select \uicontrol Actions > + \uicontrol {Set when Condition}. In \uicontrol {Binding Editor}, specify + a \l [QtQuick]{State::when}{when} property for the state. Set the value of + the property to an expression that evaluates to \c true when you want the + state to be applied. + + In \uicontrol {Binding Editor}, select the component and property to + create the expression. For example, to change the state when a button is + pressed, you could select a button component and its pressed property. + + \image qtquick-states-binding-editor.png "Binding Editor in States view" + + \section1 Using States To keep the QML code clean, you should create a base state that contains all the types you will need in the application. You can then create states, @@ -124,30 +127,24 @@ To create views for an application by using states: + \image qmldesigner-screen-design.png "Designing views" + \list 1 \li In the base state, add all items you will need in the application (1). While you work on one view, you can click the \inlineimage eye_open.png icon to hide items on the canvas that are not part of a view. - \li In the \uicontrol States view, click the empty slot to create a + \li In \uicontrol States, click the empty slot to create a new state and give it a name. For example, \c Normal. - \li In the \uicontrol Properties view (2), deselect the - \uicontrol Visibility check box or set \uicontrol Opacity to 0 - for each item that is not needed in this view. If you specify - the setting for the parent item, all child items inherit it and - are also hidden. - \image qmldesigner-screen-design.png "Designing views" + \li In \uicontrol Properties (2), deselect the \uicontrol Visibility + check box or set \uicontrol Opacity to 0 for each item that is not + needed in this view. If you specify the setting for the parent item, + all child items inherit it and are also hidden. \li Create additional states for each view and set the visibility or opacity of the items in the view. - \li To determine which view opens when the application starts, use the - \uicontrol {Text Editor} to set the state of the root item of the - .qml file, as specified by the following code snippet: - \qml - Item { - state: "Normal" - } - \endqml - \endlist + \li To determine which state is applied when the application starts, + select \uicontrol Actions > \uicontrol {Set as Default}. + \endlist \if defined(qtcreator) \include qtquick-states-scxml.qdocinc scxml state machines @@ -165,7 +162,7 @@ the type of behavior that is required. You can drag and drop the following QML types from \uicontrol Library - > \uicontrol {QML Types} > \uicontrol {Qt Quick - Animation} to the + > \uicontrol {QML Types} > \uicontrol {Qt Quick - Animation} to \uicontrol Navigator or \uicontrol {Form Editor}: \list @@ -181,10 +178,10 @@ sequential animation to create a step where nothing happens, for a specified duration. \li \l [QML] {PropertyAction}{Property Action} immediately changes - a propertyvalue during an animation, without animating the property - change. + a property value during an animation, without animating the + property change. \li \l [QML] {PropertyAnimation}{Property Animation} animates - changes in thevalue of a property. + changes in the value of a property. \li \l [QML] {ScriptAction}{Script Action} defines scripts to be run during an animation. \li \l [QML] {SequentialAnimation}{Sequential Animation} enables |