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
|
/****************************************************************************
**
** Copyright (C) 2020 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.
**
****************************************************************************/
/*!
\contentspage index.html
\page quick-uis.html
\if defined(qtdesignstudio)
\previouspage quick-converting-ui-projects.html
\else
\previouspage creator-using-qt-quick-designer.html
\endif
\nextpage quick-components.html
\title Creating UIs
\if defined(qtdesignstudio)
When you install \QDS, everything you'll need to design UIs
using \l{Qt Quick} and to preview them on the desktop or on Android or
embedded Linux devices is automatically installed and configured correctly
for you.
\endif
Qt Quick enables you to build UIs around the behavior of
\e components and how they connect with one another. You
create components using Qt Quick and QML types that are available in
the Design mode. You can specify values for the \e properties of a
component to change its appearance and behavior. All QML types have a
set of predefined properties, some of which control things that are
visible to users, while others are used behind the scene.
While it is useful to learn the basics of Qt Quick, you can also rely on
\QMLD to write the code for you when you drag-and-drop the ready-made
components to the \uicontrol {Form Editor} view and change them to your
liking by modifying their properties in the \uicontrol Properties view in
the Design mode. You can always check up details in the extensive Qt Quick
documentation by pressing \key F1.
\list
\li \l {Creating Components}
In addition to your imported artwork, you can use the Design
mode to customize ready-made components or design any custom form
and shape directly as QML types. You can import visual assets in
various formats, such as PNG, JPG, and SVG for use in the
components.
\li \l {Managing Item Hierarchy}
You can manage the items in the current QML file and their
relationships in the \uicontrol Navigator.
\li \l {Specifying Item Properties}
You can specify values for the properties of a component to change
its appearance and behavior. All QML types have a set of predefined
properties. Some properties, such as position, size, and visibility,
are common to all QML types, whereas others are specific to the QML
type. You can specify properties for your components in the
\uicontrol Properties view.
\li \l {Using Custom Fonts}
You can load custom fonts to \QMLD and use them in your designs.
\li \l {Annotating Designs}
You can annotate your designs to provide reviewers or developers
with additional information about them.
\if defined(qtdesignstudio)
\endlist
\section1 Related Topics
\list
\endif
\li \l{Qt Quick UI Forms}
Some of the wizards create Qt Quick projects that contain UI forms
(.ui.qml files). The forms use a purely declarative subset of the
QML language and you can edit them in the Design mode.
\endlist
*/
|
