Doc: Update Qt Quick app tutorial

The wizard and UI have changed.

Change-Id: I43d9101abdcfec362746b069509293df2317ae99
Reviewed-by: Tim Jenssen's avatarTim Jenssen <tim.jenssen@qt.io>
parent 7b66a742
import QtQuick 2.7
Page1Form {
}
import QtQuick 2.6
import QtQuick.Controls 1.5
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
Item {
id: page
width: 640
height: 480
property alias mouseArea1: mouseArea1
property alias mouseArea3: mouseArea3
property alias mouseArea2: mouseArea2
width: 300
height: 300
property alias icon: icon
property alias topLeftRect: topLeftRect
property alias bottomLeftRect: bottomLeftRect
property alias middleRightRect: middleRightRect
property alias topLeftRect: topLeftRect
property alias icon: icon
property alias mouseArea2: mouseArea2
property alias mouseArea1: mouseArea1
property alias mouseArea: mouseArea
Image {
id: icon
......@@ -26,56 +27,46 @@ Item {
width: 55
height: 41
color: "#00000000"
radius: 0
border.color: "#808080"
anchors.left: parent.left
anchors.leftMargin: 10
anchors.top: parent.top
anchors.topMargin: 20
border.width: 1
border.color: "#808080"
MouseArea {
id: mouseArea1
id: mouseArea
anchors.fill: parent
}
}
Rectangle {
id: middleRightRect
x: -8
y: 6
width: 55
height: 41
color: "#00000000"
radius: 0
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 10
anchors.verticalCenter: parent.verticalCenter
border.color: "#808080"
MouseArea {
id: mouseArea2
id: mouseArea1
anchors.fill: parent
}
border.width: 1
border.color: "#808080"
}
Rectangle {
id: bottomLeftRect
y: -2
width: 55
height: 41
color: "#00000000"
radius: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 20
anchors.left: parent.left
anchors.leftMargin: 10
border.color: "#808080"
MouseArea {
id: mouseArea3
id: mouseArea2
anchors.fill: parent
}
border.width: 1
border.color: "#808080"
anchors.left: parent.left
anchors.leftMargin: 10
}
}
......@@ -3,10 +3,11 @@
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
engine.load(QUrl(QLatin1String("qrc:/main.qml")));
return app.exec();
}
import QtQuick 2.6
import QtQuick.Controls 1.5
import QtQuick.Dialogs 1.2
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
ApplicationWindow {
visible: true
width: 330
height: 330
width: 640
height: 480
title: qsTr("Transitions")
MainForm {
Page1Form {
anchors.fill: parent
id: page
mouseArea {
onClicked: stateGroup.state = ' '
}
mouseArea1 {
onClicked: stateGroup.state = ' '
}
mouseArea2 {
onClicked: stateGroup.state = 'State1'
}
mouseArea3 {
onClicked: stateGroup.state = 'State2'
}
onClicked: stateGroup.state = 'State1'
}
mouseArea2 {
onClicked: stateGroup.state = 'State2'
}
}
StateGroup {
id: stateGroup
states: [
State {
name: "State1"
id: stateGroup
states: [
State {
name: "State1"
PropertyChanges {
target: page.icon
x: page.middleRightRect.x
y: page.middleRightRect.y
}
},
State {
name: "State2"
PropertyChanges {
target: page.icon
x: page.middleRightRect.x
y: page.middleRightRect.y
}
},
State {
name: "State2"
PropertyChanges {
target: page.icon
x: page.bottomLeftRect.x
y: page.bottomLeftRect.y
}
PropertyChanges {
target: page.icon
x: page.bottomLeftRect.x
y: page.bottomLeftRect.y
}
]
transitions: [
Transition {
from: "*"; to: "State1"
NumberAnimation {
easing.type: Easing.OutBounce
properties: "x,y";
duration: 1000
}
},
Transition {
from: "*"; to: "State2"
NumberAnimation {
properties: "x,y";
easing.type: Easing.InOutQuad;
duration: 2000
}
},
Transition {
NumberAnimation {
properties: "x,y";
duration: 200
}
}
]
}
]
transitions: [
Transition {
from: "*"; to: "State1"
NumberAnimation {
easing.type: Easing.OutBounce
properties: "x,y";
duration: 1000
}
},
Transition {
from: "*"; to: "State2"
NumberAnimation {
properties: "x,y";
easing.type: Easing.InOutQuad;
duration: 2000
}
},
Transition {
NumberAnimation {
properties: "x,y";
duration: 200
}
}
]
}
}
<RCC>
<qresource prefix="/">
<file>main.qml</file>
<file>MainForm.ui.qml</file>
<file>Page1.qml</file>
<file>Page1Form.ui.qml</file>
<file>qtquickcontrols2.conf</file>
<file>qt-logo.png</file>
</qresource>
</RCC>
; This file can be edited to change the style of the application
; See Styling Qt Quick Controls 2 in the documentation for details:
; http://doc.qt.io/qt-5/qtquickcontrols2-styles.html
[Controls]
Style=Default
[Universal]
Theme=Light
;Accent=Steel
[Material]
Theme=Light
;Accent=BlueGrey
;Primary=BlueGray
TEMPLATE = app
QT += qml quick
CONFIG += c++11
......@@ -11,5 +9,21 @@ RESOURCES += qml.qrc
# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =
# Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH =
# The following define makes your compiler emit warnings if you use
# any feature of Qt which as been marked deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS
# You can also make your code fail to compile if you use deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0
# Default rules for deployment.
include(deployment.pri)
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
doc/images/qmldesigner-tutorial.png

9.67 KB | W: | H:

doc/images/qmldesigner-tutorial.png

4.03 KB | W: | H:

doc/images/qmldesigner-tutorial.png
doc/images/qmldesigner-tutorial.png
doc/images/qmldesigner-tutorial.png
doc/images/qmldesigner-tutorial.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -39,6 +39,8 @@
This tutorial uses built-in QML types and illustrates basic concepts of
\l{Qt Quick}.
For more information about the UI choices you have, see \l{User Interfaces}.
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
......@@ -49,8 +51,8 @@
For more information about using \QMLD, see
\l{Developing Qt Quick Applications}.
For tutorials that describe using Qt Quick Controls, see
\l{Qt Quick Text Editor Guide} and \l{Qt Quick Controls - UI Forms}.
For examples of using Qt Quick Controls 2, see
\l{Qt Quick Controls 2 Examples}.
\include creator-tutorial-create-qq-project.qdocinc
......@@ -66,7 +68,7 @@
\list 1
\li In the \uicontrol Projects view, double-click the MainForm.ui.qml
\li In the \uicontrol Projects view, double-click the \e Page1Form.ui.qml
file to open it in \QMLD.
\image qmldesigner-tutorial-design-mode.png "Transitions project in Design Mode"
......@@ -179,28 +181,28 @@
\endlist
To check your code, you can open MainForm.ui.qml in the
\uicontrol Edit mode and compare it with the \l{transitions/MainForm.ui.qml}
{MainForm.ui.qml} example file.
To check your code, you can view \e Page1Form.ui.qml in the
\uicontrol {Text Editor} and compare it with the \l{transitions/Page1Form.ui.qml}
{Page1Form.ui.qml} example file.
The new project wizard adds boilerplate code to the \e Page1.qml file to
create menu items and push buttons. Modify the boilerplate code by removing
obsolete code. You removed the push buttons from the
UI form, so you also need to remove the corresponding code from
\e Page1.qml (or the application cannot be built).
The UI is now ready and you can switch to editing the \e main.qml file in
the \uicontrol Edit mode to add animation to the application, as described
the \uicontrol {Text Editor} to add animation to the application, as described
in the following section.
\image qmldesigner-tutorial-ui-ready.png "Transitions UI"
\section1 Adding Application Logic
The new project wizard adds boilerplate code to the \e main.qml file to
create menu items and push buttons. Modify the boilerplate code by removing
obsolete code and by adding new code. You removed the push buttons from the
UI form, so you also need to remove the corresponding code from
\e main.qml (or the application cannot be built).
Edit the main.qml file to add pointers to two additional states: \e State1
and \e 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.
Edit the \e main.qml file to add pointers to two additional states: \e State1
and \e State2. You cannot use the \uicontrol {Form Editor} to add states for
a Window QML type. Use the \uicontrol {Text Editor} to add the states inside
a StateGroup QML type and refer to them by using the id of the state group.
\list 1
......@@ -211,24 +213,24 @@
\skipto ApplicationWindow
\printuntil title
\li Specify an id for the MainForm type to be able to use the properties
that you exported in \e MainForm.ui.qml:
\li Specify an id for the Page1 type to be able to use the properties
that you exported in \e Page1Form.ui.qml:
\printuntil page
\li Add a pointer to the clicked expressions in \uicontrol mouseArea1:
\li Add a pointer to the clicked expressions in \uicontrol mouseArea:
\printuntil }
The expression sets the state to the base state and returns the
image to its initial position.
\li Add a pointer to a clicked expression to \uicontrol mouseArea2
\li Add a pointer to a clicked expression to \uicontrol mouseArea1
to set the state to \e State1:
\printuntil }
\li Add a pointer to a clicked expression to \uicontrol mouseArea3 to
\li Add a pointer to a clicked expression to \uicontrol mouseArea2 to
set the state to \e State2:
\printuntil }
......@@ -254,13 +256,13 @@
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.
bottomLeftRect.
\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:
\li In the \uicontrol {Text 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:
\printuntil },
......@@ -269,8 +271,8 @@
\list a
\li Click \uicontrol NumberAnimation in the code editor to display the
\inlineimage refactormarker.png
\li Click \uicontrol NumberAnimation in the \uicontrol {Text Editor}
to display the \inlineimage refactormarker.png
icon, and then click the icon to open the toolbar:
\image qmldesigner-tutorial-quick-toolbar.png "Qt Quick toolbar for animation"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment