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
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
|
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
// **********************************************************************
// NOTE: the sections are not ordered by their logical order to avoid
// reshuffling the file each time the index order changes (i.e., often).
// Run the fixnavi.pl script to adjust the links to the index order.
// **********************************************************************
/*!
\page creator-using-qt-quick-designer.html
\if defined(qtdesignstudio)
\previouspage creator-modes.html
\nextpage qtquick-form-editor.html
\else
\previouspage quick-projects.html
\nextpage quick-uis.html
\endif
\title Design Views
\QDS contains views for designing UIs. To open them, select
\uicontrol View > \uicontrol Views. The following images present the
views that you are likely to use most often while designing UIs.
\image studio-design-mode.png "Design views"
\image studio-design-mode-states-timeline.png "The States and Timeline views"
You can move the views anywhere on the screen and save them as
\e workspaces, as instructed in \l {Managing Workspaces}.
To learn more about using the design views, see the following video:
\youtube RfEYO-5Mw6s
\section1 Summary of Design Views
\table
\header
\li View
\li Purpose
\li Read More
\row
\li \l{Form Editor}
\li Provides a working area for designing 2D UIs.
When you are editing 3D scenes, \uicontrol {Form Editor} is
used as a canvas for the 3D scene projected by the camera.
\li \l{Form Editor}
\row
\li \l{3D Editor}
\li Provides an editor for files you created using 3D graphics
applications and stored in one of the supported formats.
\li \l{3D Editor}
\row
\li \l Components
\li Contains preset components and your own components, that you can use
to design you application.
\li \l{Using Components}
\row
\li \l Assets
\li Contains assets such as images and fonts that you can use in your
application.
\li \l Assets
\row
\li \l Navigator
\li Displays the composition of the current component file as
a tree structure. A component file can contain references
to other components and assets.
\li \l Navigator
\row
\li \l Properties
\li Enables you to modify the properties of the selected component.
\li \l {Specifying Component Properties}
\row
\li \l{Connection View}
\li Enables you to add functionality to the UI by creating
connections between components, signals, and component properties.
\li \l{Adding Connections}
\row
\li \l States
\li Displays the different states that can be applied to a component.
Typically, states describe UI configurations, such as the
visibility and behavior of components and the available user
actions.
\li \l{Adding States}
\row
\li \l{Transition Editor}
\li Enables you to make movement between states smooth by animating
the changes between states.
\li \l{Animating Transitions Between States}
\row
\li \l Translations
\li Provides functionality to add multi-language support to your
project.
\li \l{Translations}
\row
\li \l Timeline
\li Provides a timeline and keyframe based editor for animating
the properties of components.
\li \l{Creating Timeline Animations}
\row
\li \l{Curve Editor}
\li Enables you to view and modify the whole animation curve by
inserting keyframes to the curve and dragging them and the point
handlers to modify the curve.
\li \l {Editing Animation Curves}
\row
\li \l{Text Editor}
\li Provides a code editor for viewing and modifying the code
generated by the visual editors.
\li \l {Working in Edit Mode}
\row
\li \l Projects
\li Shows a list of open projects and the files they contain.
\li \l Projects
\row
\li \l{File System}
\li Shows all files in the currently selected directory.
\li \l{File System}
\row
\li \l{Open Documents}
\li Shows currently open files.
\li \l{Open Documents}
\endtable
\section1 Summary of Main Toolbar Actions
The top level toolbar in the \uicontrol Design mode contains shortcuts to
widely used actions.
\table
\header
\li Button/Field
\li Action
\li Keyboard Shortcut
\li Read More
\row
\li \inlineimage icons/prev.png
\li \uicontrol {Go Back}: moves a step backwards in your location history.
That is, returns the focus to the last location in the last file it
was on.
\li \key Alt+< (\key Opt+Cmd+< on \macos)
\li \l{Navigating Between Open Files and Symbols}
\row
\li \inlineimage icons/next.png
\li \uicontrol {Go Forward}: moves a step forward in your location history.
\li \key Alt+> (\key Opt+Cmd+> on \macos)
\li \l{Navigating Between Open Files and Symbols}
\row
\li \inlineimage icons/unlocked.png
\li File is writable: the currently open file can be modified and saved.
\li
\li \l{Open Documents}
\row
\li File type icon
\li Indicates the type of the currently open file. Design views cannot
be split, so the icon cannot be dragged, contrary to the tooltip.
\li
\li \l{Open Documents}
\row
\li Currently open file
\li Displays the location and filename of the currently open file. You
can select another file in the list of open files to view it in
\uicontrol {Form Editor} and \uicontrol Navigator.
\li
\li \l{Open Documents}
\row
\li \inlineimage icons/close.png
\li \uicontrol {Close Document}: closes the current file.
\li \key Ctrl+W (\key Cmd+W on \macos)
\li
\row
\li \inlineimage icons/live_preview.png
\li \uicontrol {Show Live Preview} shows a preview of the current file
or the entire UI. The changes you make to the UI are instantly
visible to you in the preview.
\li \key Alt+P (\key Opt+P on \macos)
\li \l{Validating with Target Hardware}
\row
\li Preview size
\li Displays the size of the preview dialog as a percentage. You can
select another percentage in the list to view the UI in different
sizes.
\li
\li \l{Previewing on Desktop}
\row
\li FPS
\li Displays the frames-per-second (FPS) refresh rate of previewed
animations.
\li
\li \l{Previewing on Desktop}
\row
\li Preview language
\li Displays the language used for a localized application during
preview. You can select another language in the list of languages
that the application has been localized to.
\li
\li
\row
\li \inlineimage icons/qtcreator-reset-position-icon.png
\li Returns a component to its \e {implicit position} after
being moved.
\li \key Ctrl+D (\key Cmd+D on \macos)
\li \l{Resetting Component Position and Size}
\row
\li \inlineimage icons/qtcreator-reset-size-icon.png
\li Returns a component to its implicit size after it was scaled.
\li \key Shift+S
\li \l{Resetting Component Position and Size}
\row
\li \inlineimage icons/anchor-fill.png
\li Fills the selected component to its parent component.
\li \key Shift+F
\li \l{Setting Anchors and Margins}
\row
\li \inlineimage icons/qtcreator-anchors-reset-icon.png
\li Resets anchors to their saved state for the selected component.
\li \key Ctrl+Shift+R (\key Shift+Cmd+R on \macos)
\li \l{Setting Anchors and Margins}
\row
\li \inlineimage icons/copy-formatting.png
\li Copies property values from the selected component.
\li
\li \l{Copying and Pasting Formatting}
\row
\li \inlineimage icons/paste-formatting.png
\li Applies copied property values to one or several selected
components.
\li
\li \l{Copying and Pasting Formatting}
\row
\li \inlineimage row.png
\li Uses a \uicontrol Row component to lay out the selected components.
\li \key Ctrl+U (\key Cmd+U on \macos)
\li \l{Using Layouts}
\row
\li \inlineimage column.png
\li Uses a \uicontrol Column component to lay out the selected
components.
\li \key Ctrl+L (\key Cmd+L on \macos)
\li \l{Using Layouts}
\row
\li \inlineimage grid.png
\li Uses a \uicontrol Grid component to lay out the selected
components.
\li \key Shift+G
\li \l{Using Layouts}
\if defined(qtdesignstudio)
\row
\li \inlineimage icons/edit.png
\li \uicontrol {Show Event List}: opens a dialog for viewing and
creating an event list for an application flow.
\li \key Alt+E (\key Opt+E on \macos)
\li \l{Simulating Events}
\row
\li \inlineimage icons/assign.png
\li \uicontrol {Assign Events to Actions}: assigns events to actions in
an application flow.
\li \key Alt+A (\key Opt+A on \macos)
\li \l{Simulating Events}
\endif
\row
\li Styling
\li Displays the UI style used for UI controls.
\li
\li \l{Styling Controls}
\row
\li Subcomponents
\li Displays the components referred to in the current file. Select a
component in the list to open it in \uicontrol {Form Editor} and
\uicontrol Navigator.
\li
\li \l{Using Components}
\row
\li Workspace
\li Displays the currently selected workspace. To switch to another
workspace, select it in the list.
\li
\li \l{Managing Workspaces}
\row
\li \inlineimage icons/annotation.png
\li Enables you to add or edit global annotations.
\li
\li \l{Annotating Designs}
\endtable
*/
|
