forked from qt-creator/qt-creator
Doc: update the Transitions example to use UI forms
Move the instructions for creating the project into an include file that can be used for all Qt Quick Application tutorials. Change-Id: I02385f68f23ef2d3ee98b754344781ae1819203c Reviewed-by: Tim Jenssen <tim.jenssen@theqtcompany.com>
This commit is contained in:
Leena Miettinen
117
doc/examples/transitions/MainForm.ui.qml
Normal file
117
doc/examples/transitions/MainForm.ui.qml
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
/****************************************************************************
|
||||||
|
**
|
||||||
|
** Copyright (C) 2015 The Qt Company Ltd.
|
||||||
|
** Contact: http://www.qt.io/licensing/
|
||||||
|
**
|
||||||
|
** This file is part of the examples of the Qt Toolkit.
|
||||||
|
**
|
||||||
|
** $QT_BEGIN_LICENSE:BSD$
|
||||||
|
** You may use this file under the terms of the BSD license as follows:
|
||||||
|
**
|
||||||
|
** "Redistribution and use in source and binary forms, with or without
|
||||||
|
** modification, are permitted provided that the following conditions are
|
||||||
|
** met:
|
||||||
|
** * Redistributions of source code must retain the above copyright
|
||||||
|
** notice, this list of conditions and the following disclaimer.
|
||||||
|
** * Redistributions in binary form must reproduce the above copyright
|
||||||
|
** notice, this list of conditions and the following disclaimer in
|
||||||
|
** the documentation and/or other materials provided with the
|
||||||
|
** distribution.
|
||||||
|
** * Neither the name of The Qt Company Ltd nor the names of its
|
||||||
|
** contributors may be used to endorse or promote products derived
|
||||||
|
** from this software without specific prior written permission.
|
||||||
|
**
|
||||||
|
**
|
||||||
|
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
|
||||||
|
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
|
||||||
|
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
|
||||||
|
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
|
||||||
|
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
||||||
|
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
|
||||||
|
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
|
||||||
|
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
|
||||||
|
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||||
|
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
||||||
|
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
|
||||||
|
**
|
||||||
|
** $QT_END_LICENSE$
|
||||||
|
**
|
||||||
|
****************************************************************************/
|
||||||
|
|
||||||
|
import QtQuick 2.5
|
||||||
|
import QtQuick.Controls 1.4
|
||||||
|
import QtQuick.Layouts 1.2
|
||||||
|
|
||||||
|
Item {
|
||||||
|
width: 640
|
||||||
|
height: 480
|
||||||
|
property alias bottomLeftRect: bottomLeftRect
|
||||||
|
property alias middleRightRect: middleRightRect
|
||||||
|
property alias topLeftRect: topLeftRect
|
||||||
|
property alias icon: icon
|
||||||
|
property alias mouseArea1: mouseArea1
|
||||||
|
property alias mouseArea2: mouseArea2
|
||||||
|
property alias mouseArea3: mouseArea3
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: topLeftRect
|
||||||
|
width: 46
|
||||||
|
height: 55
|
||||||
|
color: "#00000000"
|
||||||
|
radius: 6
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.leftMargin: 10
|
||||||
|
anchors.top: parent.top
|
||||||
|
anchors.topMargin: 20
|
||||||
|
border.color: "#808080"
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
id: mouseArea1
|
||||||
|
anchors.fill: parent
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: middleRightRect
|
||||||
|
x: 6
|
||||||
|
y: 6
|
||||||
|
width: 46
|
||||||
|
height: 55
|
||||||
|
color: "#00000000"
|
||||||
|
radius: 6
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.rightMargin: 10
|
||||||
|
MouseArea {
|
||||||
|
id: mouseArea2
|
||||||
|
anchors.fill: parent
|
||||||
|
}
|
||||||
|
border.color: "#808080"
|
||||||
|
}
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: bottomLeftRect
|
||||||
|
x: 0
|
||||||
|
y: 4
|
||||||
|
width: 46
|
||||||
|
height: 55
|
||||||
|
color: "#00000000"
|
||||||
|
radius: 6
|
||||||
|
anchors.bottom: parent.bottom
|
||||||
|
anchors.bottomMargin: 20
|
||||||
|
MouseArea {
|
||||||
|
id: mouseArea3
|
||||||
|
anchors.fill: parent
|
||||||
|
}
|
||||||
|
anchors.left: parent.left
|
||||||
|
border.color: "#808080"
|
||||||
|
anchors.leftMargin: 10
|
||||||
|
}
|
||||||
|
|
||||||
|
Image {
|
||||||
|
id: icon
|
||||||
|
x: 10
|
||||||
|
y: 20
|
||||||
|
source: "qt-logo.png"
|
||||||
|
}
|
||||||
|
}
|
||||||
52
doc/examples/transitions/main.cpp
Normal file
52
doc/examples/transitions/main.cpp
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
/****************************************************************************
|
||||||
|
**
|
||||||
|
** Copyright (C) 2015 The Qt Company Ltd.
|
||||||
|
** Contact: http://www.qt.io/licensing/
|
||||||
|
**
|
||||||
|
** This file is part of the examples of the Qt Toolkit.
|
||||||
|
**
|
||||||
|
** $QT_BEGIN_LICENSE:BSD$
|
||||||
|
** You may use this file under the terms of the BSD license as follows:
|
||||||
|
**
|
||||||
|
** "Redistribution and use in source and binary forms, with or without
|
||||||
|
** modification, are permitted provided that the following conditions are
|
||||||
|
** met:
|
||||||
|
** * Redistributions of source code must retain the above copyright
|
||||||
|
** notice, this list of conditions and the following disclaimer.
|
||||||
|
** * Redistributions in binary form must reproduce the above copyright
|
||||||
|
** notice, this list of conditions and the following disclaimer in
|
||||||
|
** the documentation and/or other materials provided with the
|
||||||
|
** distribution.
|
||||||
|
** * Neither the name of The Qt Company Ltd nor the names of its
|
||||||
|
** contributors may be used to endorse or promote products derived
|
||||||
|
** from this software without specific prior written permission.
|
||||||
|
**
|
||||||
|
**
|
||||||
|
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
|
||||||
|
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
|
||||||
|
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
|
||||||
|
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
|
||||||
|
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
||||||
|
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
|
||||||
|
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
|
||||||
|
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
|
||||||
|
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||||
|
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
||||||
|
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
|
||||||
|
**
|
||||||
|
** $QT_END_LICENSE$
|
||||||
|
**
|
||||||
|
****************************************************************************/
|
||||||
|
|
||||||
|
#include <QGuiApplication>
|
||||||
|
#include <QQmlApplicationEngine>
|
||||||
|
|
||||||
|
int main(int argc, char *argv[])
|
||||||
|
{
|
||||||
|
QGuiApplication app(argc, argv);
|
||||||
|
|
||||||
|
QQmlApplicationEngine engine;
|
||||||
|
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
|
||||||
|
|
||||||
|
return app.exec();
|
||||||
|
}
|
||||||
@@ -1,91 +1,63 @@
|
|||||||
|
/****************************************************************************
|
||||||
|
**
|
||||||
|
** Copyright (C) 2015 The Qt Company Ltd.
|
||||||
|
** Contact: http://www.qt.io/licensing/
|
||||||
|
**
|
||||||
|
** This file is part of the examples of the Qt Toolkit.
|
||||||
|
**
|
||||||
|
** $QT_BEGIN_LICENSE:BSD$
|
||||||
|
** You may use this file under the terms of the BSD license as follows:
|
||||||
|
**
|
||||||
|
** "Redistribution and use in source and binary forms, with or without
|
||||||
|
** modification, are permitted provided that the following conditions are
|
||||||
|
** met:
|
||||||
|
** * Redistributions of source code must retain the above copyright
|
||||||
|
** notice, this list of conditions and the following disclaimer.
|
||||||
|
** * Redistributions in binary form must reproduce the above copyright
|
||||||
|
** notice, this list of conditions and the following disclaimer in
|
||||||
|
** the documentation and/or other materials provided with the
|
||||||
|
** distribution.
|
||||||
|
** * Neither the name of The Qt Company Ltd nor the names of its
|
||||||
|
** contributors may be used to endorse or promote products derived
|
||||||
|
** from this software without specific prior written permission.
|
||||||
|
**
|
||||||
|
**
|
||||||
|
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
|
||||||
|
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
|
||||||
|
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
|
||||||
|
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
|
||||||
|
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
||||||
|
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
|
||||||
|
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
|
||||||
|
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
|
||||||
|
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||||
|
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
||||||
|
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
|
||||||
|
**
|
||||||
|
** $QT_END_LICENSE$
|
||||||
|
**
|
||||||
|
****************************************************************************/
|
||||||
|
|
||||||
import QtQuick 2.5
|
import QtQuick 2.5
|
||||||
import QtQuick.Controls 1.4
|
import QtQuick.Controls 1.4
|
||||||
|
import QtQuick.Dialogs 1.2
|
||||||
|
|
||||||
ApplicationWindow {
|
ApplicationWindow {
|
||||||
id: page
|
|
||||||
visible: true
|
visible: true
|
||||||
width: 360
|
|
||||||
height: 360
|
|
||||||
color: "#343434"
|
|
||||||
title: qsTr("Transitions")
|
title: qsTr("Transitions")
|
||||||
|
width: 330
|
||||||
|
height: 330
|
||||||
|
|
||||||
menuBar: MenuBar {
|
MainForm {
|
||||||
Menu {
|
anchors.fill: parent
|
||||||
title: qsTr("File")
|
id: page
|
||||||
MenuItem {
|
mouseArea1 {
|
||||||
text: qsTr("&Open")
|
|
||||||
onTriggered: console.log("Open action triggered");
|
|
||||||
}
|
|
||||||
MenuItem {
|
|
||||||
text: qsTr("Exit")
|
|
||||||
onTriggered: Qt.quit();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Image {
|
|
||||||
id: icon
|
|
||||||
x: 10
|
|
||||||
y: 20
|
|
||||||
source: "states.svg"
|
|
||||||
}
|
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
id: topLeftRect
|
|
||||||
x: 10
|
|
||||||
y: 20
|
|
||||||
width: 44
|
|
||||||
height: 44
|
|
||||||
color: "#00000000"
|
|
||||||
radius: 6
|
|
||||||
opacity: 1
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.leftMargin: 10
|
|
||||||
anchors.top: parent.top
|
|
||||||
anchors.topMargin: 20
|
|
||||||
border.color: "#808080"
|
|
||||||
|
|
||||||
MouseArea {
|
|
||||||
id: mouseArea1
|
|
||||||
anchors.fill: parent
|
|
||||||
onClicked: stateGroup.state = ' '
|
onClicked: stateGroup.state = ' '
|
||||||
}
|
}
|
||||||
}
|
mouseArea2 {
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
id: middleRightRect
|
|
||||||
width: 44
|
|
||||||
height: 44
|
|
||||||
color: "#00000000"
|
|
||||||
radius: 6
|
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.rightMargin: 10
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
border.color: "#808080"
|
|
||||||
|
|
||||||
MouseArea {
|
|
||||||
id: mouseArea2
|
|
||||||
anchors.fill: parent
|
|
||||||
onClicked: stateGroup.state = 'State1'
|
onClicked: stateGroup.state = 'State1'
|
||||||
}
|
}
|
||||||
}
|
mouseArea3 {
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
id: bottomLeftRect
|
|
||||||
width: 44
|
|
||||||
height: 44
|
|
||||||
color: "#00000000"
|
|
||||||
radius: 6
|
|
||||||
border.width: 1
|
|
||||||
anchors.leftMargin: 10
|
|
||||||
anchors.bottom: parent.bottom
|
|
||||||
anchors.bottomMargin: 20
|
|
||||||
anchors.left: parent.left
|
|
||||||
border.color: "#808080"
|
|
||||||
|
|
||||||
MouseArea {
|
|
||||||
id: mouseArea3
|
|
||||||
anchors.fill: parent
|
|
||||||
onClicked: stateGroup.state = 'State2'
|
onClicked: stateGroup.state = 'State2'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -97,18 +69,18 @@ ApplicationWindow {
|
|||||||
name: "State1"
|
name: "State1"
|
||||||
|
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: icon
|
target: page.icon
|
||||||
x: middleRightRect.x
|
x: page.middleRightRect.x
|
||||||
y: middleRightRect.y
|
y: page.middleRightRect.y
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
State {
|
State {
|
||||||
name: "State2"
|
name: "State2"
|
||||||
|
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: icon
|
target: page.icon
|
||||||
x: bottomLeftRect.x
|
x: page.bottomLeftRect.x
|
||||||
y: bottomLeftRect.y
|
y: page.bottomLeftRect.y
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@@ -137,4 +109,4 @@ ApplicationWindow {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
7
doc/examples/transitions/qml.qrc
Normal file
7
doc/examples/transitions/qml.qrc
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<RCC>
|
||||||
|
<qresource prefix="/">
|
||||||
|
<file>main.qml</file>
|
||||||
|
<file>MainForm.ui.qml</file>
|
||||||
|
<file>qt-logo.png</file>
|
||||||
|
</qresource>
|
||||||
|
</RCC>
|
||||||
BIN
doc/examples/transitions/qt-logo.png
Normal file
BIN
doc/examples/transitions/qt-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
@@ -1,93 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<svg
|
|
||||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
|
||||||
xmlns:cc="http://creativecommons.org/ns#"
|
|
||||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
|
||||||
xmlns:svg="http://www.w3.org/2000/svg"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
|
||||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
|
||||||
height="44px"
|
|
||||||
version="1.1"
|
|
||||||
viewBox="0 0 44 44"
|
|
||||||
width="44px"
|
|
||||||
x="0px"
|
|
||||||
y="0px"
|
|
||||||
id="svg2"
|
|
||||||
inkscape:version="0.47 r22583"
|
|
||||||
sodipodi:docname="qt.svg">
|
|
||||||
<metadata
|
|
||||||
id="metadata18">
|
|
||||||
<rdf:RDF>
|
|
||||||
<cc:Work
|
|
||||||
rdf:about="">
|
|
||||||
<dc:format>image/svg+xml</dc:format>
|
|
||||||
<dc:type
|
|
||||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
|
||||||
</cc:Work>
|
|
||||||
</rdf:RDF>
|
|
||||||
</metadata>
|
|
||||||
<defs
|
|
||||||
id="defs16">
|
|
||||||
<inkscape:perspective
|
|
||||||
sodipodi:type="inkscape:persp3d"
|
|
||||||
inkscape:vp_x="0 : 22 : 1"
|
|
||||||
inkscape:vp_y="0 : 1000 : 0"
|
|
||||||
inkscape:vp_z="44 : 22 : 1"
|
|
||||||
inkscape:persp3d-origin="22 : 14.666667 : 1"
|
|
||||||
id="perspective2836" />
|
|
||||||
</defs>
|
|
||||||
<sodipodi:namedview
|
|
||||||
pagecolor="#ffffff"
|
|
||||||
bordercolor="#666666"
|
|
||||||
borderopacity="1"
|
|
||||||
objecttolerance="10"
|
|
||||||
gridtolerance="10"
|
|
||||||
guidetolerance="10"
|
|
||||||
inkscape:pageopacity="0"
|
|
||||||
inkscape:pageshadow="2"
|
|
||||||
inkscape:window-width="1920"
|
|
||||||
inkscape:window-height="1020"
|
|
||||||
id="namedview14"
|
|
||||||
showgrid="false"
|
|
||||||
inkscape:zoom="21.454545"
|
|
||||||
inkscape:cx="49.412871"
|
|
||||||
inkscape:cy="21.894358"
|
|
||||||
inkscape:window-x="-4"
|
|
||||||
inkscape:window-y="-4"
|
|
||||||
inkscape:window-maximized="1"
|
|
||||||
inkscape:current-layer="g3" />
|
|
||||||
<g
|
|
||||||
transform="matrix(0.18308778,0,0,0.18308778,6.6100946,3.2385199)"
|
|
||||||
id="g3">
|
|
||||||
<path
|
|
||||||
d="M 43.09,0.3586 C 40.94,0.0036 38.84,-0.0824 36.81,0.0776 31.968136,0.39505671 27.122677,0.73638425 22.28,1.0696 9.62,2.0816 0,12.4996 0,26.8896 l 0,169.7 14.19,13.2 28.87,-209.42 0.03,-0.011 z"
|
|
||||||
style="fill:#006225"
|
|
||||||
id="path5"
|
|
||||||
sodipodi:nodetypes="cccccccc" />
|
|
||||||
<path
|
|
||||||
d="m 174.4,160 c 0,12.5 -7.75,24.07 -17.57,25.77 L 14.23,209.73 V 25.93 C 14.23,9.21 27.57,-2.27 43.12,0.3 l 131.3,21.52 v 138.2 z"
|
|
||||||
style="fill:#80c342"
|
|
||||||
id="path7" />
|
|
||||||
<path
|
|
||||||
d="m 154.9,80.96 -12.96,-0.598 0,0.278 6.945,0.32 6.016,0 z"
|
|
||||||
style="fill:#006225"
|
|
||||||
id="path11" />
|
|
||||||
<path
|
|
||||||
d="m 144.6,135.6 c 0.66,0.328 1.43,0.476 2.351,0.476 0.161,0 0.329,-0.004 0.497,-0.016 2.55,-0.148 5.32,-0.933 8.343,-2.308 h -6.015 c -1.821,0.832 -3.532,1.457 -5.176,1.848 z"
|
|
||||||
style="fill:#006225"
|
|
||||||
id="path13" />
|
|
||||||
<path
|
|
||||||
id="path17"
|
|
||||||
style="fill:#ffffff"
|
|
||||||
d="m 91.15,132.4 c 2.351,-6.051 3.511,-17.91 3.511,-35.62 0,-15.89 -1.148,-26.82 -3.484,-32.81 -2.336,-6.027 -5.832,-9.281 -10.52,-9.691 -0.359,-0.031 -0.714,-0.051 -1.058,-0.051 -4.34,0 -7.68,2.535 -10.01,7.625 -2.52,5.543 -3.793,17.04 -3.793,34.44 0,16.82 1.238,28.75 3.734,35.75 2.356,6.672 5.879,9.976 10.5,9.976 0.207,0 0.41,-0.008 0.621,-0.019 4.633,-0.293 8.121,-3.496 10.49,-9.602 m 17.98,3.75 c -4.117,9.707 -10.39,16.06 -18.99,19 0.867,4.449 2.176,7.441 3.922,9.019 1.351,1.211 3.433,1.821 6.222,1.821 0.805,0 1.668,-0.055 2.59,-0.157 v 13.12 l -5.961,0.782 c -1.758,0.23 -3.426,0.343 -5.004,0.343 -5.218,0 -9.445,-1.265 -12.62,-3.824 -4.207,-3.379 -7.308,-9.894 -9.297,-19.54 -9.136,-1.945 -16.26,-7.754 -21.19,-17.5 -5.004,-9.902 -7.551,-24.39 -7.551,-43.34 0,-20.43 3.484,-35.51 10.34,-45.07 5.789,-8.07 13.86,-12.04 24.02,-12.04 1.629,0 3.309,0.102 5.043,0.305 11.95,1.375 20.62,7.016 26.26,16.79 5.535,9.562 8.254,23.27 8.254,41.26 0,16.48 -2,29.45 -6.043,39.02 z M 130.4,45.91 l 11.52,1.238 0,20.21 12.96,0.914 0,12.68 -12.96,-0.598 0,46.33 c 0,4.032 0.445,6.625 1.34,7.789 0.8,1.067 2.046,1.594 3.71,1.594 0.161,0 0.329,-0.004 0.497,-0.016 2.55,-0.148 5.32,-0.933 8.343,-2.308 v 11.65 c -5.136,2.258 -10.18,3.598 -15.12,4.02 -0.718,0.055 -1.41,0.086 -2.078,0.086 -4.48,0 -7.906,-1.301 -10.25,-3.934 -2.73,-3.051 -4.09,-7.949 -4.09,-14.67 V 79.535 L 118.046,79.25 V 65.66 l 7.586,0.547 4.773,-20.3 z" />
|
|
||||||
<path
|
|
||||||
d="m 100.3,166 c 0.809,0 1.672,-0.055 2.59,-0.157 H 98.054 C 98.73,165.949 99.507,166 100.3,166 z"
|
|
||||||
style="fill:#006225"
|
|
||||||
id="path19" />
|
|
||||||
<path
|
|
||||||
id="path21"
|
|
||||||
style="fill:#006225"
|
|
||||||
d="m 84.85,63.98 c 2.336,5.997 3.484,16.92 3.484,32.81 0,17.7 -1.16,29.57 -3.512,35.62 -1.894,4.879 -4.527,7.902 -7.863,9.07 0.965,0.368 1.992,0.551 3.078,0.551 0.207,0 0.41,-0.008 0.621,-0.019 4.633,-0.293 8.121,-3.496 10.49,-9.602 2.351,-6.051 3.511,-17.91 3.511,-35.62 0,-15.89 -1.148,-26.82 -3.484,-32.81 -2.336,-6.027 -5.832,-9.281 -10.52,-9.691 -0.359,-0.031 -0.714,-0.051 -1.058,-0.051 -1.09,0 -2.117,0.16 -3.082,0.481 h -0.004 c 3.601,1.121 6.379,4.215 8.336,9.261 z m -2.344,114.3 c -0.113,-0.05 -0.227,-0.105 -0.336,-0.16 -0.012,-0.004 -0.023,-0.012 -0.035,-0.015 -0.102,-0.051 -0.207,-0.106 -0.309,-0.157 -0.019,-0.011 -0.039,-0.019 -0.058,-0.031 -0.09,-0.051 -0.184,-0.098 -0.278,-0.148 -0.027,-0.016 -0.054,-0.036 -0.086,-0.051 -0.082,-0.043 -0.164,-0.09 -0.242,-0.137 -0.039,-0.023 -0.078,-0.047 -0.113,-0.07 -0.07,-0.039 -0.145,-0.082 -0.215,-0.125 -0.047,-0.031 -0.094,-0.059 -0.14,-0.09 -0.059,-0.039 -0.118,-0.074 -0.176,-0.113 -0.059,-0.039 -0.114,-0.075 -0.168,-0.114 -0.051,-0.031 -0.102,-0.066 -0.149,-0.097 -0.066,-0.047 -0.132,-0.094 -0.195,-0.137 -0.039,-0.027 -0.078,-0.055 -0.113,-0.082 -0.078,-0.055 -0.153,-0.113 -0.231,-0.172 -0.023,-0.016 -0.05,-0.035 -0.078,-0.055 -0.098,-0.078 -0.199,-0.156 -0.297,-0.234 -4.207,-3.379 -7.308,-9.894 -9.297,-19.54 -9.136,-1.945 -16.26,-7.754 -21.19,-17.5 -5.004,-9.902 -7.551,-24.39 -7.551,-43.34 0,-20.43 3.484,-35.51 10.34,-45.07 5.789,-8.07 13.86,-12.04 24.02,-12.04 h -6.351 c -10.15,0.008 -18.22,3.977 -24,12.04 -6.855,9.563 -10.34,24.64 -10.34,45.07 0,18.95 2.547,33.44 7.551,43.34 4.934,9.75 12.05,15.56 21.19,17.5 1.989,9.641 5.09,16.16 9.297,19.54 3.176,2.559 7.403,3.824 12.62,3.824 0.098,0 0.199,0 0.297,-0.004 h 5.539 c -3.406,-0.05 -6.383,-0.66 -8.906,-1.828 L 82.498,178.28 z M 128.4,145.6 c -2.73,-3.051 -4.09,-7.949 -4.09,-14.67 V 79.57 l -6.226,-0.285 v -13.59 h -6.016 v 3.035 c 0.871,3.273 1.555,6.82 2.063,10.64 l 4.164,0.192 v 51.36 c 0,6.723 1.367,11.62 4.09,14.67 2.343,2.633 5.765,3.934 10.25,3.934 h 6.015 c -4.48,0 -7.906,-1.301 -10.25,-3.934 z m 2.043,-99.66 -6.016,0 -4.668,19.88 5.911,0.422 4.773,-20.3 z" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 6.4 KiB |
15
doc/examples/transitions/transitions.pro
Normal file
15
doc/examples/transitions/transitions.pro
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
TEMPLATE = app
|
||||||
|
|
||||||
|
QT += qml quick
|
||||||
|
|
||||||
|
CONFIG += c++11
|
||||||
|
|
||||||
|
SOURCES += main.cpp
|
||||||
|
|
||||||
|
RESOURCES += qml.qrc
|
||||||
|
|
||||||
|
# Additional import path used to resolve QML modules in Qt Creator's code model
|
||||||
|
QML_IMPORT_PATH =
|
||||||
|
|
||||||
|
# Default rules for deployment.
|
||||||
|
include(deployment.pri)
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.8 KiB |
44
doc/src/qtquick/creator-tutorial-create-qq-project.qdocinc
Normal file
44
doc/src/qtquick/creator-tutorial-create-qq-project.qdocinc
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
\section1 Creating the Project
|
||||||
|
|
||||||
|
\list 1
|
||||||
|
|
||||||
|
\li Select \uicontrol File > \uicontrol {New File or Project} >
|
||||||
|
\uicontrol Application > \uicontrol {Qt Quick Controls Application}
|
||||||
|
> \uicontrol Choose.
|
||||||
|
|
||||||
|
\li In the \uicontrol Name field, enter a name for the application.
|
||||||
|
|
||||||
|
\li In the \uicontrol {Create in} field, enter the path for the project
|
||||||
|
files, and then select \uicontrol Next (or \uicontrol Continue on
|
||||||
|
OS X).
|
||||||
|
|
||||||
|
\li In the \uicontrol {Minimal required Qt version} field, select
|
||||||
|
\uicontrol {Qt 5.4}, or later.
|
||||||
|
|
||||||
|
\li Deselect the \uicontrol {Enable native styling} check box to keep
|
||||||
|
the application size small. Enabling native styling would create
|
||||||
|
a dependency to the Qt Widgets module.
|
||||||
|
|
||||||
|
\li Select \uicontrol Next.
|
||||||
|
|
||||||
|
\li Select \l{glossary-buildandrun-kit}{kits} for the platforms that
|
||||||
|
you want to build the application for. To build applications for
|
||||||
|
mobile devices, select kits for Android ARM and iPhone OS, and
|
||||||
|
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.
|
||||||
|
|
||||||
|
\li Review the project settings, and click \uicontrol{Finish} (or
|
||||||
|
\uicontrol Done on OS X).
|
||||||
|
|
||||||
|
\endlist
|
||||||
|
|
||||||
|
\QC generates a UI file, \e MainForm.ui.qml, that you can modify in the
|
||||||
|
\uicontrol Design mode and a QML file, \e main.qml, that you can modify in
|
||||||
|
the \uicontrol Edit mode to add the application logic.
|
||||||
@@ -34,9 +34,8 @@
|
|||||||
\l{Qt Quick}.
|
\l{Qt Quick}.
|
||||||
|
|
||||||
This tutorial describes how to use \QC to implement Qt Quick states and
|
This tutorial describes how to use \QC to implement Qt Quick states and
|
||||||
transitions. We
|
transitions. We create an application that displays a Qt logo that moves
|
||||||
create an application that displays a Qt logo that moves between three rectangles on the
|
between three rectangles on the page when you click them.
|
||||||
page when you click them.
|
|
||||||
|
|
||||||
\image qmldesigner-tutorial.png "States and transitions example"
|
\image qmldesigner-tutorial.png "States and transitions example"
|
||||||
|
|
||||||
@@ -46,95 +45,30 @@
|
|||||||
For tutorials that describe using Qt Quick Controls, see
|
For tutorials that describe using Qt Quick Controls, see
|
||||||
\l{Qt Quick Text Editor Guide} and \l{Qt Quick Controls - UI Forms}.
|
\l{Qt Quick Text Editor Guide} and \l{Qt Quick Controls - UI Forms}.
|
||||||
|
|
||||||
\section1 Creating the Project
|
\include creator-tutorial-create-qq-project.qdocinc
|
||||||
|
|
||||||
\list 1
|
|
||||||
|
|
||||||
\li Select \uicontrol{File > New File or Project > Application >
|
|
||||||
Qt Quick Controls Application > Choose}.
|
|
||||||
|
|
||||||
\li In the \uicontrol{Name} field, type \e {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 {Minimal required Qt version} field, select the Qt
|
|
||||||
version to develop with.
|
|
||||||
|
|
||||||
\note This page determines the set of files that the wizard
|
|
||||||
generates and their contents. The instructions in this tutorial
|
|
||||||
might not apply if you select the \uicontrol {With .ui.qml file}
|
|
||||||
check box.
|
|
||||||
|
|
||||||
\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
|
\section1 Creating the Main View
|
||||||
|
|
||||||
The main view of the application displays a Qt logo in the top left corner
|
The main view of the application displays a Qt logo in the top left corner
|
||||||
of the screen and two empty rectangles.
|
of the screen and two empty rectangles.
|
||||||
|
|
||||||
To use the states.svg image in your application, you must copy it to the
|
To use the \e qt-logo.png image in your application, you must copy it from
|
||||||
project directory (same subdirectory as the QML file) from the examples
|
the Qt examples directory to the project directory (same subdirectory as
|
||||||
directory in the Qt installation directory. For example:
|
the QML file). The image appears in \uicontrol Resources. You can also use
|
||||||
\c {C:\Qt\Examples\Qt-5.4\declarative\animation\states}. The image appears
|
any other image or a QML type, instead.
|
||||||
in \uicontrol Resources. You can also use any other image or a QML
|
|
||||||
type, instead.
|
|
||||||
|
|
||||||
\list 1
|
\list a
|
||||||
|
|
||||||
\li In the \uicontrol Projects view, double-click the main.qml file
|
\li In the \uicontrol Projects view, double-click the MainForm.ui.qml
|
||||||
to open it in the code editor.
|
file to open it in \QMLD.
|
||||||
|
|
||||||
\li Click \uicontrol Design to open the file in \QMLD.
|
|
||||||
|
|
||||||
\image qmldesigner-tutorial-design-mode.png "Transitions project in Design Mode"
|
\image qmldesigner-tutorial-design-mode.png "Transitions project in Design Mode"
|
||||||
|
|
||||||
\li In the \uicontrol Navigator, select \uicontrol Label and press
|
\li In the \uicontrol Navigator, select \uicontrol RowLayout and press
|
||||||
\key Delete to delete it.
|
\key Delete to delete it.
|
||||||
|
|
||||||
\li Select \uicontrol ApplicationWindow to edit its properties.
|
\li In \uicontrol Library > \uicontrol Resources, select qt-logo.png and
|
||||||
|
drag and drop it to the \uicontrol Item in the navigator.
|
||||||
\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 \uicontrol Title field, type \e Transitions.
|
|
||||||
|
|
||||||
\li In the \uicontrol Size field, set \uicontrol W and \uicontrol H
|
|
||||||
to \e 330.
|
|
||||||
|
|
||||||
\li In the \uicontrol Color field, set the window background color
|
|
||||||
to \e #343434.
|
|
||||||
|
|
||||||
\endlist
|
|
||||||
|
|
||||||
\li In \uicontrol Library > \uicontrol Resources, select states.svg and
|
|
||||||
drag and drop it to the canvas.
|
|
||||||
|
|
||||||
\image qmldesigner-tutorial-user-icon.png "Image properties"
|
\image qmldesigner-tutorial-user-icon.png "Image properties"
|
||||||
|
|
||||||
@@ -148,15 +82,11 @@
|
|||||||
\endlist
|
\endlist
|
||||||
|
|
||||||
\li Right-click the resource file, qml.qrc, in the \uicontrol Projects
|
\li Right-click the resource file, qml.qrc, in the \uicontrol Projects
|
||||||
view, and select \uicontrol {Open in Editor} to add states.svg to
|
view, and select \uicontrol {Add Existing File} to add qt-logo.png
|
||||||
the resource file for deployment.
|
to the resource file for deployment.
|
||||||
|
|
||||||
\li Click \uicontrol Add > \uicontrol {Add File} and select
|
\li Drag and drop a \uicontrol Rectangle to \e page in the navigator and
|
||||||
\e states.svg.
|
edit its properties.
|
||||||
|
|
||||||
\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"
|
\image qmldesigner-tutorial-topleftrect.png "Rectangle properties"
|
||||||
|
|
||||||
@@ -164,25 +94,24 @@
|
|||||||
|
|
||||||
\li In the \uicontrol Id field, enter \e topLeftRect.
|
\li In the \uicontrol Id field, enter \e topLeftRect.
|
||||||
|
|
||||||
\li In the \uicontrol Size field, set \uicontrol W and \uicontrol H
|
\li In the \uicontrol Size field, set \uicontrol W to \e 46 and
|
||||||
to \e 44, for the rectangle size to match the image size.
|
\uicontrol H to \e 55, for the rectangle size to match the image
|
||||||
|
size.
|
||||||
|
|
||||||
\li In the \uicontrol Color field, click the
|
\li In the \uicontrol Color field, click the
|
||||||
\inlineimage qmldesigner-transparent-button.png
|
\inlineimage qmldesigner-transparent-button.png
|
||||||
(\uicontrol Transparent) button to make the rectangle transparent.
|
(\uicontrol Transparent) button to make the rectangle
|
||||||
|
transparent.
|
||||||
|
|
||||||
\li In the \uicontrol Border field, set the border color to
|
\li In the \uicontrol {Border color} field, set the border color to
|
||||||
\e #808080.
|
\e #808080.
|
||||||
|
|
||||||
\li In the \uicontrol Rectangle group, \uicontrol Border field, set the border
|
|
||||||
width to \e 1.
|
|
||||||
|
|
||||||
\li In the \uicontrol Radius field, select \e 6 to create rounded
|
\li In the \uicontrol Radius field, select \e 6 to create rounded
|
||||||
corners for the rectangle.
|
corners for the rectangle.
|
||||||
|
|
||||||
\li Click \uicontrol {Layout}, and then click the top and left anchor
|
\li Click \uicontrol {Layout}, and then click the top and left
|
||||||
buttons to anchor the rectangle to the top left corner of the
|
anchor buttons to anchor the rectangle to the top left corner of
|
||||||
page.
|
the page.
|
||||||
|
|
||||||
\image qmldesigner-tutorial-topleftrect-layout.png "Layout tab"
|
\image qmldesigner-tutorial-topleftrect-layout.png "Layout tab"
|
||||||
|
|
||||||
@@ -192,42 +121,17 @@
|
|||||||
\endlist
|
\endlist
|
||||||
|
|
||||||
\li Drag and drop a \uicontrol {Mouse Area} type from the
|
\li Drag and drop a \uicontrol {Mouse Area} type from the
|
||||||
\uicontrol Library to \e topLeftRect in the \uicontrol Navigator.
|
\uicontrol Library to \e topLeftRect in the navigator.
|
||||||
|
|
||||||
\li Edit the \uicontrol {Mouse Area} properties:
|
\li Click \uicontrol {Layout}, and then click the
|
||||||
|
\inlineimage qmldesigner-anchor-fill-screen.png
|
||||||
\list a
|
(\uicontrol {Fill to Parent}) button to anchor the mouse area to the
|
||||||
|
rectangle.
|
||||||
\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 mouseArea1
|
|
||||||
\printuntil }
|
|
||||||
|
|
||||||
\li In the \uicontrol Navigator, copy topLeftRect (by pressing
|
\li In the \uicontrol Navigator, copy topLeftRect (by pressing
|
||||||
\key {Ctrl+C}) and paste it to the canvas twice (by pressing
|
\key {Ctrl+C}) and paste it to the \e page in the navigator twice
|
||||||
\key {Ctrl+V}). \QC renames the new instances of the type
|
(by pressing \key {Ctrl+V}). \QC renames the new instances of the
|
||||||
topLeftRect1 and topLeftRect2.
|
type topLeftRect1 and topLeftRect2.
|
||||||
|
|
||||||
\li Select topLeftRect1 and edit its properties:
|
\li Select topLeftRect1 and edit its properties:
|
||||||
|
|
||||||
@@ -242,14 +146,6 @@
|
|||||||
\li In the \uicontrol Margin field, select \e 10 for the right
|
\li In the \uicontrol Margin field, select \e 10 for the right
|
||||||
anchor and \e 0 for the vertical center anchor.
|
anchor and \e 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
|
\endlist
|
||||||
|
|
||||||
\li Select topLeftRect2 and edit its properties:
|
\li Select topLeftRect2 and edit its properties:
|
||||||
@@ -264,54 +160,77 @@
|
|||||||
\li In the \uicontrol Margin field, select \e 20 for the bottom
|
\li In the \uicontrol Margin field, select \e 20 for the bottom
|
||||||
anchor and \e 10 for the left anchor.
|
anchor and \e 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 mouseArea3
|
|
||||||
\printuntil }
|
|
||||||
\printuntil }
|
|
||||||
|
|
||||||
\endlist
|
\endlist
|
||||||
|
|
||||||
|
\li In the \uicontrol Navigator, select the
|
||||||
|
\inlineimage qmldesigner-export-item-button.png
|
||||||
|
(\uicontrol Export) button for each type to export all types as
|
||||||
|
properties. This enables you to use the properties in the
|
||||||
|
\e main.qml file.
|
||||||
|
|
||||||
\li Press \key {Ctrl+S} to save the changes.
|
\li Press \key {Ctrl+S} to save the changes.
|
||||||
|
|
||||||
\li Press \key {Ctrl+R} to run the application.
|
|
||||||
|
|
||||||
\endlist
|
\endlist
|
||||||
|
|
||||||
\image qmldesigner-tutorial.png "States and transitions example"
|
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.
|
||||||
|
|
||||||
You should see the Qt logo in the top left rectangle, and two additional
|
The UI is now ready and you can switch to editing the \e main.qml file in
|
||||||
rectangles in the center right and bottom left of the screen.
|
the \uicontrol Edit mode to add animation to the application, as described
|
||||||
|
in the following section.
|
||||||
|
|
||||||
You can now create additional states to add views to the application.
|
\section1 Adding Application Logic
|
||||||
|
|
||||||
\section1 Adding Views
|
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).
|
||||||
|
|
||||||
In the .qml file, you already created pointers to two additional states:
|
Edit the main.qml file to add pointers to two additional states: \e State1
|
||||||
State1 and State2. You cannot use the \QMLD to add states for a Window QML
|
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
|
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:
|
refer to them by using the id of the state group.
|
||||||
|
|
||||||
\list 1
|
\list 1
|
||||||
|
|
||||||
|
\li Specify the window size and background color as properties of
|
||||||
|
the ApplicationWindow type:
|
||||||
|
|
||||||
|
\quotefromfile transitions/main.qml
|
||||||
|
\skipto ApplicationWindow
|
||||||
|
\printuntil height
|
||||||
|
|
||||||
|
\li Specify an id for the MainForm type to be able to use the properties
|
||||||
|
that you exported in \e MainForm.ui.qml:
|
||||||
|
|
||||||
|
\printuntil page
|
||||||
|
|
||||||
|
\li Add a pointer to the clicked expressions in \uicontrol mouseArea1:
|
||||||
|
|
||||||
|
\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
|
||||||
|
to set the state to \e State1:
|
||||||
|
|
||||||
|
\printuntil }
|
||||||
|
|
||||||
|
\li Add a pointer to a clicked expression to \uicontrol mouseArea3 to
|
||||||
|
set the state to \e State2:
|
||||||
|
|
||||||
|
\printuntil }
|
||||||
|
\printuntil }
|
||||||
|
|
||||||
\li Bind the position of the Qt logo to the
|
\li Bind the position of the Qt logo to the
|
||||||
rectangle to make sure that the logo is displayed within the
|
rectangle to make sure that the logo is displayed within the
|
||||||
rectangle when the view is scaled on different sizes of screens. Set
|
rectangle when the view is scaled on different sizes of screens. Set
|
||||||
expressions for the x and y properties, as illustrated by the
|
expressions for the x and y properties, as illustrated by the
|
||||||
following code snippet:
|
following code snippet:
|
||||||
|
|
||||||
\quotefromfile transitions/main.qml
|
|
||||||
\skipto StateGroup {
|
|
||||||
\printuntil ]
|
\printuntil ]
|
||||||
|
|
||||||
\li Press \key {Ctrl+R} to run the application.
|
\li Press \key {Ctrl+R} to run the application.
|
||||||
@@ -334,8 +253,6 @@
|
|||||||
moving to State1, the x and y coordinates of the Qt logo change
|
moving to State1, the x and y coordinates of the Qt logo change
|
||||||
linearly over a duration of 1 second:
|
linearly over a duration of 1 second:
|
||||||
|
|
||||||
\dots
|
|
||||||
\skipto transitions
|
|
||||||
\printuntil },
|
\printuntil },
|
||||||
|
|
||||||
\li You can use the Qt Quick toolbar for animation to change the easing
|
\li You can use the Qt Quick toolbar for animation to change the easing
|
||||||
|
|||||||
Reference in New Issue
Block a user