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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
|
/****************************************************************************
**
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator 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.
**
****************************************************************************/
/*!
\page qtquick-form-editor.html
\previouspage creator-using-qt-quick-designer.html
\nextpage studio-3d-editor.html
\title Form Editor
You design applications in the \uicontrol {Form Editor} view by opening
component files and placing instances of \l{Component Types}{2D components}
and \l{Assets}{assets} into them.
\image qmldesigner-form-editor.png "Form Editor view"
When you select component instances in \uicontrol {Form Editor}, markers
appear around their edges and in their corners. Depending on the shape of
the cursor, you can apply the following actions to the component instances
by dragging them:
\list
\li \l{Moving Components}{Move}
\li \l{Resizing 2D Components}{Resize}
\li \l{Rotating 2D Components}{Rotate}
\endlist
\section1 Summary of Form Editor Buttons
The \uicontrol {Form Editor} toolbar contains the following buttons and
fields.
\table
\header
\li Button/Field
\li Tooltip
\li Read More
\row
\li \inlineimage no_snapping.png
\li Disables snapping.
\li \l{Snapping to Parent and Sibling Components}
\row
\li \inlineimage snapping_and_anchoring.png
\li Anchors the component instance to the component instances that it
is snapped to.
\li \l{Snapping to Parent and Sibling Components}
\row
\li \inlineimage snapping.png
\li Snaps component instances to their parent or siblings when you
align them.
\li \l{Snapping to Parent and Sibling Components}
\row
\li \inlineimage boundingrect.png
\li Hides and shows component instance boundaries.
\li \l{Hiding Component Boundaries}
\row
\li \uicontrol {Override Width}
\li Shows a preview of the component using the specified width.
\li \l{Previewing Component Size}
\row
\li \uicontrol {Override Height}
\li Shows a preview of the component using the specified height.
\li \l{Previewing Component Size}
\row
\li \inlineimage icons/canvas-color.png
\li Sets the color of the \uicontrol {Form Editor} working area.
\li \l{Setting Canvas Color}
\row
\li \inlineimage icons/zoomIn.png
\li Zooms in.
\li \l{Zooming}
\row
\li \inlineimage icons/zoomOut.png
\li Zooms out.
\li \l{Zooming}
\row
\li Zoom level
\li Sets the zoom level that you select from the list.
\li \l{Zooming}
\row
\li \inlineimage icons/zoomAll.png
\li Zooms to fit all content.
\li \l{Zooming}
\row
\li \inlineimage icons/zoomSelection.png
\li Zooms to fit the current selection.
\li \l{Zooming}
\row
\li \inlineimage reset.png
\li Refreshes the contents of \uicontrol {Form Editor}.
\li \l{Refreshing Form Editor Contents}
\endtable
\section1 Moving Components
When the move cursor is displayed, you can move the selected component
instance to any position in \uicontrol {Form Editor}.
\image qmldesigner-form-editor-move-cursor.png "Move cursor in Form Editor view"
For more information about alternative ways of positioning component
instances in UIs, see \l{Scalable Layouts}.
\section1 Resizing 2D Components
When the resize cursor is displayed, you can drag the markers to resize
component instances.
\image qtquick-designer-scaling-items.png "Form Editor view"
To have the resizing done from the center of the selected component instance
rather than from its edges, press \key Alt (or \key Opt on \macos).
To preserve the image aspect ratio while resizing when using the corner
markers, press \key Shift. This also works on component instances that
are anchored using left, right, top, or bottom anchors.
To both resize from the center of the component instance and preserve the
aspect ratio, press \key Alt+Shift (or \key {Opt+Shift} on \macos).
For more information about alternative ways to specify the size of a
component or component instance in a UI, see \l{2D Geometry}.
\section1 Rotating 2D Components
When the rotation cursor \inlineimage icons/rotation-cursor.png
is displayed in one of the corners of a component instance, you can drag
clockwise or counter-clockwise to freely rotate the component instance
around its origin.
\image qtquick-designer-rotating-items.png "2D rotation tool"
Additionally, press \key Shift or \key Alt (or \key Opt on \macos)
to rotate component instances in steps of 5 or 45 degrees, respectively.
You can set the \l{Managing 2D Transformations}{origin} in \l Properties >
\uicontrol {Geometry - 2D} > \uicontrol Origin. There, you can also enter
the value of the \uicontrol Rotation property in degrees.
\section1 Zooming
You can use the zoom buttons on the toolbar to zoom into and out of
\uicontrol {Form Editor} or select the zoom level as a percentage
from a list. More buttons are availabe for zooming to fit all content
in the view or zooming to fit the currently selected component instances.
\image qmldesigner-zooming.gif "Zooming in Form Editor"
\section1 Snapping to Parent and Sibling Components
You can use snapping to align component instances in
\uicontrol {Form Editor}. Select the \inlineimage snapping.png
button to have the component instances snap to their parent or siblings.
Snapping lines automatically appear to help you position the component
instances. Click the \inlineimage snapping_and_anchoring.png
button to anchor the selected component instance to those that you snap to.
Only one snapping button can be selected at the time. Selecting
one snapping button automatically deselects the others.
Choose \uicontrol Tools > \uicontrol Options > \uicontrol {Qt Quick} >
\uicontrol {Qt Quick Designer} to specify settings for snapping. In the
\uicontrol {Parent component padding} field, specify the distance in
pixels between the parent and the snapping lines. In the
\uicontrol {Sibling component spacing} field, specify the
distance in pixels between siblings and the snapping lines.
\image qtquick-designer-options.png "Qt Quick Designer options"
The following image shows the snapping lines (1) when
\uicontrol {Parent component padding} is set to 5 pixels.
\image qmldesigner-snap-margins.png "Snapping lines on canvas"
For alternative ways of aligning and distributing component instances by
using the \l Properties view, see \l{Aligning and Distributing Components}.
\section1 Hiding Component Boundaries
\uicontrol {Form Editor} displays the boundaries of component instances.
To hide them, select the \inlineimage boundingrect.png
button.
\section1 Previewing Component Size
The width and height of the root component in a UI file determine the size
of the component. You can reuse components, such as buttons, in different
sizes in other UI files and design UIs for use with different device
profiles, screen resolution, or screen orientation. The component size
might also be zero (0,0) if its final size is determined by
\l{Setting Bindings}{property bindings}.
To experiment with different component sizes, enter values in the
\uicontrol {Override Width} and \uicontrol {Override Height} fields (1) on
the toolbar. The changes are displayed in the \uicontrol {Form Editor}
view (2) and in the \uicontrol States view (3), but the property
values are not changed permanently in the UI file. You can permanently
change the property values in the \uicontrol Properties view (4).
\image qmldesigner-preview-size.png "Component width and height"
To set the initial size of the root component, select \uicontrol Tools >
\uicontrol Options > \uicontrol {Qt Quick} > \uicontrol {Qt Quick Designer}
and specify the component width and height in the
\uicontrol {Root Component Init Size} group.
\section1 Specifying Canvas Size
To change the canvas size, select \uicontrol Tools > \uicontrol Options >
\uicontrol {Qt Quick} > \uicontrol {Qt Quick Designer} and
specify the canvas width and height in the \uicontrol Canvas group.
\section1 Setting Canvas Color
If you set the background of the root component transparent, the color of
the working area can make it difficult to see the component instance you
are working on. To make component instances more visible, you can select
the canvas color in the \inlineimage icons/canvas-color.png
list. By default, the color is transparent. Setting the canvas color does
not affect the background color of your root component or component
instances in any way.
\image qmldesigner-canvas-color.png "Transparent canvas color for a transparent component instance"
\section1 Refreshing Form Editor Contents
When you open a UI file, the component defined in the file and the component
instances it contains are drawn in \uicontrol {Form Editor}. When you
edit component instance properties in \l Properties, the code and its
representation in \uicontrol {Form Editor} might get out of sync. For
example, when you change the position of a component instance within a
column or a row, the new position might not be displayed correctly in
\uicontrol {Form Editor}.
To refresh the contents of \uicontrol {Form Editor}, press \key R or
select the \inlineimage reset.png
(\uicontrol {Reset View}) button.
\include qtquick-component-context-menu.qdocinc context-menu
*/
|
