1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
|
/****************************************************************************
**
** Copyright (C) 2019 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Design Studio documentation.
**
** 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.
**
** GNU Free Documentation License Usage
** 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. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
**
****************************************************************************/
/*!
\example loginui2
\ingroup studioexamples
\ingroup gstutorials
\previouspage {Log In UI - Part 1}
\nextpage {Log In UI - Part 3}
\title Log In UI - Part 2
\brief Illustrates how to position UI components on pages using anchors and
positioners.
\image loginui2.png "Log In UI"
\e{Log In UI - Part 2} is the second in a series of examples 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 2
describes how to position the UI components on pages to create a scalable
UI.
To ensure that the layout is responsive and all the UI elements stay in
their proper places when you resize the UI on the desktop or on devices
with different screen sizes, you will use anchors and positioners.
These instructions build on \l {Log In UI - Part 1}.
The \e {Learn Qt Quick} sections provide additional information about the
features of QML and Qt Quick that are relevant to the task at hand.
\section1 Anchoring UI Components
First, you will add a new rectangle to \uicontrol {Form Editor} and move
all the current UI components to it to create a new page. Then, you will
\l {Setting Anchors and Margins}{anchor} the static elements on the
page, that is the logo image (\e logo) and page title (\e pageTitle), to the
page. When you created the project using the new project wizard template
in Part 1 of this example, the wizard template anchored \e pageTitle to the
vertical and horizontal center of the page. Therefore, you will only
need to replace the vertical anchor of \e pageTitle with a top anchor
to align it with \e logo on the page.
To preview the changes that you make to the UI while you make
them, select the \inlineimage live_preview.png
(\uicontrol {Show Live Preview}) button on the \uicontrol {Form Editor}
toolbar or press \key {Alt+P}.
To anchor components on a page:
\list 1
\li Open \e {Screen01.ui.qml} for editing in the
\uicontrol {Form Editor} view.
\li Select the rectangle that forms the UI background in the
\uicontrol Navigator view, and change its id to \e root in the
\uicontrol Properties view.
\li Drag and drop a \uicontrol Rectangle from the \uicontrol Library
view to \e root in \uicontrol Navigator, and change its id to
\e loginPage in \uicontrol Properties.
\li Under \uicontrol Layout, select the \inlineimage anchor-fill.png
(\uicontrol {Fill Parent Item}) button to anchor the page to the root
item on all sides.
\li Select all the other UI elements below \e root in
\uicontrol Navigator (press the \key Shift key for multiple
selection) and drag them to \e loginPage.
\li Select \e logo in \uicontrol Navigator.
\li Select the \inlineimage anchor-top.png
(\uicontrol Top) and \inlineimage anchor-left.png
(\uicontrol Left) anchor buttons to anchor \e logo to the top left
corner of its parent (\e loginPage) with 10-pixel margins.
\li Select \e pageTitle in \uicontrol Navigator.
\li Deselect the \inlineimage anchor-vertical-center.png
(\uicontrol {Vertical Center}) button to remove the
anchor, and then select the \uicontrol Top button to anchor the
title to the top of the page with a 70-pixel margin.
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
Your page now should look something like this in the Design mode and live
preview:
\image loginui2-loginpage.png "Login page in the Design mode"
\section2 Learn Qt Quick - Anchors
In an anchor-based layout, each QML type can be thought of as having a set
of invisible \e anchor lines: top, bottom, left, right, fill, horizontal
center, vertical center, and baseline.
Anchors enable placing an object either adjacent to or inside of another
object, by attaching one or more of the object's anchor lines to the anchor
lines of the other object. If an object changes, the objects that are
anchored to it will adjust automatically to maintain the anchoring.
For more information, see \l{Positioning with Anchors}.
\section1 Using Column Positioners
You will now add two entry fields to the page and position them in a column
to learn another method of \l{Using Positioners}{positioning items}.
Next, you will position the push buttons on the page in another column.
Finally, you will anchor the columns to the page to enable their positions
to change when the screen size changes.
To add entry fields to the page:
\list 1
\li In \uicontrol Library > \uicontrol {QML Types}, select the
\uicontrol {+ \QtQuick.Controls} button to display the
\l {Qt Quick Controls 2} types in the tab:
\image loginui2-imports.png
\li Drag and drop two instances of the \uicontrol {Text Field} type
to \uicontrol {Form Editor}.
\li Select one of the text fields in \uicontrol Navigator, and
change its id to \e usernameField in \uicontrol Properties.
\li In the \uicontrol Geometry group, \uicontrol Size field, set the
width of the field to \e 300 pixels.
\li In the \uicontrol Placeholder field, enter \e Username and select
\uicontrol tr to mark the text translatable.
\image loginui2-field-properties.png "Text field properties"
\li Select the other text field, and change its id to
\e passwordField, placeholder text to \e Password,
and width to \e 300 pixels.
\endlist
You will now position the fields and buttons as columns:
\list 1
\li Select \e usernameField and \e passwordField in
\uicontrol Navigator, and right-click on either item
to open a context menu.
\li Select \uicontrol Position > \uicontrol {Position in Column}
to position the fields on top of each other in
\uicontrol {Form Editor}.
\li Select the column in \uicontrol Navigator and change its id
to \e fieldColumn in \uicontrol Properties.
\li In the \uicontrol Spacing field, set the spacing between the
fields to 5 pixels.
\image loginui2-column-properties.png "Column properties"
\li Select \e loginButton and \e registerButton, and then select
\uicontrol Position > \uicontrol {Position in Column} to position
them in a column.
\li Select the button column, change its id to \e buttonColumn, and
set the spacing between the buttons to 5 pixels, as above.
\endlist
You will now anchor the field and button columns to the page:
\list 1
\li Select \e fieldColumn in \uicontrol Navigator.
\li In \uicontrol Properties > \uicontrol Layout, select the
\uicontrol Top button to anchor the top of the button column to
the top of its parent (the \e loginPage) with a 200-pixel margin.
\li Select the \inlineimage anchor-horizontal-center.png
(\uicontrol {Horizontal Center}) button to center the field
column horizontally on the page.
\li Select \e buttonColumn in \uicontrol Navigator.
\li In \uicontrol Properties > \uicontrol Layout, select the
\inlineimage anchor-bottom.png
(\uicontrol Bottom) button to anchor the bottom of the button
column to the bottom of its parent (the \e loginPage) with a
50-pixel margin.
\li Select the \uicontrol {Horizontal Center} button to center
the button column horizontally on the page.
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
The second iteration of your UI is now ready and should look something like
this in the Design mode and live preview:
\image loginui2-loginpage-ready.png "Login page in the Design mode"
\section1 Learn Qt Quick - Positioners
Qt Quick provides built-in positioner items. For many use cases, the best
positioner to use is a simple grid, row, or column, and Qt Quick provides
items that will position children in these formations in the most efficient
manner possible. For more information about using pre-defined positioners,
see \l {Item Positioners}.
For more complicated UI designs, you can use QML types from the
\l {Qt Quick Layouts Overview}{Qt Quick Layouts module}.
\section1 Next Steps
To learn more about positioning items in \QDS, see
\l{Positioning Items in UIs}.
To learn how to add a second page and move to it from the main page, see
the next example in the series, \l {Log In UI - Part 3}.
*/
|
