feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

Doc: Update fourth part of entry-level tutorial

Browse Source 
Task-number: QDS-5001
Change-Id: Iab790f9141424ef848ddeaa2566108bf7a75d18a
Reviewed-by: Johanna Vanhatapio <johanna.vanhatapio@qt.io>
Reviewed-by: Brook Cronin <brook.cronin@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Leena Miettinen
2021-09-14 14:24:32 +02:00
parent 49c8471ef2
commit 0efe414100
18 changed files with 215 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve-top-anchor-margin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui4-keyframe-opacity.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui4-keyframe-top-anchor-margin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui4-page.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 34 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 19 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui4.gif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 593 KiB

After

Width:  |  Height:  |  Size: 167 KiB

195
doc/qtdesignstudio/examples/doc/loginui4.qdoc
View File

@@ -37,12 +37,13 @@
\e{Log In UI - Timeline} is the fourth in a series of tutorials that build
on each other to illustrate how to use \QDS to create a simple UI with
some basic UI components, such as pages, buttons, and entry fields. Part 4
describes how to use the timeline and states to animate UI components.
some basic UI components, such as pages, buttons, and entry fields. The
fourth part of the tutorial describes how to use the timeline and states
to animate UI components.
In Part 3, you learned how to use states to simulate page changes
in a UI and connections to provide user interaction with it. In
Part 4, you will now learn another way of animating the UI by creating
In \l {Log In UI - States}, you learned how to use states to simulate page
changes in a UI and connections to provide user interaction with it. In
this part, you will now learn another way of animating the UI by creating
\l{Creating Timeline Animations}{timeline animations} that you bind
to states.
@@ -59,18 +60,18 @@
\section1 Animating UI Components
In Part 3, you changed the visibility property in different states to
simulate changing pages. To make sure that those changes won't interfere
with the changes to the opacity property you will make in Part 4, you will
first remove the states.
In \l {Log In UI - States}, you changed the visibility property in different
states to simulate changing pages. To make sure that those changes won't
interfere with the changes to the opacity property you will make next, you
will first remove the states.
Then, you will add a timeline and insert keyframes for the opacity property
to hide the password verification field and back button on the login page
and the login button on the registration page. Because we want the password
verification field to appear to slide down from the password field, you will
also need to insert a keyframe for its anchor margin property. To be able to
animate the anchor, you also need to pull out the fields from the fields
column and anchor them to the page and to each other instead.
to hide the \e {Retype Password} field on the login page and the
\e {Create Account} button on the account creation page. Because we want the
retype password field to appear to slide down from the password field, you
will also need to insert a keyframe for its anchor margin property. To be
able to animate the anchor, you also need to pull out the fields from the
column component and anchor them to the rectangle and to each other instead.
To preview the changes that you make to the UI while you make
them, select the \inlineimage live_preview.png
@@ -82,39 +83,47 @@
First, you will prepare the \e Screen01 component for adding animation:
\list 1
\li Open \e {Screen01.ui.qml} in \l {Form Editor} for editing.
\li In the \l States view, select the \inlineimage close.png
(\uicontrol Close) button in \e loginState and \e registerState
to remove the states.
\li Select the fields in \e fieldColumn in \l Navigator
and drag and drop them to their parent rectangle to prepare for
deleting the column component.
\li Select \e fieldColumn in \uicontrol Navigator and press
\key Delete to delete it.
\li Select \e usernameField in \uicontrol Navigator.
\li In \l Properties > \uicontrol Layout, select the
\inlineimage icons/anchor-top.png
(\uicontrol Top) button to anchor the top of the field to the top
of its parent. \QDS will suggest an appropriate margin based on
the current position of the field on the y axis, 200 pixels.
\li Select the \inlineimage icons/anchor-center-horizontal.png
(\uicontrol {Horizontal Center}) button to anchor
the horizontal center of the field to that of its parent.
\li Select \e passwordField, and then select the \uicontrol Top
button in \uicontrol Properties > \uicontrol Layout.
\li In the \uicontrol Target field, select \e usernameField to anchor
the top of \e passwordField to the bottom of \e usernameField
with a 5-pixel margin.
\li Select the \uicontrol {Horizontal Center} button to anchor the
horizontal center of \e passwordField to that of \e usernameField.
\li Repeat the above steps to anchor the top of \e verifyPasswordField
to the bottom of \e passwordField with a 5-pixel margin and to
anchor its horizontal center to that of \e passwordField.
\li Double-click \e Screen01.ui.qml in \l Projects to open it
in \l {Form Editor}.
\li In the \l States view, select \e login, and then select
\inlineimage close.png
to remove the state. Repeat for the \e createAccount state.
\li Select \e username in \l Navigator, and then select
\inlineimage arrowleft.png
to move it into the parent rectangle to prepare for
deleting the \e fields column component instance.
\li Select \inlineimage icons/navigator-arrowup.png
to move \e username below \e tagLine in \uicontrol Navigator
to preserve the \l{Arranging Components}{component hierarchy}.
\li Repeat for \e password and \e repeatPassword.
\li Select \e fields in \uicontrol Navigator and press \key Delete to
delete it.
\li Select \e username in \uicontrol Navigator to display its properties
in \l Properties.
\li Select \uicontrol Layout > \inlineimage icons/anchor-top.png
to anchor the top of \e username to the bottom of \e tagLine in the
\uicontrol Target field. \QDS will suggest an appropriate margin
based on the current position of the field on the y axis, 170
pixels.
\li Select \inlineimage icons/anchor-center-horizontal.png
to anchor \e username horizontally to its parent in the
\uicontrol Target field.
\li Select \e password in \uicontrol Navigator to display its properties
in \uicontrol Properties.
\li Select \uicontrol Layout > \inlineimage icons/anchor-top.png
to anchor the top of \e password to the bottom of \e username in
the \uicontrol Target field with a 20-pixel margin.
\li Select \inlineimage icons/anchor-center-horizontal.png
to anchor \e password horizontally to its parent in the
\uicontrol Target field.
\li Repeat the above steps to anchor the top of \e repeatPassword
to the bottom of \e password with a 20-pixel margin and to
anchor it horizontally to its parent.
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
You could also animate the y-position property of the verify password
You could also animate the y-position property of the repeat password
field for a similar effect. In that case, you would need to use absolute
positioning for the field. This is less flexible if you export your
design from a design tool, such as Adobe Photoshop, and decide to change
@@ -122,18 +131,13 @@
would probably stay the same, even if the positions of the fields on the
page would change.
\e Screen01 should now look something like this in the \uicontrol Design
mode and live preview:
\e Screen01 should not display visible changes in \uicontrol {Form Editor}:
\image loginui4-page.png "UI with all the buttons and fields in the Design mode"
\image loginui3-base-state.jpg "UI with all the buttons and fields in the Design mode"
\section2 Adding a Timeline and Animation Settings
You are now ready to add the \l{Creating Timeline Animations}{timeline}. You will
need two animations, one for moving into the registration page and another
for returning to the login page. You can use the same animation for both
cases, by running it either from the beginning to the end or from the
end to the beginning.
You are now ready to add the \l{Creating Timeline Animations}{timeline}.
To add a timeline with settings for running the animation:
@@ -143,18 +147,12 @@
\li In \uicontrol Timeline, select \inlineimage plus.png
to add a 1000-frame timeline and settings for running the animation.
\image loginui4-timeline-settings.png
\li In the \uicontrol {Animation ID} field, enter \e toLoginState.
\li Deselect the \uicontrol {Running in base state} check box, because
\li In the \uicontrol {Animation ID} field, enter
\e toCreateAccountState.
\li Deselect the \uicontrol {Running in base state} check box because
you want the animation to run only after the user clicks the
\uicontrol {Create Account} button. You can use the default settings
for the other fields.
\li Select \inlineimage plus.png
next to the \uicontrol {Animation Settings} group to add settings
for running the animation when the user clicks the back button.
\li In the \uicontrol {Animation ID} field, enter \e toRegisterState.
\li To run the animation backwards when the user clicks the back button,
enter \e 1000 in the \uicontrol {Start frame} field and \e 0 in the
\uicontrol {End frame} field.
\li Select \uicontrol Close in the \uicontrol {Timeline Settings} view
to save the timeline and the animation settings.
\endlist
@@ -167,14 +165,17 @@
\uicontrol Timeline:
\list 1
\li Select \e backButton in \uicontrol Navigator.
\li In \uicontrol Properties > \uicontrol Opacity > \uicontrol Settings,
select \uicontrol {Insert Keyframe} to insert a keyframe for the
opacity property of the button.
\li Select \e repeatPassword in \uicontrol Navigator to display its
properties in \uicontrol Properties.
\li In \uicontrol Visibility > \uicontrol Opacity, select
\inlineimage icons/action-icon.png
> \uicontrol {Insert Keyframe} to insert a keyframe for the
opacity property of the component.
\image loginui4-keyframe-opacity.png "Inserting keyframe for opacity property"
\li In \uicontrol Timeline, check that the playhead is in
frame 0, and select the \inlineimage recordfill.png
(\uicontrol {Per Property Recording}) button for the
\uicontrol opacity property of \e backButton to start
\uicontrol opacity property of \e repeatPassword to start
recording property changes.
\image loginui4-timeline-opacity.png "Record button for the opacity property"
\li In the field next to the opacity property name on that same line,
@@ -188,12 +189,8 @@
\li Select the record button again to stop recording property changes.
If you forget this, all the following changes will be recorded, and
the results will be unpredictable.
\li Select \e verifyPasswordField in \uicontrol Navigator,
and repeat the above steps to insert a keyframe for the
\uicontrol opacity property of the field and to record
changes for it.
\li Select \e loginButton in \uicontrol Navigator, and repeat
the above steps to insert a keyframe for the \uicontrol opacity
\li Select \e createAccount in \uicontrol Navigator, and repeat
the above steps to insert a keyframe for the \uicontrol Opacity
property of the button and to record changes for it. However, this
time the opacity value needs to be 1 in frame 0 and 0 in frame 1000.
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
@@ -201,30 +198,34 @@
\endlist
When you move the playhead along the timeline, you can see how the login
button fades out while the verify password field and back button fade in.
button fades out while the repeat password field fades in.
You will now animate the top anchor margin of the verify password field
You will now animate the top anchor margin of the repeat password field
to make it appear to slide down from the password field.
\section2 Animating Anchors
To animate the top anchor margin of the verify password field:
To animate the top anchor margin of the repeat password field:
\list 1
\li Select \e verifyPasswordField in \uicontrol Navigator.
\li Select \uicontrol Properties > \uicontrol Layout > \uicontrol Margin
\li Select \e repeatPassword in \uicontrol Navigator to display its
properties in \uicontrol Properties.
\li In \uicontrol Layout > \uicontrol Margin (under
\inlineimage icons/anchor-top.png
), select \inlineimage icons/action-icon.png
> \uicontrol {Insert Keyframe} to insert a keyframe for the top
anchor margin of \e verifyPasswordField.
anchor margin of \e repeatPassword.
\image loginui4-keyframe-top-anchor-margin.png "Inserting keyframe for top anchor margin"
\li In \uicontrol Timeline, check that the playhead is in
frame 0, and select the record button for the \e anchors.topMargin
property of \e verifyPasswordField.
property of \e repeatPassword.
\li In the field next to the property, set a negative value for the
top anchor margin, -40, to place \e verifyPasswordField on top of
\e passwordField.
top anchor margin, -40, to place \e repeatPassword on top of
\e password.
\li Move the playhead to frame 1000 and change the top anchor margin
to 5, so that, combined with the change in the opacity value,
\e verifyPasswordField appears to slide down and settle below
\e passwordField.
to 20, so that, combined with the change in the \uicontrol Opacity
value, \e repeatPassword appears to slide down and settle below
\e password.
\li Select the record button again to stop recording property changes.
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
@@ -239,6 +240,7 @@
\li Click the keyframe marker \inlineimage keyframe_linear_inactive.png
for the \e anchors.topMargin property at frame 1000 on the
timeline to select it.
\image loginui4-easing-curve-top-anchor-margin.png "Top anchor margin keyframe marker"
\li Right-click the keyframe marker to open a context menu, and
select \uicontrol {Edit Easing Curve} to add an easing curve
to the animation.
@@ -256,7 +258,7 @@
\image loginui4-timeline.png "Timeline view with the recorded property changes"
Next, you'll create states for the login and registration pages and bind
Next, you'll create states for the login and account creation pages and bind
them to the animation settings.
\section1 Binding Animation to States
@@ -267,27 +269,30 @@
\list 1
\li In \uicontrol States, select \uicontrol {Create New State} twice to
add two states called \e loginState and \e registerState. You don't
need to make any property changes this time, because you'll bind the
add two states called \e login and \e createAccount. You don't
need to make any property changes this time because you'll bind the
states to property animations.
\li In \uicontrol States, select \inlineimage icons/action-icon.png
for \e login to open the \uicontrol Actions menu, and then
select \uicontrol {Set as Default} to determine that the \e login
state is applied when the application starts.
\li In \uicontrol Timeline, select the \inlineimage animation.png
(\uicontrol {Timeline Settings (S)}) button on the toolbar (or press
\key S to open the \uicontrol {Timeline Settings} dialog.
\key S) to open the \uicontrol {Timeline Settings} dialog.
\image loginui4-timeline-settings-states.png
\li Double-click the cell in the \uicontrol Timeline column on the
\e loginState row, and select \e timeline in the list.
\e createAccount row, and select \e timeline in the list.
\li Double-click the cell in the \uicontrol Animation column on the
\e loginState row, and select \e toRegisterState.
\li Repeat these steps for \e registerState row, but select
\e toLoginState in the \uicontrol Animation column.
\e createAccount row, and select \e toCreateAccountState.
\li Click \uicontrol Close to save the timeline settings.
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
In the live preview, you can now click the \uicontrol {Create Account}
button to go to the registration page and the back button to return to
the login page.
button to go to the account creation page.
\image loginui4.gif "Moving between login page and registration page"
\image loginui4.gif "Moving between login page and account creation page"
\section2 Learn More - Timeline

113
doc/qtdesignstudio/examples/loginui4/PushButton.ui.qml
View File

@@ -1,113 +0,0 @@
/****************************************************************************
**
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Design Studio.
**
** $QT_BEGIN_LICENSE:BSD$
** 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.
**
** BSD License Usage
** Alternatively, 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.15
import QtQuick.Controls 2.12
Button {
id: control
implicitWidth: Math.max(
buttonBackground ? buttonBackground.implicitWidth : 0,
textItem.implicitWidth + leftPadding + rightPadding)
implicitHeight: Math.max(
buttonBackground ? buttonBackground.implicitHeight : 0,
textItem.implicitHeight + topPadding + bottomPadding)
leftPadding: 4
rightPadding: 4
text: "My Button"
background: buttonBackground
Rectangle {
id: buttonBackground
implicitWidth: 100
implicitHeight: 40
opacity: enabled ? 1 : 0.3
radius: 20
border.color: "#41cd52"
}
contentItem: textItem
Text {
id: textItem
text: control.text
opacity: enabled ? 1.0 : 0.3
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.bold: true
}
states: [
State {
name: "normal"
when: !control.down
PropertyChanges {
target: buttonBackground
border.color: "#41cd52"
}
},
State {
name: "down"
when: control.down
PropertyChanges {
target: textItem
color: "#41cd52"
}
PropertyChanges {
target: buttonBackground
border.color: "#41cd52"
}
}
]
}

227
doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml
View File

@@ -1,10 +1,11 @@
/****************************************************************************
**
** Copyright (C) 2019 The Qt Company Ltd.
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
** This file is part of the examples of the Qt Design Studio.
**
** $QT_BEGIN_LICENSE:BSD$
** Commercial License Usage
@@ -48,168 +49,118 @@
** $QT_END_LICENSE$
**
****************************************************************************/
import QtQuick 2.12
import QtQuick
import QtQuick.Controls
import loginui4 1.0
import QtQuick.Controls 2.15
import QtQuick.Timeline 1.0
Rectangle {
id: rectangle
width: Constants.width
height: Constants.height
color: "#ffffff"
gradient: Gradient {
GradientStop {
position: 0.50125
color: "#ffffff"
}
GradientStop {
position: 1
color: "#41cd52"
}
}
Text {
id: pageTitle
text: qsTr("Qt Account")
anchors.top: parent.top
font.pixelSize: 24
anchors.topMargin: 70
anchors.horizontalCenter: parent.horizontalCenter
font.bold: true
font.family: Constants.font.family
}
color: Constants.backgroundColor
state: "login"
Image {
id: logo
anchors.left: parent.left
anchors.top: parent.top
source: "qt_logo_green_64x64px.png"
anchors.topMargin: 10
anchors.leftMargin: 10
id: adventurePage
anchors.fill: parent
source: "images/adventurePage.jpg"
fillMode: Image.PreserveAspectFit
}
Image {
id: qt_logo_green_128x128px
x: 296
anchors.top: parent.top
source: "images/qt_logo_green_128x128px.png"
anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: 40
fillMode: Image.PreserveAspectFit
}
Text {
id: tagLine
width: 541
height: 78
color: "#ffffff"
text: qsTr("Are you ready to explore?")
anchors.top: qt_logo_green_128x128px.bottom
font.pixelSize: 50
anchors.topMargin: 40
anchors.horizontalCenter: parent.horizontalCenter
font.family: "Titillium Web ExtraLight"
}
EntryField {
id: username
x: 110
text: "Username or Email"
anchors.top: tagLine.bottom
anchors.topMargin: 170
anchors.horizontalCenter: parent.horizontalCenter
}
EntryField {
id: password
x: 110
text: qsTr("Password")
anchors.top: username.bottom
anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: 20
}
EntryField {
id: repeatPassword
x: 110
text: "Repeat Password"
anchors.top: password.bottom
anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: 20
}
Column {
id: buttonColumn
id: buttons
x: 102
y: 966
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottomMargin: 50
spacing: 5
anchors.bottomMargin: 100
spacing: 20
PushButton {
id: loginButton
width: 120
opacity: 1
text: qsTr("Log In")
id: login
text: qsTr("Continue")
}
PushButton {
id: registerButton
width: 120
id: createAccount
text: qsTr("Create Account")
font.bold: true
Connections {
target: registerButton
onClicked: rectangle.state = "registerState"
target: createAccount
onClicked: rectangle.state = "createAccount"
}
}
}
PushButton {
id: backButton
width: 40
opacity: 1.2
text: "<"
anchors.right: parent.right
anchors.top: parent.top
font.pixelSize: 24
anchors.rightMargin: 10
anchors.topMargin: 10
font.bold: true
checked: true
Connections {
target: backButton
onClicked: rectangle.state = "loginState"
}
}
TextField {
id: verifyPasswordField
x: 170
width: 300
opacity: 1
anchors.top: passwordField.bottom
anchors.horizontalCenter: passwordField.horizontalCenter
anchors.topMargin: 5
placeholderText: qsTr("Verify password")
}
TextField {
id: passwordField
x: 170
width: 300
anchors.top: usernameField.bottom
anchors.horizontalCenter: usernameField.horizontalCenter
anchors.topMargin: 5
placeholderText: qsTr("Password")
}
TextField {
id: usernameField
x: 170
width: 300
text: ""
anchors.top: parent.top
horizontalAlignment: Text.AlignLeft
anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: 200
placeholderText: qsTr("Username")
}
Timeline {
id: timeline
animations: [
TimelineAnimation {
id: toLoginState
id: toCreateAccountState
running: false
loops: 1
duration: 1000
running: false
to: 1000
from: 0
},
TimelineAnimation {
id: toRegisterState
loops: 1
duration: 1000
running: false
to: 0
from: 1000
}
]
enabled: true
endFrame: 1000
startFrame: 0
enabled: true
KeyframeGroup {
target: backButton
property: "opacity"
Keyframe {
frame: 0
value: 0
}
Keyframe {
frame: 1000
value: 1
}
}
KeyframeGroup {
target: verifyPasswordField
target: repeatPassword
property: "opacity"
Keyframe {
@@ -218,18 +169,14 @@ Rectangle {
}
Keyframe {
frame: 1000
frame: 999
value: 1
}
}
KeyframeGroup {
target: loginButton
target: createAccount
property: "opacity"
Keyframe {
frame: 0
value: 1
}
Keyframe {
frame: 1000
@@ -238,8 +185,9 @@ Rectangle {
}
KeyframeGroup {
target: verifyPasswordField
target: repeatPassword
property: "anchors.topMargin"
Keyframe {
frame: 0
value: -40
@@ -247,32 +195,26 @@ Rectangle {
Keyframe {
easing.bezierCurve: [0.39,0.575,0.565,1,1,1]
frame: 1000
value: 5
frame: 999
value: 20
}
}
}
states: [
State {
name: "loginState"
name: "login"
PropertyChanges {
target: timeline
currentFrame: 0
enabled: true
}
PropertyChanges {
target: toLoginState
}
PropertyChanges {
target: toRegisterState
running: true
target: toCreateAccountState
}
},
State {
name: "registerState"
name: "createAccount"
PropertyChanges {
target: timeline
@@ -280,7 +222,7 @@ Rectangle {
}
PropertyChanges {
target: toLoginState
target: toCreateAccountState
running: true
}
}
@@ -289,7 +231,6 @@ Rectangle {
/*##^##
Designer {
D{i:0;formeditorZoom:0.5}D{i:5}D{i:7}D{i:10}D{i:12}D{i:13}D{i:14}D{i:15}
D{i:0;formeditorZoom:0.5}D{i:6}D{i:9}D{i:11}
}
##^##*/

82
doc/qtdesignstudio/examples/loginui4/imports/loginui4/Constants.qml
View File

@@ -1,76 +1,26 @@
/****************************************************************************
**
** Copyright (C) 2019 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** 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.
**
** BSD License Usage
** Alternatively, 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$
**
****************************************************************************/
pragma Singleton
import QtQuick 2.10
import QtQuick
QtObject {
readonly property int width: 640
readonly property int height: 480
readonly property FontLoader mySystemFont: FontLoader { name: "Arial" }
readonly property int width: 720
readonly property int height: 1280
property alias fontDirectory: directoryFontLoader.fontDirectory
property alias relativeFontDirectory: directoryFontLoader.relativeFontDirectory
/* Edit this comment to add your custom font */
/* readonly property FontLoader myCustomFont: FontLoader { source: "MyCustomFont.ttf" } */
readonly property font font: Qt.font({
family: mySystemFont.name,
pointSize: Qt.application.font.pixelSize
family: Qt.application.font.family,
pixelSize: Qt.application.font.pixelSize
})
readonly property font largeFont: Qt.font({
family: mySystemFont.name,
pointSize: Qt.application.font.pixelSize * 1.6
family: Qt.application.font.family,
pixelSize: Qt.application.font.pixelSize * 1.6
})
readonly property color backgroundColor: "#c2c2c2"
property DirectoryFontLoader directoryFontLoader: DirectoryFontLoader {
id: directoryFontLoader
}
}
/*##^## Designer {
D{i:0;autoSize:true;height:480;width:640}
}
##^##*/

1
doc/qtdesignstudio/examples/loginui4/imports/loginui4/qmldir
View File

@@ -1 +1,2 @@
singleton Constants 1.0 Constants.qml
EventListSimulator 1.0 EventListSimulator.qml

14
doc/qtdesignstudio/examples/loginui4/loginui4.qml
View File

@@ -1,9 +1,9 @@
/****************************************************************************
**
** Copyright (C) 2019 The Qt Company Ltd.
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
** This file is part of the examples of the Qt Design Studio.
**
** $QT_BEGIN_LICENSE:BSD$
** Commercial License Usage
@@ -48,7 +48,7 @@
**
****************************************************************************/
import QtQuick 2.10
import QtQuick
import loginui4 1.0
Item {
@@ -57,11 +57,5 @@ Item {
Screen01 {
}
}
/*##^## Designer {
D{i:0;autoSize:true;height:480;width:640}
}
##^##*/

10
doc/qtdesignstudio/examples/loginui4/loginui4.qmlproject
View File

@@ -28,14 +28,20 @@ Project {
directory: "."
}
Files {
filter: "*.ttf;*.otf"
}
Environment {
QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf"
QT_AUTO_SCREEN_SCALE_FACTOR: "1"
}
qt6Project: true
/* List of plugin directories passed to QML runtime */
importPaths: [ "imports" ]
importPaths: [ "imports", "asset_imports" ]
/* Required for deployment */
targetDirectory: "/opt/loginui3"
targetDirectory: "/opt/loginui4"
}

BIN
doc/qtdesignstudio/examples/loginui4/qt_logo_green_64x64px.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

5
doc/qtdesignstudio/examples/loginui4/qtquickcontrols2.conf
View File

@@ -1,3 +1,2 @@
; This file can be edited to change the style of the application
; Read "Qt Quick Controls 2 Configuration File" for details:
; https://doc.qt.io/qt/qtquickcontrols2-configuration.html
[Controls]
Style=Default