forked from qt-creator/qt-creator
e1fbeedcd4
Change-Id: Idc898b6ac70b6d3186d353086b5f3e45830d1f83 Reviewed-by: Topi Reiniö <topi.reinio@digia.com>
386 lines
14 KiB
Plaintext
386 lines
14 KiB
Plaintext
/****************************************************************************
|
|
**
|
|
** Copyright (c) 2014 Digia Plc and/or its subsidiary(-ies).
|
|
** Contact: http://www.qt-project.org/legal
|
|
**
|
|
** This file is part of Qt Creator
|
|
**
|
|
**
|
|
** 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.
|
|
**
|
|
**
|
|
****************************************************************************/
|
|
|
|
// **********************************************************************
|
|
// NOTE: the sections are not ordered by their logical order to avoid
|
|
// reshuffling the file each time the index order changes (i.e., often).
|
|
// Run the fixnavi.pl script to adjust the links to the index order.
|
|
// **********************************************************************
|
|
|
|
/*!
|
|
\contentspage {Qt Creator Manual}
|
|
\previouspage creator-tutorials.html
|
|
\page creator-qml-application.html
|
|
\nextpage creator-writing-program.html
|
|
|
|
\title Creating a Qt Quick Application
|
|
|
|
This tutorial uses built-in QML types and illustrates basic concepts of
|
|
\l{Qt Quick}.
|
|
|
|
This tutorial describes how to use \QC to implement Qt Quick states and
|
|
transitions. We
|
|
create an application that displays a Qt logo that moves between three rectangles on the
|
|
page when you click them.
|
|
|
|
\image qmldesigner-tutorial.png "States and transitions example"
|
|
|
|
For more information about using \QMLD, see
|
|
\l{Developing Qt Quick Applications}.
|
|
|
|
\section1 Creating the Project
|
|
|
|
\list 1
|
|
|
|
\li Select \uicontrol{File > New File or Project > Application >
|
|
Qt Quick Application > Choose}.
|
|
|
|
\li In the \uicontrol{Name} field, type \b {Transitions}.
|
|
|
|
\li In the \uicontrol {Create in} field, enter the path for the project files.
|
|
For example, \c {C:\Qt\examples}, and then click \uicontrol{Next} (on
|
|
Windows and Linux) or \uicontrol Continue (on OS X).
|
|
|
|
\li In the \uicontrol {Qt Quick component set} field, select
|
|
\uicontrol {Qt Quick 2.1}.
|
|
|
|
\li Select \l{glossary-buildandrun-kit}{kits} for running and building your project,
|
|
and then click \uicontrol{Next}.
|
|
|
|
\note Kits are listed if they have been specified in \uicontrol Tools >
|
|
\uicontrol Options > \uicontrol {Build & Run} > \uicontrol Kits (on Windows and Linux)
|
|
or in \uicontrol {Qt Creator} > \uicontrol Preferences \uicontrol {Build & Run} >
|
|
\uicontrol Kits (on OS X).
|
|
|
|
\li Select \uicontrol Next in the following dialogs to use the default
|
|
settings.
|
|
|
|
\li Review the project settings, and click \uicontrol{Finish} (on Windows and
|
|
Linux) or \uicontrol Done (on OS X) to create the project.
|
|
|
|
\li Press \key {Ctrl+R} (or \key {Cmd+R}) to run the application.
|
|
|
|
\endlist
|
|
|
|
\QC generates a default QML file that you can modify to create the main view
|
|
of the application.
|
|
|
|
\image qmldesigner-tutorial-project.png "Transitions project in Edit mode"
|
|
|
|
\section1 Creating the Main View
|
|
|
|
The main view of the application displays a Qt logo in the top left corner
|
|
of the screen and two empty rectangles.
|
|
|
|
To use the states.png image in your application, you must copy it to the
|
|
project directory (same subdirectory as the QML file) from the examples
|
|
directory in the Qt installation directory. For example:
|
|
\c {C:\Qt\Qt5.3.0\5.3.0\msvc2010\examples\declarative\animation\states}. The
|
|
image appears
|
|
in \uicontrol Resources. You can also use any other image or a QML
|
|
type, instead.
|
|
|
|
\list 1
|
|
|
|
\li In the \uicontrol Projects view, double-click the main.qml file
|
|
to open it in the code editor.
|
|
|
|
\li Click \uicontrol Design to open the file in \QMLD.
|
|
|
|
\image qmldesigner-tutorial-desing-mode.png "Transitions project in Design Mode"
|
|
|
|
\li In the \uicontrol Navigator, select \uicontrol Text and press \key Delete to
|
|
delete it.
|
|
|
|
\li Select \uicontrol Window to edit its properties.
|
|
|
|
\image qmldesigner-tutorial-page.png "Page properties"
|
|
|
|
\list a
|
|
|
|
\li In the \uicontrol Id field, enter \e page, to be able to reference the
|
|
window from other places.
|
|
|
|
\li In the code editor, set the window background color to #343434:
|
|
|
|
\quotefromfile transitions/main.qml
|
|
\skipto Window {
|
|
\printuntil color
|
|
|
|
\li Delete the \c {Qt.quit();} command.
|
|
|
|
\endlist
|
|
|
|
\li In \uicontrol Library > \uicontrol Resources, select states.png and
|
|
drag and drop it to the canvas.
|
|
|
|
\image qmldesigner-tutorial-user-icon.png "Image properties"
|
|
|
|
\list a
|
|
|
|
\li In the \uicontrol Id field, enter \e icon.
|
|
|
|
\li In the \uicontrol Position field, set \uicontrol X to 10 and \uicontrol Y to 20.
|
|
|
|
\endlist
|
|
|
|
\li Double-click the resource file, qml.qrc, in the \uicontrol Projects view
|
|
to add states.png to the resource file for deployment.
|
|
|
|
\li Click \uicontrol Add and select states.png.
|
|
|
|
\li In the \uicontrol Design mode, \uicontrol Library view, \uicontrol {QML Types} tab,
|
|
select \uicontrol Rectangle,
|
|
drag and drop it to the canvas, and edit its properties.
|
|
|
|
\image qmldesigner-tutorial-topleftrect.png "Rectangle properties"
|
|
|
|
\list a
|
|
|
|
\li In the \uicontrol Id field, enter \e topLeftRect.
|
|
|
|
\li In the \uicontrol Size field, set \uicontrol W and \uicontrol H to 64, for the
|
|
rectangle size to match the image size.
|
|
|
|
\li In the \uicontrol Color field, click the
|
|
\inlineimage qmldesigner-transparent-button.png
|
|
(\uicontrol Transparent) button to make the rectangle transparent.
|
|
|
|
\li In the \uicontrol Border field, set the border color to #808080.
|
|
|
|
\li In the \uicontrol Rectangle group, \uicontrol Border field, set the border
|
|
width to 1.
|
|
|
|
\note If the \uicontrol Border field does not appear after you set the
|
|
border color, try setting the border color to solid by clicking
|
|
the
|
|
\inlineimage qmldesigner-solid-color-button.png
|
|
(\uicontrol {Solid Color}) button.
|
|
|
|
\li In the \uicontrol Radius field, select 6 to create rounded corners for
|
|
the rectangle.
|
|
|
|
\li Click \uicontrol {Layout}, and then click the top and left anchor
|
|
buttons to anchor the rectangle to the top left corner of the
|
|
page.
|
|
|
|
\image qmldesigner-tutorial-topleftrect-layout.png "Layout tab"
|
|
|
|
\li In the \uicontrol Margin field, select 20 for the top anchor and 10
|
|
for the left anchor.
|
|
|
|
\endlist
|
|
|
|
\li In the \uicontrol Navigator, drag and drop the \uicontrol {Mouse Area}
|
|
from \e page to \e topLeftRect to make it apply only to the
|
|
rectangle and not to the whole page.
|
|
|
|
\li Edit the \uicontrol {Mouse Area} properties:
|
|
|
|
\list a
|
|
|
|
\li Click \uicontrol {Layout}, and then click the
|
|
\inlineimage qmldesigner-anchor-fill-screen.png
|
|
(\uicontrol {Fill to Parent}) button to anchor the mouse area to the
|
|
rectangle.
|
|
|
|
\li In the code editor, edit the pointer to the clicked expression
|
|
in the mouse area, as illustrated by the following code
|
|
snippet:
|
|
|
|
\quotefromfile transitions/main.qml
|
|
\skipto MouseArea
|
|
\printuntil }
|
|
|
|
The expression sets the state to the base state and returns the
|
|
image to its initial position.
|
|
You will create stateGroup later.
|
|
|
|
\endlist
|
|
|
|
The qml.main file should now look as follows:
|
|
|
|
\quotefromfile transitions/main.qml
|
|
\skipto Window {
|
|
\printuntil onClicked
|
|
\printuntil }
|
|
\printuntil }
|
|
\printuntil }
|
|
|
|
\li In the \uicontrol Navigator, copy topLeftRect (by pressing
|
|
\key {Ctrl+C}) and paste it to the canvas twice (by pressing
|
|
\key {Ctrl+V}). \QC renames the new instances of the type
|
|
topLeftRect1 and topLeftRect2.
|
|
|
|
\li Select topLeftRect1 and edit its properties:
|
|
|
|
\list a
|
|
|
|
\li In the \uicontrol Id field, enter \e middleRightRect.
|
|
|
|
\li In \uicontrol {Layout}, select the vertical center anchor button and
|
|
then the right anchor button to
|
|
anchor the rectangle to the middle right margin of the screen.
|
|
|
|
\li In the \uicontrol Margin field, select 10 for the right anchor and 0
|
|
for the vertical center anchor.
|
|
|
|
\li In the code editor, add a pointer to a clicked expression to the
|
|
mouse area. The following expression sets the state to
|
|
\e State1:
|
|
|
|
\c {onClicked: stateGroup.state = 'State1'}
|
|
|
|
You will create State1 later.
|
|
|
|
\endlist
|
|
|
|
\li Select topLeftRect2 and edit its properties:
|
|
|
|
\list a
|
|
|
|
\li In the \uicontrol Id field, enter \e bottomLeftRect.
|
|
|
|
\li In \uicontrol {Layout}, select the bottom and left anchor buttons to
|
|
anchor the rectangle to the bottom left margin of the screen.
|
|
|
|
\li In the \uicontrol Margin field, select 20 for the bottom anchor and 10
|
|
for the left anchor.
|
|
|
|
\li In the code editor, add a pointer to a clicked expression to the
|
|
mouse area. The following expression sets the state to
|
|
\e State2:
|
|
|
|
\c {onClicked: stateGroup.state = 'State2'}
|
|
|
|
You will create State2 later.
|
|
|
|
The qml.main file should now look as follows:
|
|
|
|
\quotefromfile transitions/main.qml
|
|
\skipto Window {
|
|
\printuntil State2
|
|
\printuntil }
|
|
\printuntil }
|
|
\printuntil }
|
|
|
|
\endlist
|
|
|
|
\li Press \key {Ctrl+S} to save the changes.
|
|
|
|
\li Press \key {Ctrl+R} to run the application.
|
|
|
|
\endlist
|
|
|
|
\image qmldesigner-tutorial.png "States and transitions example"
|
|
|
|
You should see the Qt logo in the top left rectangle, and two additional
|
|
rectangles in the center right and bottom left of the screen.
|
|
|
|
You can now create additional states to add views to the application.
|
|
|
|
\section1 Adding Views
|
|
|
|
In the .qml file, you already created pointers to two additional states:
|
|
State1 and State2. You cannot use the \QMLD to add states for a Window QML
|
|
type. Use the code editor to add the states inside a StateGroup QML type and
|
|
refer to them by using the id of the state group:
|
|
|
|
\list 1
|
|
|
|
\li Bind the position of the Qt logo to the
|
|
rectangle to make sure that the logo is displayed within the
|
|
rectangle when the view is scaled on different sizes of screens. Set
|
|
expressions for the x and y properties, as illustrated by the
|
|
following code snippet:
|
|
|
|
\quotefromfile transitions/main.qml
|
|
\skipto StateGroup {
|
|
\printuntil ]
|
|
|
|
\li Press \key {Ctrl+R} to run the application.
|
|
|
|
\endlist
|
|
|
|
Click the rectangles to move the Qt logo from one rectangle to another.
|
|
|
|
\section1 Adding Animation to the View
|
|
|
|
Add transitions inside the state group to define how the properties change
|
|
when the Qt logo moves
|
|
between states. The transitions apply animations to the Qt logo. For example,
|
|
the Qt logo bounces back when it moves to the middleRightRect and eases into
|
|
bottomLeftRect. Add the transitions in the code editor.
|
|
|
|
\list 1
|
|
|
|
\li In the code editor, add the following code to specify that when
|
|
moving to State1, the x and y coordinates of the Qt logo change
|
|
linearly over a duration of 1 second:
|
|
|
|
\dots
|
|
\skipto transitions
|
|
\printuntil },
|
|
|
|
\li You can use the Qt Quick toolbar for animation to change the easing
|
|
curve type from linear to OutBounce:
|
|
|
|
\list a
|
|
|
|
\li Click \uicontrol NumberAnimation in the code editor to display the
|
|
\inlineimage qml-toolbar-indicator.png
|
|
icon, and then click the icon to open the toolbar:
|
|
|
|
\image qmldesigner-tutorial-quick-toolbar.png "Qt Quick toolbar for animation"
|
|
|
|
\li In the \uicontrol Easing field, select \uicontrol Bounce.
|
|
|
|
\li In the \uicontrol Subtype field, select \uicontrol Out.
|
|
|
|
\endlist
|
|
|
|
\li Add the following code to specify that when moving to State2, the x
|
|
and y coordinates of the Qt logo change over a duration of 2
|
|
seconds, and an InOutQuad easing function is used:
|
|
|
|
\dots
|
|
\printuntil },
|
|
|
|
\li Add the following code to specify that for any other state changes,
|
|
the x and y coordinates of the Qt logo change linearly over a
|
|
duration of 200 milliseconds:
|
|
|
|
\dots
|
|
\printuntil ]
|
|
|
|
\li Press \key {Ctrl+R} to run the application.
|
|
|
|
\endlist
|
|
|
|
Click the rectangles to view the animated transitions.
|
|
|
|
\section1 Example Code
|
|
|
|
When you have completed the steps, the main.qml file should look as follows:
|
|
|
|
\quotefromfile transitions/main.qml
|
|
\skipto Window {
|
|
\printuntil /^\}/
|
|
|
|
*/
|