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

Doc: make Qt Quick terminology more consistent

Browse Source 
- Use "component" instead of "QML type", "item" or "element"
- Hide Qt Quick and QML where possible (kept it in some Qt Creator topics)
- Fix references to imports, assets, and modules in Library
- Add links to the new Design view topics

Task-number: QDS-3778
Change-Id: I714aeb218efd4bdc1fc2f156194bf95ce3e174b5
Reviewed-by: Johanna Vanhatapio <johanna.vanhatapio@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Leena Miettinen
2021-03-16 15:27:48 +01:00
parent 5ae8700e92
commit ad0b10e695
31 changed files with 591 additions and 603 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
doc/qtcreator/images/qtquick-designer-qtquickcontrols-types.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 16 KiB

52
doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc
View File

@@ -1,6 +1,6 @@
/**************************************************************************** /****************************************************************************
** **
** Copyright (C) 2020 The Qt Company Ltd. ** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/ ** Contact: https://www.qt.io/licensing/
** **
** This file is part of the Qt Creator documentation. ** This file is part of the Qt Creator documentation.
@@ -30,11 +30,11 @@
\title Creating a Qt Quick Application \title Creating a Qt Quick Application
This tutorial uses built-in QML types and illustrates basic concepts of This tutorial uses preset components and illustrates basic concepts of
\l{Qt Quick}. \l{Qt Quick}.
For more information about the UI choices you have, see \l{User Interfaces}. For more information about the UI choices you have, see \l{User Interfaces}.
This tutorial describes how to use \QC to implement Qt Quick states and This tutorial describes how to use \QC to implement states and
transitions. We create an application that displays a Qt logo that moves transitions. We create an application that displays a Qt logo that moves
between three rectangles on the page when you click them. between three rectangles on the page when you click them.
@@ -47,13 +47,13 @@
\include qtquick-tutorial-create-empty-project.qdocinc qtquick empty application \include qtquick-tutorial-create-empty-project.qdocinc qtquick empty application
\QC generates a QML file, \e main.qml, and opens it in \QC generates a component file, \e main.qml, and opens it in
\uicontrol {Text Editor}. The wizard template uses the \l Window type, \uicontrol {Text Editor}. The wizard template uses the \l Window component,
which does not support adding states. Because we want to use states in which does not support adding states. Because we want to use states in
this example, we first replace the Window type with a \l {basic-rectangle} this example, we first replace the Window component with a \l {basic-rectangle}
{Rectangle} type. We must also remove the line that sets the \c title {Rectangle} component. We must also remove the line that sets the \c title
property, which the Rectangle type does not have. If you change the value of property, which the Rectangle component does not have. If you change the value of
the \uicontrol Type property in the \uicontrol Properties view, \QC offers the \uicontrol component property in the \l Properties view, \QC offers
to automatically remove the \c title property. to automatically remove the \c title property.
\section1 Creating the Main View \section1 Creating the Main View
@@ -62,20 +62,19 @@
the top left corner of the view and two empty rectangles. the top left corner of the view and two empty rectangles.
We use the \e qt-logo.png image in this tutorial, but you can also use We use the \e qt-logo.png image in this tutorial, but you can also use
any other image or a QML type, instead. any other image or a component, instead.
\note If a view is hidden, you can show it by selecting \uicontrol View > \note If a view is hidden, you can show it by selecting \uicontrol View >
\uicontrol Views. \uicontrol Views.
\list 1 \list 1
\li Select \uicontrol Rectangle in \uicontrol Navigator, and enter \li Select \uicontrol Rectangle in \l Navigator, and enter
\e page in the \uicontrol Id field in the \uicontrol Properties \e page in the \uicontrol Id field in \uicontrol Properties.
view.
\li Select \uicontrol Library > \uicontrol Assets > \li Select \l Library > \uicontrol Assets > \inlineimage plus.png
\uicontrol {Add New Assets} to locate qt-logo.png (or your own to locate qt-logo.png (or your own image) and add it to the
image) and add it to the project folder. project folder.
\li Drag and drop the image from \uicontrol Assets to \e page in \li Drag and drop the image from \uicontrol Assets to \e page in
\uicontrol Navigator. \uicontrol Navigator.
@@ -93,9 +92,10 @@
\endlist \endlist
\li In \uicontrol Library > \uicontrol {QML Types} > \li In \uicontrol Library > \uicontrol Components >
\uicontrol {Qt Quick - Basic}, select \uicontrol Rectangle and \uicontrol {Default Components} > \uicontrol Basic, select
drag and drop it to \e page in \uicontrol Navigator. \uicontrol Rectangle and drag and drop it to \e page in
\uicontrol Navigator.
\image qmldesigner-tutorial-topleftrect.png "Rectangle properties" \image qmldesigner-tutorial-topleftrect.png "Rectangle properties"
@@ -131,7 +131,7 @@
\endlist \endlist
\li Drag and drop a \uicontrol {Mouse Area} type from the \li Drag and drop a \uicontrol {Mouse Area} component from the
\uicontrol Library to \e topLeftRect in \uicontrol Navigator. \uicontrol Library to \e topLeftRect in \uicontrol Navigator.
\li Click \uicontrol {Layout}, and then click the \li Click \uicontrol {Layout}, and then click the
@@ -142,7 +142,7 @@
\li In the \uicontrol Navigator, copy topLeftRect (by pressing \li In the \uicontrol Navigator, copy topLeftRect (by pressing
\key {Ctrl+C}) and paste it to \e page in \uicontrol Navigator \key {Ctrl+C}) and paste it to \e page in \uicontrol Navigator
twice (by pressing \key {Ctrl+V}). \QC renames the new instances twice (by pressing \key {Ctrl+V}). \QC renames the new instances
of the type topLeftRect1 and topLeftRect2. of the component topLeftRect1 and topLeftRect2.
\li Select topLeftRect1 and edit its properties: \li Select topLeftRect1 and edit its properties:
@@ -194,9 +194,9 @@
For more information about the views you used, see: For more information about the views you used, see:
\list \list
\li \l{Creating Components} \li \l Library
\li \l{Navigator} \li \l Navigator
\li \l{Specifying Component Properties} \li \l Properties
\endlist \endlist
Next, we will make the image move between the rectangles when users click Next, we will make the image move between the rectangles when users click
@@ -247,7 +247,7 @@
For more information about the views you used, see: For more information about the views you used, see:
\list \list
\li \l{Adding States} \li \l States
\li \l{Connecting Components to Signals} \li \l{Connecting Components to Signals}
\endlist \endlist
@@ -305,7 +305,7 @@
\list \list
\li \l{Editing Easing Curves} \li \l{Editing Easing Curves}
\li \l{Animating Transitions Between States} \li \l{Transition Editor}
\endlist \endlist
Click the rectangles to view the animated transitions. Click the rectangles to view the animated transitions.

10
doc/qtcreator/src/qtquick/creator-only/qtquick-creating.qdoc
View File

@@ -52,15 +52,15 @@
target platforms. target platforms.
\li \uicontrol {Qt Quick Application - Scroll} uses the \li \uicontrol {Qt Quick Application - Scroll} uses the
\l{ScrollView} type to implement a scrollable list view \l{ScrollView} component to implement a scrollable list view
(requires Qt 5.9 or later). (requires Qt 5.9 or later).
\li \uicontrol {Qt Quick Application - Stack} uses the \li \uicontrol {Qt Quick Application - Stack} uses the
\l{StackView} type to implement a set of pages with a stack-based \l{StackView} component to implement a set of pages with a stack-based
navigation model (requires Qt 5.7 or later). navigation model (requires Qt 5.7 or later).
\li \uicontrol {Qt Quick Application - Swipe} uses the \li \uicontrol {Qt Quick Application - Swipe} uses the
\l{SwipeView} type to implement a set of pages with a swipe-based \l{SwipeView} component to implement a set of pages with a swipe-based
navigation model (requires Qt 5.7 or later). navigation model (requires Qt 5.7 or later).
\endlist \endlist
@@ -179,7 +179,7 @@
\e main.qml, that you can modify in the \uicontrol {Form Editor} \e main.qml, that you can modify in the \uicontrol {Form Editor}
or the \uicontrol {Text Editor}. or the \uicontrol {Text Editor}.
For the Stack and Swipe applications, \QC generates two UI files, For the Stack and Swipe applications, \QC generates two \l{UI Files}{UI files},
\e Page1Form.ui.qml and \e Page2Form.ui.qml, that you can modify in the \e Page1Form.ui.qml and \e Page2Form.ui.qml, that you can modify in the
\uicontrol {Form Editor} and a QML file, \e main.qml, that you can \uicontrol {Form Editor} and a QML file, \e main.qml, that you can
modify in the \uicontrol {Text Editor} to add the application logic. modify in the \uicontrol {Text Editor} to add the application logic.
@@ -269,7 +269,7 @@
files in the project folder belong to the project. Therefore, you do files in the project folder belong to the project. Therefore, you do
not need to individually list all the files in the project. not need to individually list all the files in the project.
\li .qml file defines an UI item, such as a component or the \li .qml file defines a UI item, such as a component or the
whole application UI. whole application UI.
\li ui.qml file defines a form for the application UI. This file is \li ui.qml file defines a form for the application UI. This file is

144
doc/qtcreator/src/qtquick/library/qtquick-controls.qdoc
View File

@@ -30,13 +30,13 @@
\title User Interaction Methods \title User Interaction Methods
You can use a set of basic QML types to add interaction methods to UIs, You can use a set of basic components to add interaction methods to UIs,
such as performing actions by using a pointing device or the keyboard, such as performing actions by using a pointing device or the keyboard,
or flicking the visible area of the screen horizontally or vertically. or flicking the visible area of the screen horizontally or vertically.
Further, you can use \l{Qt Quick Controls} types to inform users about Further, you can use \l{Qt Quick Controls} components to inform users about
the progress of the application or to gather input from users. the progress of the application or to gather input from users.
\image qtquick-designer-qtquickcontrols-types.png "Qt Quick Controls 2 types in Library" \image qtquick-designer-qtquickcontrols-types.png "Qt Quick Controls components in Library"
The following types of controls are available for user interaction: The following types of controls are available for user interaction:
@@ -50,7 +50,7 @@
\endlist \endlist
You can specify values for the properties of components in the You can specify values for the properties of components in the
\uicontrol Properties view. Some properties are common to all components, \l Properties view. Some properties are common to all components,
whereas some are common to particular types of controls. Some properties whereas some are common to particular types of controls. Some properties
are only available for a particular component. The following sections are only available for a particular component. The following sections
describe the basic interaction methods, the controls, and their properties. describe the basic interaction methods, the controls, and their properties.
@@ -63,17 +63,17 @@
\section2 Mouse Area \section2 Mouse Area
QML uses signals and handlers to deliver mouse interactions. Specifically, Signals and handlers are used to deliver mouse interactions. Specifically,
Qt Quick provides a \uicontrol {Mouse Area} type that developers can use to you can use a \uicontrol {Mouse Area} component to define JavaScript
define JavaScript callbacks (also called signal handlers), which accept callbacks (also called signal handlers), which accept mouse events within
mouse events within a defined area. a defined area.
A mouse area receives events within a defined area. One quick way to define A mouse area receives events within a defined area. One quick way to define
this area is to \l{Setting Anchors and Margins}{anchor} the mouse area to this area is to \l{Setting Anchors and Margins}{anchor} the mouse area to
its parent's area. If the parent is a \l {basic-rectangle}{Rectangle} (or its parent's area. If the parent is a \l {basic-rectangle}{Rectangle} (or
any component that is derived from an \l {basic-item}{Item}), the mouse area any component that is derived from an \l {basic-item}{Item}), the mouse area
will fill the area defined by the parent's dimensions. Alternatively, you will fill the area defined by the parent's dimensions. Alternatively, you
can define an area smaller or larger than the parent. Several controls,such can define an area smaller or larger than the parent. Several controls, such
as \l {Button}{buttons}, contain a mouse area. as \l {Button}{buttons}, contain a mouse area.
A mouse area emits \l{Connecting Components to Signals}{signals} in response A mouse area emits \l{Connecting Components to Signals}{signals} in response
@@ -102,38 +102,38 @@
to the focused component. If no component has active focus, the key event to the focused component. If no component has active focus, the key event
is ignored. If the component with active focus accepts the key event, is ignored. If the component with active focus accepts the key event,
propagation stops. Otherwise the event is sent to the component's parent propagation stops. Otherwise the event is sent to the component's parent
until the event is accepted, or the root item is reached and the event is until the event is accepted, or the root component is reached and the event
ignored. is ignored.
A component has focus when the \uicontrol Focus property in the A component has focus when the \uicontrol Focus property in the
\uicontrol Advanced tab is set to \c true. However, for reusable \uicontrol Advanced tab is set to \c true. However, for reusable
or imported components, this is not sufficient, and you should use or imported components, this is not sufficient, and you should use
a \uicontrol {Focus Scope} type. a \uicontrol {Focus Scope} component.
Within each focus scope, one object may have focus enabled. If more Within each focus scope, one object may have focus enabled. If more
than one component have it enabled, the last component to enable it than one component have it enabled, the last component to enable it
will have the focus and the others are unset, similarly to when there will have the focus and the others are unset, similarly to when there
are no focus scopes. are no focus scopes.
When a focus scope receives active focus, the contained type with When a focus scope receives active focus, the contained component with
focus set (if any) also gets the active focus. If this type is focus set (if any) also gets the active focus. If this component is
also a focus scope, both the focus scope and the sub-focused item also a focus scope, both the focus scope and the sub-focused component
will have active focus. will have active focus.
The \uicontrol {Focus Scope} type is not a visual type, and therefore the The \uicontrol {Focus Scope} component is not a visual component and
properties of its children need to be exposed to the parent item of the therefore the properties of its children need to be exposed to the parent
focus scope. \l{Using Layouts}{Layouts} and \l{Using Positioners} component of the focus scope. \l{Using Layouts}{Layouts} and
{positioners} will use these visual and styling properties to create the \l{Using Positioners}{positioners} will use these visual and styling
layout. properties to create the layout.
For more information, see \l {Keyboard Focus in Qt Quick}. For more information, see \l {Keyboard Focus in Qt Quick}.
\section2 Flickable \section2 Flickable
\uicontrol Flickable places its children on a surface that can be dragged \uicontrol Flickable places its children on a surface that can be dragged
and flicked, causing the view onto the child items to scroll. This and flicked, causing the view onto the child components to scroll. This
behavior forms the basis of components that are designed to show large behavior forms the basis of components that are designed to show large
numbers of child items, such as \uicontrol {List View} and numbers of child components, such as \uicontrol {List View} and
\uicontrol {Grid View}. For more information, see \l{List and Grid Views}. \uicontrol {Grid View}. For more information, see \l{List and Grid Views}.
In traditional user interfaces, views can be scrolled using standard In traditional user interfaces, views can be scrolled using standard
@@ -144,14 +144,14 @@
scrolling continues after the user has stopped touching the view. scrolling continues after the user has stopped touching the view.
The contents of a flickable component are not automatically clipped. If The contents of a flickable component are not automatically clipped. If
the component is not used as a full-screen item, consider selecting the the component is not used as a full-screen component, consider selecting the
\uicontrol Clip check box in the \uicontrol Visibility section. \uicontrol Clip check box in the \uicontrol Visibility section.
\image qtquick-designer-flickable-properties.png "Flickable properties" \image qtquick-designer-flickable-properties.png "Flickable properties"
Users can interact with a flickable component if the \uicontrol Interactive Users can interact with a flickable component if the \uicontrol Interactive
property is set to \c true. Set it to \c false to temporarily disable property is set to \c true. Set it to \c false to temporarily disable
flicking. This enables special interaction with the components children. flicking. This enables special interaction with the component's children.
For example, you might want to freeze a flickable map while scrolling For example, you might want to freeze a flickable map while scrolling
through a pop-up that is a child of the Flickable. through a pop-up that is a child of the Flickable.
@@ -202,20 +202,20 @@
The \uicontrol {Content size} field specifies the dimensions of the The \uicontrol {Content size} field specifies the dimensions of the
surface controlled by a flickable. Typically, set the values of the surface controlled by a flickable. Typically, set the values of the
\uicontrol W and \uicontrol H fields to the combined size of the items \uicontrol W and \uicontrol H fields to the combined size of the components
placed in the flickable. You can set additional margins around the placed in the flickable. You can set additional margins around the
content in the \uicontrol Margins field. content in the \uicontrol Margins field.
The \uicontrol Origin field specifies the origin of the content. It The \uicontrol Origin field specifies the origin of the content. It
refers to the top-left position of the content regardless of layout refers to the top-left position of the content regardless of layout
direction. Usually, the \uicontrol X and \uicontrol Y are set to 0. direction. Usually, the \uicontrol X and \uicontrol Y values are set to 0.
However, a \l{ListView}{List View} and \l {GridView}{Grid View} However, a \l{ListView}{List View} and \l {GridView}{Grid View}
may have an arbitrary origin due to delegate size variation, or item may have an arbitrary origin due to delegate size variation, or component
insertion or removal outside the visible region. insertion or removal outside the visible region.
\section1 General Control Properties \section1 General Control Properties
You can set control properties in the \uicontrol Properties view. You can set control properties in the \l Properties view.
\image qtquick-designer-control-properties.png "Control section in Properties" \image qtquick-designer-control-properties.png "Control section in Properties"
@@ -229,7 +229,7 @@
components, unless it has been explicitly set for them. components, unless it has been explicitly set for them.
\note Take care when enabling wheel events for controls within scrollable \note Take care when enabling wheel events for controls within scrollable
items, such as \l Flickable, because the control will consume the components, such as \l Flickable, because the control will consume the
events, and therefore interrupt scrolling of the flickable. events, and therefore interrupt scrolling of the flickable.
\uicontrol Spacing is useful for controls that have multiple or repetitive \uicontrol Spacing is useful for controls that have multiple or repetitive
@@ -296,7 +296,7 @@
\if defined(qtdesignstudio) \if defined(qtdesignstudio)
To create a button that contains an icon, use the wizard template to To create a button that contains an icon, use the wizard template to
\l{Creating Custom Controls}{create a custom button} and drag-and-drop \l{Creating Custom Controls}{create a custom button} and drag-and-drop
the icon to the button background item. For an example of using the the icon to the button background component. For an example of using the
wizard template, see \l{Creating a Push Button}. wizard template, see \l{Creating a Push Button}.
\endif \endif
@@ -323,7 +323,7 @@
\image qtquickcontrols2-checkdelegate.gif "Check delegate" \image qtquickcontrols2-checkdelegate.gif "Check delegate"
Use check boxes to build multi-selection option lists, where any number Use check boxes to build multi-selection option lists where any number
of options can be selected, including none, but the options are not of options can be selected, including none, but the options are not
mutually exclusive. mutually exclusive.
@@ -346,11 +346,11 @@
When options can be grouped, you can use a partially checked check box to When options can be grouped, you can use a partially checked check box to
represent the whole group. Select \uicontrol PartiallyChecked in the represent the whole group. Select \uicontrol PartiallyChecked in the
\uicontrol {Check state} field to indicate that users selected some \uicontrol {Check state} field to indicate that users selected some
sub-items in the group, but not all of them. sub-components in the group but not all of them.
The checkable options are often listed vertically. The checkable options are often listed vertically.
The check box label should be a statement that the check mark makes true, The check box label should be a statement that the check mark makes true
and that the absence of a check mark makes false. Therefore, the check box and that the absence of a check mark makes false. Therefore, the check box
label should not contain a negative statement. label should not contain a negative statement.
@@ -421,7 +421,7 @@
focus. Select the \uicontrol Checkable check box to make a button checkable. focus. Select the \uicontrol Checkable check box to make a button checkable.
To make the button checked, select the \uicontrol Checked check box. To make the button checked, select the \uicontrol Checked check box.
Buttons that belong to the same parent item can be mutually exclusive. Buttons that belong to the same parent component can be mutually exclusive.
Users can click a button to check it, and the previous selection is Users can click a button to check it, and the previous selection is
cleared. Users cannot uncheck the currently checked button by clicking cleared. Users cannot uncheck the currently checked button by clicking
it. Instead, they must click another button in the group to set the new it. Instead, they must click another button in the group to set the new
@@ -463,7 +463,7 @@
that the UI has to wait for the operation to complete. that the UI has to wait for the operation to complete.
A busy indicator is similar to an indeterminate \l {Progress Bar}. Both can A busy indicator is similar to an indeterminate \l {Progress Bar}. Both can
be used to indicate background activity. The main difference is visual, and be used to indicate background activity. The main difference is visual and
that a progress bar can also present a concrete amount of progress (when it that a progress bar can also present a concrete amount of progress (when it
can be determined). Due to the visual difference, busy indicators and can be determined). Due to the visual difference, busy indicators and
indeterminate progress bars fit in different places in UIs. indeterminate progress bars fit in different places in UIs.
@@ -620,7 +620,7 @@
A flat combo box does not draw a background unless it is A flat combo box does not draw a background unless it is
interacted with, which makes it blend into the UI. Use flat combo interacted with, which makes it blend into the UI. Use flat combo
boxes on a tool bar, for example, to match the flat look of tool boxes on a toolbar, for example, to match the flat look of tool
buttons. To create a flat combo box, select the \uicontrol Flat buttons. To create a flat combo box, select the \uicontrol Flat
check box. check box.
@@ -682,24 +682,24 @@
\uicontrol {Tool Bar} contains application-wide and context-sensitive \uicontrol {Tool Bar} contains application-wide and context-sensitive
actions and controls, such as navigation buttons and search fields. A actions and controls, such as navigation buttons and search fields. A
tool bar is commonly used as a header or footer of an \l ApplicationWindow. toolbar is commonly used as a header or footer of an \l ApplicationWindow.
Select the toolbar position in the \uicontrol Position field. Select the toolbar position in the \uicontrol Position field.
\image qtquick-designer-toolbar-properties.png "Tool Bar properties" \image qtquick-designer-toolbar-properties.png "Tool Bar properties"
\uicontrol {Tool Button} is nearly identical to \l Button, but it has a \uicontrol {Tool Button} is nearly identical to \l Button, but it has a
graphical appearance that makes it more suitable for insertion into a graphical appearance that makes it more suitable for insertion into a
tool bar. toolbar.
A tool bar does not provide a layout of its own, but requires you to A toolbar does not provide a layout of its own, but requires you to
position its contents, for instance by creating a \l RowLayout. If the position its contents, for instance by creating a \l RowLayout. If the
tool bar contains only one item, it will resize to fit the implicit item toolbar contains only one item, it will resize to fit the implicit item
size. This makes a tool bar particularly suitable for use together with size. This makes a toolbar particularly suitable for use together with
\l{Using Layouts}{layouts}. However, you can specify content size in the \l{Using Layouts}{layouts}. However, you can specify content size in the
\uicontrol {Content width} and \uicontrol {Content height} fields. \uicontrol {Content width} and \uicontrol {Content height} fields.
\uicontrol {Tool Separator} is used to visually distinguish between \uicontrol {Tool Separator} is used to visually distinguish between
groups of items on a tool bar by separating them with a line. It can groups of items on a toolbar by separating them with a line. It can
be used in horizontal or vertical toolbars by setting the value of be used in horizontal or vertical toolbars by setting the value of
the \uicontrol Orientation field. the \uicontrol Orientation field.
@@ -747,10 +747,10 @@
\section1 Summary of User Interaction Methods \section1 Summary of User Interaction Methods
The following table lists the QML types that you can use to add interaction The following table lists the components that you can use to add interaction
methods to UIs. The \e Location column contains the tab name where you can methods to UIs. The \e Location column contains the module where you can
find the type in \uicontrol Library. The \e MCU column indicates which types find the component in \l Library > \uicontrol Components. The \e MCU column
are supported on MCUs. indicates which components are supported on MCUs.
\table \table
\header \header
@@ -762,118 +762,118 @@
\row \row
\li \inlineimage icons/busyindicator-icon16.png \li \inlineimage icons/busyindicator-icon16.png
\li \l [QtQuickControls]{BusyIndicator}{Busy Indicator} \li \l [QtQuickControls]{BusyIndicator}{Busy Indicator}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li Indicates activity while content is being loaded. \li Indicates activity while content is being loaded.
\row \row
\li \inlineimage icons/button-icon16.png \li \inlineimage icons/button-icon16.png
\li \l [QtQuickControls]{Button} \li \l [QtQuickControls]{Button}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \inlineimage ok \li \inlineimage ok
\li A push button that you can associate with an action. \li A push button that you can associate with an action.
\row \row
\li \inlineimage icons/checkbox-icon16.png \li \inlineimage icons/checkbox-icon16.png
\li \l [QtQuickControls]{CheckBox}{Check Box} \li \l [QtQuickControls]{CheckBox}{Check Box}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \inlineimage ok \li \inlineimage ok
\li An option button that can be toggled on (checked) or off \li An option button that can be toggled on (checked) or off
(unchecked). (unchecked).
\row \row
\li \inlineimage icons/checkbox-icon16.png \li \inlineimage icons/checkbox-icon16.png
\li \l [QtQuickControls]{CheckDelegate}{Check Delegate} \li \l [QtQuickControls]{CheckDelegate}{Check Delegate}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li An item delegate that can be toggled on (checked) or off \li An item delegate that can be toggled on (checked) or off
(unchecked). (unchecked).
\row \row
\li \inlineimage icons/combobox-icon16.png \li \inlineimage icons/combobox-icon16.png
\li \l [QtQuickControls]{ComboBox}{Combo Box} \li \l [QtQuickControls]{ComboBox}{Combo Box}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li A combined button and popup list that is populated by using a data \li A combined button and popup list that is populated by using a data
model. model.
\row \row
\li \inlineimage icons/delaybutton-icon16.png \li \inlineimage icons/delaybutton-icon16.png
\li \l [QtQuickControls]{DelayButton}{Delay Button} \li \l [QtQuickControls]{DelayButton}{Delay Button}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li An option button that is triggered when held down long enough. \li An option button that is triggered when held down long enough.
\row \row
\li \inlineimage icons/dial-icon16.png \li \inlineimage icons/dial-icon16.png
\li \l [QtQuickControls]{Dial} \li \l [QtQuickControls]{Dial}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \inlineimage ok \li \inlineimage ok
\li A circular dial that is rotated to set a value. \li A circular dial that is rotated to set a value.
\row \row
\li \inlineimage flickable-icon16.png \li \inlineimage flickable-icon16.png
\li \l [QML]{Flickable} \li \l [QML]{Flickable}
\li Qt Quick - Basic \li Default Components - Basic
\li \inlineimage ok \li \inlineimage ok
\li Items can be flicked horizontally or vertically. \li Items can be flicked horizontally or vertically.
\row \row
\li \inlineimage focusscope-icon16.png \li \inlineimage focusscope-icon16.png
\li \l{FocusScope}{Focus Scope} \li \l{FocusScope}{Focus Scope}
\li Qt Quick - Basic \li Default Components - Basic
\li \li
\li Assists in keyboard focus handling when building reusable QML \li Assists in keyboard focus handling when building reusable QML
components. components.
\row \row
\li \inlineimage mouse-area-icon16.png \li \inlineimage mouse-area-icon16.png
\li \l [QtQuick]{MouseArea}{Mouse Area} \li \l [QtQuick]{MouseArea}{Mouse Area}
\li Qt Quick - Basic \li Default Components - Basic
\li \inlineimage ok \li \inlineimage ok
\li Enables simple mouse handling. \li Enables simple mouse handling.
\row \row
\li \inlineimage icons/pageindicator-icon16.png \li \inlineimage icons/pageindicator-icon16.png
\li \l [QtQuickControls]{PageIndicator}{Page Indicator} \li \l [QtQuickControls]{PageIndicator}{Page Indicator}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li Indicates the indicate the currently active page in a container of \li Indicates the indicate the currently active page in a container of
multiple pages. multiple pages.
\row \row
\li \inlineimage icons/progressbar-icon16.png \li \inlineimage icons/progressbar-icon16.png
\li \l [QtQuickControls]{ProgressBar}{Progress Bar} \li \l [QtQuickControls]{ProgressBar}{Progress Bar}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \inlineimage ok \li \inlineimage ok
\li Indicates the progress of an operation. \li Indicates the progress of an operation.
\row \row
\li \inlineimage icons/radiobutton-icon16.png \li \inlineimage icons/radiobutton-icon16.png
\li \l [QtQuickControls]{RadioButton}{Radio Button} \li \l [QtQuickControls]{RadioButton}{Radio Button}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \inlineimage ok \li \inlineimage ok
\li An option button that can be switched on (checked) or off \li An option button that can be switched on (checked) or off
(unchecked). (unchecked).
\row \row
\li \inlineimage icons/radiobutton-icon16.png \li \inlineimage icons/radiobutton-icon16.png
\li \l [QtQuickControls]{RadioDelegate}{Radio Delegate} \li \l [QtQuickControls]{RadioDelegate}{Radio Delegate}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li An item delegate that can be toggled on (checked) or off \li An item delegate that can be toggled on (checked) or off
(unchecked). (unchecked).
\row \row
\li \inlineimage icons/rangeslider-icon16.png \li \inlineimage icons/rangeslider-icon16.png
\li \l [QtQuickControls]{RangeSlider}{Range Slider} \li \l [QtQuickControls]{RangeSlider}{Range Slider}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li Enables users to select a range of values by sliding two handles \li Enables users to select a range of values by sliding two handles
along a track. along a track.
\row \row
\li \inlineimage icons/roundbutton-icon16.png \li \inlineimage icons/roundbutton-icon16.png
\li \l [QtQuickControls]{RoundButton}{Round Button} \li \l [QtQuickControls]{RoundButton}{Round Button}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li A push button with rounded corners that you can associate with an \li A push button with rounded corners that you can associate with an
action. action.
\row \row
\li \inlineimage icons/slider-icon16.png \li \inlineimage icons/slider-icon16.png
\li \l [QtQuickControls]{Slider} \li \l [QtQuickControls]{Slider}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \inlineimage ok \li \inlineimage ok
\li Enables users to select a value by sliding a handle along a track. \li Enables users to select a value by sliding a handle along a track.
\row \row
\li \inlineimage icons/spinbox-icon16.png \li \inlineimage icons/spinbox-icon16.png
\li \l [QtQuickControls]{SpinBox}{Spin Box} \li \l [QtQuickControls]{SpinBox}{Spin Box}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li Enables users to specify a value by clicking the up or down buttons, \li Enables users to specify a value by clicking the up or down buttons,
by pressing up or down on the keyboard, or by entering a value in by pressing up or down on the keyboard, or by entering a value in
@@ -881,54 +881,54 @@
\row \row
\li \inlineimage icons/switch-icon16.png \li \inlineimage icons/switch-icon16.png
\li \l [QtQuickControls]{Switch} \li \l [QtQuickControls]{Switch}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \inlineimage ok \li \inlineimage ok
\li An option button that can be toggled on or off. \li An option button that can be toggled on or off.
\row \row
\li \inlineimage icons/switch-icon16.png \li \inlineimage icons/switch-icon16.png
\li \l [QtQuickControls]{SwitchDelegate}{Switch Delegate} \li \l [QtQuickControls]{SwitchDelegate}{Switch Delegate}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li An item delegate with a switch indicator that can be toggled on or \li An item delegate with a switch indicator that can be toggled on or
off. off.
\row \row
\li \inlineimage icons/toolbar-icon16.png \li \inlineimage icons/toolbar-icon16.png
\li \l [QtQuickControls] {TabBar}{Tab Bar} \li \l [QtQuickControls] {TabBar}{Tab Bar}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li Enables users to switch between different views or subtasks. \li Enables users to switch between different views or subtasks.
\row \row
\li \inlineimage icons/toolbutton-icon16.png \li \inlineimage icons/toolbutton-icon16.png
\li \l [QtQuickControls]{TabButton}{Tab Button} \li \l [QtQuickControls]{TabButton}{Tab Button}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li A button that is functionally similar to \uicontrol Button, but \li A button that is functionally similar to \uicontrol Button, but
provides a look that is more suitable for a \uicontrol {Tab Bar}. provides a look that is more suitable for a \uicontrol {Tab Bar}.
\row \row
\li \inlineimage icons/toolbar-icon16.png \li \inlineimage icons/toolbar-icon16.png
\li \l [QtQuickControls]{ToolBar}{Tool Bar} \li \l [QtQuickControls]{ToolBar}{Tool Bar}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li A container of application-wide and context sensitive actions and \li A container of application-wide and context sensitive actions and
controls, such as navigation buttons and search fields. controls, such as navigation buttons and search fields.
\row \row
\li \inlineimage icons/toolbutton-icon16.png \li \inlineimage icons/toolbutton-icon16.png
\li \l [QtQuickControls]{ToolButton}{Tool Button} \li \l [QtQuickControls]{ToolButton}{Tool Button}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li A button that is functionally similar to \uicontrol Button, but \li A button that is functionally similar to \uicontrol Button, but
provides a look that is more suitable for a \uicontrol {Tool Bar}. provides a look that is more suitable for a \uicontrol {Tool Bar}.
\row \row
\li \inlineimage icons/toolseparator-icon16.png \li \inlineimage icons/toolseparator-icon16.png
\li \l [QtQuickControls]{ToolSeparator}{Tool Separator} \li \l [QtQuickControls]{ToolSeparator}{Tool Separator}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li Separates a group of items from adjacent items on a \li Separates a group of items from adjacent items on a
\uicontrol {Tool Bar}. \uicontrol {Tool Bar}.
\row \row
\li \inlineimage icons/tumbler-icon16.png \li \inlineimage icons/tumbler-icon16.png
\li \l [QtQuickControls]{Tumbler} \li \l [QtQuickControls]{Tumbler}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li A spinnable wheel of items that can be selected. \li A spinnable wheel of items that can be selected.
\endtable \endtable

44
doc/qtcreator/src/qtquick/library/qtquick-data-models.qdoc
View File

@@ -1,6 +1,6 @@
/**************************************************************************** /****************************************************************************
** **
** Copyright (C) 2020 The Qt Company Ltd. ** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/ ** Contact: https://www.qt.io/licensing/
** **
** This file is part of the Qt Creator documentation. ** This file is part of the Qt Creator documentation.
@@ -35,15 +35,15 @@
\title Lists and Other Data Models \title Lists and Other Data Models
Applications typically need to handle and display data that is organized Applications typically need to handle and display data that is organized
into list or grid views. Qt Quick uses models, views, and delegates for into list or grid views. Models, views, and delegates are used for
this purpose. They modularize the visualization of data in order to give this purpose. They modularize the visualization of data in order to give
you control over the different aspects of the data. For example, you can you control over the different aspects of the data. For example, you can
swap a list view with a grid view with little changes to the data. swap a list view with a grid view with little changes to the data.
Similarly, encapsulating an instance of the data in a delegate allows Similarly, encapsulating an instance of the data in a delegate allows
developers to dictate how to present or handle the data. developers to dictate how to present or handle the data.
A \e model contains the data and its structure. There are several QML A \e model contains the data and its structure. There are several
types for creating different types of models. A \e view is a container components for creating different types of models. A \e view is a container
that displays the data in a list or a grid, or along a path. A \e delegate that displays the data in a list or a grid, or along a path. A \e delegate
dictates how the data should appear in the view. The delegate takes each dictates how the data should appear in the view. The delegate takes each
piece of data in the model and encapsulates it. The data is then accessible piece of data in the model and encapsulates it. The data is then accessible
@@ -56,10 +56,10 @@
\section1 List and Grid Views \section1 List and Grid Views
A list view organizes items as a list, whereas a grid view organizes them as A list view organizes components as a list, whereas a grid view organizes
a grid. By default, items in list and grid views flow vertically from left them as a grid. By default, components in list and grid views flow
to right. They are laid out from left to right horizontally, and from top to vertically from left to right. They are laid out from left to right
bottom vertically. horizontally, and from top to bottom vertically.
You can change the list view orientation in the \uicontrol Orientation You can change the list view orientation in the \uicontrol Orientation
field and the grid view flow in the \uicontrol Flow field. You can change field and the grid view flow in the \uicontrol Flow field. You can change
@@ -111,7 +111,7 @@
\note Setting the \uicontrol Cache property is not a replacement for \note Setting the \uicontrol Cache property is not a replacement for
creating efficient delegates. It can improve the smoothness of scrolling creating efficient delegates. It can improve the smoothness of scrolling
behavior at the expense of additional memory usage. The fewer objects and behavior at the expense of additional memory usage. The fewer items and
bindings in a delegate, the faster a view can be scrolled. It is important bindings in a delegate, the faster a view can be scrolled. It is important
to realize that setting a cache will only postpone issues caused by to realize that setting a cache will only postpone issues caused by
slow-loading delegates, it is not a solution to this problem. slow-loading delegates, it is not a solution to this problem.
@@ -174,7 +174,7 @@
You can replace the default model and delegate with other, You can replace the default model and delegate with other,
more complex models and delegates in \uicontrol {Text Editor}. more complex models and delegates in \uicontrol {Text Editor}.
\l{ItemDelegate}{Item Delegate} and \l{SwipeDelegate}{Swipe Delegate} \l{ItemDelegate}{Item Delegate} and \l{SwipeDelegate}{Swipe Delegate}
types are also available in \uicontrol Library. components are also available in \uicontrol Library.
\include qtquick-pathview-editor.qdocinc pathview \include qtquick-pathview-editor.qdocinc pathview
\if defined(qtdesignstudio) \if defined(qtdesignstudio)
@@ -183,10 +183,10 @@
\section1 Summary of Model Components \section1 Summary of Model Components
The following table lists the QML types that you can use to add data models The following table lists the components that you can use to add data models
to UIs. The \e Location column contains the tab name where you can find the to UIs. The \e Location column contains the tab name where you can find the
type in \uicontrol Library. The \e MCU column indicates which types are component in \l Library > \uicontrol Components. The \e MCU column indicates
supported on MCUs. which components are supported on MCUs.
\table \table
\header \header
@@ -198,39 +198,39 @@
\row \row
\li \inlineimage gridview-icon16.png \li \inlineimage gridview-icon16.png
\li \l{GridView}{Grid View} \li \l{GridView}{Grid View}
\li Qt Quick - Views \li Default Components - Views
\li \li
\li A grid vizualization of a model. \li A grid vizualization of a model.
\row \row
\li \inlineimage icons/itemdelegate-icon16.png \li \inlineimage icons/itemdelegate-icon16.png
\li \l{ItemDelegate}{Item Delegate} \li \l{ItemDelegate}{Item Delegate}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li A standard view item that can be used as a delegate in various \li A standard view item that can be used as a delegate in various
views and controls, such as \l ListView and \l ComboBox. views and controls, such as \l ListView and \l ComboBox.
\row \row
\li \inlineimage listview-icon16.png \li \inlineimage listview-icon16.png
\li \l{ListView}{List View} \li \l{ListView}{List View}
\li Qt Quick - Views \li Default Components - Views
\li \inlineimage ok \li \inlineimage ok
\li A list vizualization of a model. \li A list vizualization of a model.
\row \row
\li \inlineimage pathview-icon16.png \li \inlineimage pathview-icon16.png
\li \l{Path View} \li \l{Path View}
\li Qt Quick - Views \li Default Components - Views
\li \li
\li Vizualizes the contents of a model along a path. \li Vizualizes the contents of a model along a path.
\row \row
\li \inlineimage icons/scrollview-icon16.png \li \inlineimage icons/scrollview-icon16.png
\li \l [QtQuickControls] {ScrollView}{Scroll View} \li \l [QtQuickControls] {ScrollView}{Scroll View}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li Provides scrolling for user-defined content. It can be used instead \li Provides scrolling for user-defined content. It can be used instead
of a \l Flickable item. of a \l Flickable component.
\row \row
\li \inlineimage icons/stackview-icon16.png \li \inlineimage icons/stackview-icon16.png
\li \l [QtQuickControls] {StackView}{Stack View} \li \l [QtQuickControls] {StackView}{Stack View}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li A stack-based navigation model. \li A stack-based navigation model.
\if defined(qtdesignstudio) \if defined(qtdesignstudio)
@@ -244,7 +244,7 @@
\row \row
\li \inlineimage icons/itemdelegate-icon16.png \li \inlineimage icons/itemdelegate-icon16.png
\li \l{SwipeDelegate}{Swipe Delegate} \li \l{SwipeDelegate}{Swipe Delegate}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li A view item that can be swiped left or right to expose more \li A view item that can be swiped left or right to expose more
options or information. It is used as a delegate in views such options or information. It is used as a delegate in views such
@@ -252,7 +252,7 @@
\row \row
\li \inlineimage icons/swipeview-icon16.png \li \inlineimage icons/swipeview-icon16.png
\li \l[QtQuickControls] {SwipeView}{Swipe View} \li \l[QtQuickControls] {SwipeView}{Swipe View}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \inlineimage ok \li \inlineimage ok
\li Enables users to navigate pages by swiping sideways. \li Enables users to navigate pages by swiping sideways.
\endtable \endtable

50
doc/qtcreator/src/qtquick/library/qtquick-images.qdoc
View File

@@ -1,6 +1,6 @@
/**************************************************************************** /****************************************************************************
** **
** Copyright (C) 2020 The Qt Company Ltd. ** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/ ** Contact: https://www.qt.io/licensing/
** **
** This file is part of the Qt Creator documentation. ** This file is part of the Qt Creator documentation.
@@ -31,30 +31,30 @@
\title Images \title Images
\target basic-image \target basic-image
The Image type is used for adding images to the UI in several supported The Image component is used for adding images to the UI in several supported
formats, including bitmap formats, such as PNG and JPEG, and vector graphics formats, including bitmap formats, such as PNG and JPEG, and vector graphics
formats, such as SVG. You must add the images to your project in the formats, such as SVG. You must add the images to your project in the
\uicontrol Assets tab of \uicontrol Library to be able to use them in \uicontrol Assets tab of \uicontrol Library to be able to use them in
designs. designs.
\image qtquick-designer-image-type.png "Image type in different views" \image qtquick-designer-image-type.png "Image component in different views"
When you drag and drop an image file from the \uicontrol Assets tab of When you drag and drop an image file from the \uicontrol Assets tab of
\uicontrol Library to \uicontrol Navigator or \uicontrol {Form Editor}, \uicontrol Library to \uicontrol Navigator or \uicontrol {Form Editor},
\QC automatically creates a component of the Image type for you with \QC automatically creates a component of the Image component for you with
the path to the image file set as the value of the \uicontrol Source the path to the image file set as the value of the \uicontrol Source
field in \uicontrol Properties. field in \uicontrol Properties.
To load images from a URL using a supported URL scheme, specify the URL To load images from a URL using a supported URL scheme, specify the URL
in the \uicontrol Source field. in the \uicontrol Source field.
You can use the \l {Border Image} type to display an image, You can use the \l {Border Image} component to display an image,
such as a PNG file, as a border and a background. For more such as a PNG file, as a border and a background. For more
information about using border images to create buttons, see information about using border images to create buttons, see
\l {Creating Scalable Buttons and Borders}. \l {Creating Scalable Buttons and Borders}.
If you need to display animated images, such as GIFs, use the If you need to display animated images, such as GIFs, use the
\l {Animated Image} type. \l {Animated Image} component.
\section1 Image Size \section1 Image Size
@@ -63,13 +63,13 @@
If the image \uicontrol Size is not specified, the size of the source If the image \uicontrol Size is not specified, the size of the source
image is used automatically. image is used automatically.
By default, explicitly setting the width and height of the item causes By default, explicitly setting the width and height of the component causes
the image to be scaled to that size. To change this behavior, set the the image to be scaled to that size. To change this behavior, set the
value of the \uicontrol {Fill mode} field. Images can be stretched, tiled, value of the \uicontrol {Fill mode} field. Images can be stretched, tiled,
or scaled uniformly to the specified size with or without cropping. The or scaled uniformly to the specified size with or without cropping. The
\uicontrol Pad option means that the image is not transformed. \uicontrol Pad option means that the image is not transformed.
\note If the \uicontrol Clip check box is not selected, the item might \note If the \uicontrol Clip check box is not selected, the component might
paint outside its bounding rectangle even if the \uicontrol {Fill mode} paint outside its bounding rectangle even if the \uicontrol {Fill mode}
is set to \uicontrol PreserveAspectCrop. is set to \uicontrol PreserveAspectCrop.
@@ -146,11 +146,11 @@
\section1 Border Image \section1 Border Image
The Border Image type extends the features of the Image type. It is used The Border Image component extends the features of the Image component.
to create borders out of images by scaling or tiling parts of each image. A It is used to create borders out of images by scaling or tiling parts
source image is broken into 9 regions that are scaled or tiled individually. of each image. A source image is broken into 9 regions that are scaled or
The corner regions are not scaled at all, while the horizontal and vertical tiled individually. The corner regions are not scaled at all, while the
regions are scaled according to the values of the horizontal and vertical regions are scaled according to the values of the
\uicontrol {Horizontal tile mode} and \uicontrol {Vertical tile mode} field, \uicontrol {Horizontal tile mode} and \uicontrol {Vertical tile mode} field,
or both. or both.
@@ -169,13 +169,13 @@
\note You cannot change the \uicontrol {Source size} of a border image. \note You cannot change the \uicontrol {Source size} of a border image.
For examples of using border images, see the documentation of the For examples of using border images, see the documentation of the
\l [QtQuick]{BorderImage} type. \l [QtQuick]{BorderImage} component.
\section1 Animated Image \section1 Animated Image
The Animated Image type extends the features of the Image type, providing The Animated Image component extends the features of the Image component,
a way to play animations stored as images containing a series of frames, providing a way to play animations stored as images containing a series of
such as those stored in GIF files. frames, such as those stored in GIF files.
Set the speed of the animation in the \uicontrol Speed field. The speed is Set the speed of the animation in the \uicontrol Speed field. The speed is
measured in percentage of the original animated image speed. The default measured in percentage of the original animated image speed. The default
@@ -199,10 +199,10 @@
\section1 Summary of Images \section1 Summary of Images
The following table lists the QML types that you can use to add images. The following table lists the components that you can use to add images.
The \e Location column contains the tab name where you can find the type The \e Location column contains the tab name where you can find the
in \uicontrol Library. The \e MCU column indicates which types are supported component in \l Library > \uicontrol Components. The \e MCU column
on MCUs. indicates which components are supported on MCUs.
\table \table
\header \header
@@ -214,20 +214,20 @@
\row \row
\li \inlineimage animated-image-icon16.png \li \inlineimage animated-image-icon16.png
\li \l [QtQuick]{AnimatedImage}{Animated Image} \li \l [QtQuick]{AnimatedImage}{Animated Image}
\li Qt Quick - Basic \li Default Components - Basic
\li \li
\li An images that stores animations containing a series of frames, \li An images that stores animations containing a series of frames,
such as those stored in GIF files. such as those stored in GIF files.
\row \row
\li \inlineimage border-image-icon16.png \li \inlineimage border-image-icon16.png
\li \l [QtQuick]{BorderImage}{Border Image} \li \l [QtQuick]{BorderImage}{Border Image}
\li Qt Quick - Basic \li Default Components - Basic
\li \inlineimage ok \li \inlineimage ok
\li An image that is used as a border or background. \li An image that is used as a border or background.
\row \row
\li \inlineimage image-icon16.png \li \inlineimage image-icon16.png
\li \l [QtQuick]{Image} \li \l [QtQuick]{Image}
\li Qt Quick - Basic \li Default Components - Basic
\li \inlineimage ok \li \inlineimage ok
\li An image in one of the supported formats, including bitmap formats \li An image in one of the supported formats, including bitmap formats
such as PNG and JPEG and vector graphics formats such as SVG. such as PNG and JPEG and vector graphics formats such as SVG.
@@ -238,7 +238,7 @@
\li Studio Components \li Studio Components
\li \li
\li An icon from an ISO 7000 icon library specified as a \l Picture \li An icon from an ISO 7000 icon library specified as a \l Picture
type. You can select the icon to use and its color. component. You can select the icon to use and its color.
\endif \endif
\endtable \endtable
*/ */

12
doc/qtcreator/src/qtquick/library/qtquick-pathview-editor.qdocinc
View File

@@ -1,6 +1,6 @@
/**************************************************************************** /****************************************************************************
** **
** Copyright (C) 2020 The Qt Company Ltd. ** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/ ** Contact: https://www.qt.io/licensing/
** **
** This file is part of the Qt Creator documentation. ** This file is part of the Qt Creator documentation.
@@ -28,7 +28,7 @@
\section1 Path View \section1 Path View
The Path View type lays out data provided by data models on a \l{Path}. The Path View component lays out data provided by data models on a \l{Path}.
A graphical spline editor enables you to specify path view paths, which A graphical spline editor enables you to specify path view paths, which
is a non-trivial task to do in the code editor. is a non-trivial task to do in the code editor.
@@ -36,7 +36,7 @@
\image qmldesigner-pathview-editor.png "Path View editor" \image qmldesigner-pathview-editor.png "Path View editor"
To start editing the path, double-click the path view in To start editing the path, double-click the path view in
\uicontrol {Form Editor}. The editor composes the path of PathCubic path \l {Form Editor}. The editor composes the path of PathCubic path
objects. They are cubic Bezier curves to a given position with two control objects. They are cubic Bezier curves to a given position with two control
points. Drag and drop the control points in \uicontrol {Form Editor} to points. Drag and drop the control points in \uicontrol {Form Editor} to
construct the curve. construct the curve.
@@ -78,7 +78,7 @@
\section1 SvgPath \section1 SvgPath
The Svg Path type uses an SVG path data string to draw a path as a line. The Svg Path component uses an SVG path data string to draw a path as a line.
The stroke property values that specify the appearance of the path are The stroke property values that specify the appearance of the path are
described in \l{Strokes}. described in \l{Strokes}.
@@ -89,10 +89,10 @@
string that specifies the path. For more information, see string that specifies the path. For more information, see
\l{https://www.w3.org/TR/SVG/paths.html#PathData}{W3C SVG Path Data}. \l{https://www.w3.org/TR/SVG/paths.html#PathData}{W3C SVG Path Data}.
\note Mixing SvgPath with other types of elements is not always supported. \note Mixing SvgPath with other types of components is not always supported.
For example, when \l Shape is backed by \c GL_NV_path_rendering, a For example, when \l Shape is backed by \c GL_NV_path_rendering, a
\l ShapePath can contain one or more SvgPath elements, or one or more \l ShapePath can contain one or more SvgPath elements, or one or more
elements of other types, but not both. components of other types, but not both.
//! [svgpath] //! [svgpath]
*/ */

38
doc/qtcreator/src/qtquick/library/qtquick-shapes.qdoc
View File

@@ -45,18 +45,18 @@
\image studio-shapes.png "Shapes in Form Editor" \image studio-shapes.png "Shapes in Form Editor"
\else \else
You can use the Rectangle type to draw basic shapes in You can use the Rectangle component to draw basic shapes in
\uicontrol {Form Editor}. \l {Form Editor}.
\image qml-shapes.png "Shapes in Form Editor" \image qml-shapes.png "Shapes in Form Editor"
\endif \endif
Most visual types in \uicontrol Library are based on the \l [QtQuick] Most visual components in \uicontrol Library are based on the \l [QtQuick]
{Item} type. Even though it has no visual appearance itself (similarly {Item} component. Even though it has no visual appearance itself (similarly
to a mouse area, for example), it defines all the properties that are to a mouse area, for example), it defines all the properties that are
common across visual types, such as position, size, and visibility. For common across visual components, such as position, size, and visibility. For
more information, see \l{Specifying Basic Component Properties}. more information, see \l{Specifying Basic Component Properties}.
In addition, each type has a set of properties that specify its visual In addition, each component has a set of properties that specify its visual
appearance and behavior. You can modify the property values to set fill appearance and behavior. You can modify the property values to set fill
and border colors, stroke width, and other characteristics of the shapes. and border colors, stroke width, and other characteristics of the shapes.
@@ -67,7 +67,7 @@
\target basic-rectangle \target basic-rectangle
\section1 Rectangle \section1 Rectangle
The basic \l [QtQuick] {Rectangle} QML type is used for drawing shapes The basic \l [QtQuick] {Rectangle} component is used for drawing shapes
with four sides and corners, as well as a solid border. with four sides and corners, as well as a solid border.
\if defined(qtdesignstudio) \if defined(qtdesignstudio)
@@ -101,9 +101,9 @@
\section2 Studio Rectangle \section2 Studio Rectangle
If you want to modify each corner of the rectangle independently If you want to modify each corner of the rectangle independently
or use a dashed border, select the Rectangle type in the or use a dashed border, select the Rectangle component in the
\uicontrol {Studio Components} tab of \uicontrol Library instead \uicontrol {Studio Components} tab of \uicontrol Library instead
of the basic rectangle type. of the basic rectangle component.
By setting the values of properties in the \uicontrol {Corner Radiuses} By setting the values of properties in the \uicontrol {Corner Radiuses}
group, you can draw each corner independently. By using radius values group, you can draw each corner independently. By using radius values
@@ -121,7 +121,7 @@
\section1 Border \section1 Border
The Border type is used to create borders out of four segments: The Border component is used to create borders out of four segments:
left, top, right, and bottom. By selecting the \uicontrol {Draw top}, left, top, right, and bottom. By selecting the \uicontrol {Draw top},
\uicontrol {Draw right}, \uicontrol {Draw bottom}, and \uicontrol {Draw right}, \uicontrol {Draw bottom}, and
\uicontrol {Draw left} check boxes, you can determine whether each \uicontrol {Draw left} check boxes, you can determine whether each
@@ -141,7 +141,7 @@
line. line.
In the \uicontrol {Border mode} field, you can specify whether the border In the \uicontrol {Border mode} field, you can specify whether the border
is drawn along the inside or outside edge of the item, or on top of the is drawn along the inside or outside edge of the component, or on top of the
edge. edge.
If you select a dashed or dotted pattern in the \uicontrol {Stroke style} If you select a dashed or dotted pattern in the \uicontrol {Stroke style}
@@ -170,8 +170,8 @@
\section1 Triangle \section1 Triangle
The Triangle type can be used to draw triangles with different dimensions The Triangle component can be used to draw triangles with different dimensions
and shapes. The type is enclosed in an invisible rectangle that determines and shapes. The component is enclosed in an invisible rectangle that determines
its size. The dimensions of the triangle can be changed to make it elongated its size. The dimensions of the triangle can be changed to make it elongated
or squatter with space around it by setting the left, right, top, and bottom or squatter with space around it by setting the left, right, top, and bottom
margins in the \uicontrol Margins group. The margins are set between the margins in the \uicontrol Margins group. The margins are set between the
@@ -210,7 +210,7 @@
\section1 Pie \section1 Pie
The Pie type is used to create a pie slice, a pie that is missing slices, The Pie component is used to create a pie slice, a pie that is missing slices,
or just the pie rind (similar to an arc), depending on the values of the or just the pie rind (similar to an arc), depending on the values of the
\uicontrol Begin, \uicontrol End, and \uicontrol {Hide line} properties. \uicontrol Begin, \uicontrol End, and \uicontrol {Hide line} properties.
@@ -222,10 +222,10 @@
\section1 Summary of Shapes \section1 Summary of Shapes
The following table lists the QML types that you can use to draw shapes. The following table lists the components that you can use to draw shapes.
The \e Location column contains the tab name where you can find the type The \e Location column contains the tab name where you can find the
in \uicontrol Library. The \e MCU column indicates which types are supported component in \l Library > \uicontrol Components. The \e MCU column
on MCUs. indicates which components are supported on MCUs.
\table \table
\header \header
@@ -255,7 +255,7 @@
\row \row
\li \inlineimage rect-icon16.png \li \inlineimage rect-icon16.png
\li \l Rectangle \li \l Rectangle
\li Qt Quick - Basic \li Default Components - Basic
\li \inlineimage ok \li \inlineimage ok
\li A rectangle that is painted with a solid fill color or linear \li A rectangle that is painted with a solid fill color or linear
gradient and an optional border. You can use the radius property gradient and an optional border. You can use the radius property

68
doc/qtcreator/src/qtquick/library/qtquick-text.qdoc
View File

@@ -30,11 +30,11 @@
\title Text \title Text
You can use several different text types to add read-only or editable text You can use several different text components to add read-only or editable
to a UI, such as titles or labels and text input fields with placeholder text to a UI, such as titles or labels and text input fields with
text. The \l Text type adds formatted text, the \l TextEdit type adds a placeholder text. The \l Text component adds formatted text, the \l TextEdit
multiline line edit, and the \l TextInput type adds a single editable line component adds a multiline line edit, and the \l TextInput component adds a
field. single editable line field.
You can select the font to use and specify extensive properties for each You can select the font to use and specify extensive properties for each
text string, such as size in points or pixels, style name, emphasis, text string, such as size in points or pixels, style name, emphasis,
@@ -44,7 +44,7 @@
\youtube yOUdg1o2KJM \youtube yOUdg1o2KJM
To create a label with a background, use the \l Label type from the To create a label with a background, use the \l Label component from the
Qt Quick Controls module. Qt Quick Controls module.
\section1 Using Rich Text \section1 Using Rich Text
@@ -78,7 +78,7 @@
size, emphasis, aligment, and spacing of the text. Specify the font size, emphasis, aligment, and spacing of the text. Specify the font
size in either points or pixels in the \uicontrol Size field. size in either points or pixels in the \uicontrol Size field.
\image qtquick-designer-text-properties.png "Text type properties" \image qtquick-designer-text-properties.png "Text component properties"
To display custom fonts in the list of available fonts in the To display custom fonts in the list of available fonts in the
\uicontrol Font field, add them in the \uicontrol Assets tab \uicontrol Font field, add them in the \uicontrol Assets tab
@@ -104,8 +104,8 @@
\section1 Text Alignment \section1 Text Alignment
You can align text items horizontally and vertically. By default, text is You can align text components horizontally and vertically. By default, text
vertically aligned to the top. Horizontal alignment follows the natural is vertically aligned to the top. Horizontal alignment follows the natural
alignment of the text. By default, left-to-right text like English is alignment of the text. By default, left-to-right text like English is
aligned to the left side of the text area, whereas right-to-left text aligned to the left side of the text area, whereas right-to-left text
like Arabic is aligned to the right side of the text area. like Arabic is aligned to the right side of the text area.
@@ -116,7 +116,7 @@
For a single line of text, the size of the text is the area of the text. For a single line of text, the size of the text is the area of the text.
In this common case, all alignments are equivalent. To center a text in In this common case, all alignments are equivalent. To center a text in
its parent, use \l{Setting Anchors and Margins}{anchoring} or bind the its parent, use \l{Setting Anchors and Margins}{anchoring} or bind the
width of the text item to that of the parent. For more information, see width of the text component to that of the parent. For more information, see
\l{Setting Bindings}. \l{Setting Bindings}.
\section1 Text and Style Colors \section1 Text and Style Colors
@@ -129,17 +129,17 @@
or sunken text. You set the font style in the \uicontrol Style field of or sunken text. You set the font style in the \uicontrol Style field of
the \uicontrol Font section. the \uicontrol Font section.
For the \uicontrol {Text Edit} and \uicontrol {Text Input} types, you For the \uicontrol {Text Edit} and \uicontrol {Text Input} components, you
can also set the color of selected text and the text highlight color can also set the color of selected text and the text highlight color
that is used behind selections in the \uicontrol {Selected text color} that is used behind selections in the \uicontrol {Selected text color}
and \uicontrol {Selection color} fields. and \uicontrol {Selection color} fields.
For more information about selecting colors, see \l{Picking Colors}. You For more information about selecting colors, see \l{Picking Colors}. You
can only set solid colors for text items. can only set solid colors for text components.
\section1 Advanced Text Properties \section1 Advanced Text Properties
The height and width of a text item are determined automatically depending The height and width of a text component are determined automatically depending
on the values of the properties you set, to accommodate the length of the on the values of the properties you set, to accommodate the length of the
string that you specify in the \uicontrol Text field and the font size, for string that you specify in the \uicontrol Text field and the font size, for
example. example.
@@ -148,15 +148,15 @@
size of the displayed text is determined. Select \uicontrol FixedSize to size of the displayed text is determined. Select \uicontrol FixedSize to
use the size specified in the \uicontrol Size field in pixels or points. use the size specified in the \uicontrol Size field in pixels or points.
Select \uicontrol HorizontalFit or \uicontrol VerticalFit to use the largest Select \uicontrol HorizontalFit or \uicontrol VerticalFit to use the largest
size up to the size specified that fits the width or height of the item. size up to the size specified that fits the width or height of the component.
Select \uicontrol Fit to use the largest size up to the size specified that Select \uicontrol Fit to use the largest size up to the size specified that
fits within the width and height of the item. The font size of fitted text fits within the width and height of the component. The font size of fitted text
has a minimum bound specified by the \uicontrol {Minimum size} field and has a minimum bound specified by the \uicontrol {Minimum size} field and
maximum bound specified by the \uicontrol Size field. maximum bound specified by the \uicontrol Size field.
In the \uicontrol {Wrap mode} field, you can wrap the text to the text In the \uicontrol {Wrap mode} field, you can wrap the text to the text
item's width. The text will only wrap if you set an explicit width for component's width. The text will only wrap if you set an explicit width for
the text item. By default, text is not wrapped. Select \uicontrol WordWrap the text component. By default, text is not wrapped. Select \uicontrol WordWrap
to restrict wrapping to word boundaries only. Select \uicontrol WrapAnywhere to restrict wrapping to word boundaries only. Select \uicontrol WrapAnywhere
to enable wrapping at any point on a line, even if it occurs in the middle to enable wrapping at any point on a line, even if it occurs in the middle
of a word. Select \uicontrol Wrap to wrap at a word boundary, if possible, of a word. Select \uicontrol Wrap to wrap at a word boundary, if possible,
@@ -165,7 +165,7 @@
You can use the \uicontrol Elide property with the \uicontrol Wrap You can use the \uicontrol Elide property with the \uicontrol Wrap
option to fit a single line of plain text to a set width. Select option to fit a single line of plain text to a set width. Select
\uicontrol ElideRight, and set the \uicontrol {Maximum line count} \uicontrol ElideRight, and set the \uicontrol {Maximum line count}
or the text item height (in the \uicontrol H field). If you set both, or the text component height (in the \uicontrol H field). If you set both,
the maximum line count will apply unless the lines do not fit in the the maximum line count will apply unless the lines do not fit in the
height allowed. height allowed.
@@ -197,7 +197,7 @@
better performance than rich text. better performance than rich text.
In the \uicontrol {Render type} field, you can override the default In the \uicontrol {Render type} field, you can override the default
rendering type for a text item. Select \uicontrol NativeRendering if rendering type for a text component. Select \uicontrol NativeRendering if
you prefer text to look native on the target platform and do not you prefer text to look native on the target platform and do not
require advanced features such as \l {Managing 2D Transformations} require advanced features such as \l {Managing 2D Transformations}
{transformation} of the text. Using rotation or scaling in combination {transformation} of the text. Using rotation or scaling in combination
@@ -206,12 +206,12 @@
\target text-edit \target text-edit
\section1 Text Input \section1 Text Input
You can use the \uicontrol {Text Edit} and \uicontrol {Text Input} types to You can use the \uicontrol {Text Edit} and \uicontrol {Text Input}
add text fields where users can enter text. components to add text fields where users can enter text.
The Text Input type displays a single line of editable plain text, whereas The Text Input component displays a single line of editable plain text,
the Text Edit type displays a block of editable, formatted text. Both types whereas the Text Edit component displays a block of editable, formatted
are used to accept text input. text. Both components are used to accept text input.
\image qtquick-designer-text-input-properties.png "Text input field properties" \image qtquick-designer-text-input-properties.png "Text input field properties"
@@ -258,7 +258,7 @@
be overwritten. be overwritten.
If the \uicontrol {Persistent selection} check box is selected, a text edit If the \uicontrol {Persistent selection} check box is selected, a text edit
or input keeps its selection when active focus moves to another item. or input keeps its selection when active focus moves to another component.
To use a pointer device for selecting text, select the To use a pointer device for selecting text, select the
\uicontrol {Select by mouse} check box. \uicontrol {Select by mouse} check box.
@@ -276,10 +276,10 @@
\section1 Summary of Text Components \section1 Summary of Text Components
The following table lists the QML types that you can use to add text to The following table lists the components that you can use to add text to
UIs. The \e Location column contains the tab name where you can find the UIs. The \e Location column contains the tab name where you can find the
type in \uicontrol Library. The \e MCU column indicates which types are component in \l Library > \uicontrol Components. The \e MCU column
supported on MCUs. indicates which components are supported on MCUs.
\table \table
\header \header
@@ -291,37 +291,37 @@
\row \row
\li \inlineimage icons/label-icon16.png \li \inlineimage icons/label-icon16.png
\li \l [QtQuickControls]{Label} \li \l [QtQuickControls]{Label}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li A text label with inherited styling and font. \li A text label with inherited styling and font.
\row \row
\li \inlineimage text-icon16.png \li \inlineimage text-icon16.png
\li \l [QtQuick]{Text} \li \l [QtQuick]{Text}
\li Qt Quick - Basic \li Default Components - Basic
\li \inlineimage ok \li \inlineimage ok
\li Formatted read-only text. \li Formatted read-only text.
\row \row
\li \inlineimage icons/textarea-icon16.png \li \inlineimage icons/textarea-icon16.png
\li \l [QtQuickControls]{TextArea}{Text Area} \li \l [QtQuickControls]{TextArea}{Text Area}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li Multiple lines of editable formatted text. \li Multiple lines of editable formatted text.
\row \row
\li \inlineimage text-edit-icon16.png \li \inlineimage text-edit-icon16.png
\li \l [QtQuick]{TextEdit}{Text Edit} \li \l [QtQuick]{TextEdit}{Text Edit}
\li Qt Quick - Basic \li Default Components - Basic
\li \li
\li A single line of editable formatted text that can be validated. \li A single line of editable formatted text that can be validated.
\row \row
\li \inlineimage icons/textfield-icon16.png \li \inlineimage icons/textfield-icon16.png
\li \l [QtQuickControls]{TextField}{Text Field} \li \l [QtQuickControls]{TextField}{Text Field}
\li Qt Quick - Controls 2 \li Qt Quick Controls
\li \li
\li A single line of editable plain text. \li A single line of editable plain text.
\row \row
\li \inlineimage text-input-icon16.png \li \inlineimage text-input-icon16.png
\li \l [QtQuick]{TextInput}{Text Input} \li \l [QtQuick]{TextInput}{Text Input}
\li Qt Quick - Basic \li Default Components - Basic
\li \li
\li A single line of editable plain text that can be validated. \li A single line of editable plain text that can be validated.
\endtable \endtable

13
doc/qtcreator/src/qtquick/qtquick-adding-dynamics.qdoc
View File

@@ -1,6 +1,6 @@
/**************************************************************************** /****************************************************************************
** **
** Copyright (C) 2020 The Qt Company Ltd. ** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/ ** Contact: https://www.qt.io/licensing/
** **
** This file is part of the Qt Design Studio documentation. ** This file is part of the Qt Design Studio documentation.
@@ -55,11 +55,10 @@
changed in all the child components, for example. changed in all the child components, for example.
\li \l {Adding States} \li \l {Adding States}
Qt Quick allows you to declare various UI states that describe You can declare various UI states that describe how component
how component properties change from a base state. Therefore, properties change from a base state. Therefore, states can be
states can be a useful way of organizing your UI a useful way of organizing your UI logic. You can associate
logic. You can associate transitions with items to define transitions with components to define how their properties will
how their properties will animate when they change due to a state animate when they change due to a state change.
change.
\endlist \endlist
*/ */

10
doc/qtcreator/src/qtquick/qtquick-animation-types.qdoc
View File

@@ -38,9 +38,9 @@
the property that is to be animated, and apply the animation depending on the property that is to be animated, and apply the animation depending on
the type of behavior that is required. the type of behavior that is required.
You can drag and drop the following QML types from \uicontrol Library You can drag and drop the following components from \l Library >
> \uicontrol {QML Types} > \uicontrol {Qt Quick - Animation} to \uicontrol Components > \uicontrol {Default Components} >
\uicontrol Navigator or \uicontrol {Form Editor}: \uicontrol Animation to \l Navigator or \l {Form Editor}:
\list \list
\li \l [QML] {ColorAnimation}{Color Animation} is a specialized \li \l [QML] {ColorAnimation}{Color Animation} is a specialized
@@ -65,10 +65,10 @@
animations to be run sequentially. animations to be run sequentially.
\endlist \endlist
For more information about using the QML types, see For more information about using the components, see
\l{Animation and Transitions in Qt Quick}. \l{Animation and Transitions in Qt Quick}.
For more information about animating properties in the \uicontrol Timeline For more information about animating properties in the \l Timeline
view, see \l{Creating Animations}. For more information about animating view, see \l{Creating Animations}. For more information about animating
property changes in states, see \l{Animating Transitions Between States}. property changes in states, see \l{Animating Transitions Between States}.

110
doc/qtcreator/src/qtquick/qtquick-buttons.qdoc
View File

@@ -1,6 +1,6 @@
/**************************************************************************** /****************************************************************************
** **
** Copyright (C) 2020 The Qt Company Ltd. ** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/ ** Contact: https://www.qt.io/licensing/
** **
** This file is part of the Qt Creator documentation. ** This file is part of the Qt Creator documentation.
@@ -36,7 +36,7 @@
\title Creating Buttons \title Creating Buttons
To create a button type: To create a button component:
\list 1 \list 1
@@ -49,20 +49,20 @@
\uicontrol Choose to create a QML file called Button.qml (for \uicontrol Choose to create a QML file called Button.qml (for
example). example).
\note Types are listed in the \uicontrol Library only if the \note Components are listed in \l Library > \uicontrol Components >
filename begins with a capital letter. \uicontrol {My Components} only if the filename begins with a
capital letter.
\li Click \uicontrol {Design} to edit the file in the \li Click \uicontrol {Design} to edit the file in \l {Form Editor}.
\uicontrol {Form Editor}.
\li In the \uicontrol Navigator, select \uicontrol Item and set the \li In \l Navigator, select \uicontrol Item and set the width
width (\uicontrol W) and height (\uicontrol H) of the button in the (\uicontrol W) and height (\uicontrol H) of the button in
\uicontrol Properties view. \l Properties.
\li Drag and drop a \uicontrol Rectangle from the \uicontrol Library to \li Drag and drop a \uicontrol Rectangle from \uicontrol Library to
the item in \uicontrol Navigator. This creates a nested item where the component in \uicontrol Navigator. This creates a nested
the item is the parent of the rectangle. Items are positioned component where the Item is the parent of the Rectangle. Components
relative to their parents. are positioned relative to their parents.
\li In the \uicontrol Properties view, modify the appearance of the \li In the \uicontrol Properties view, modify the appearance of the
rectangle: rectangle:
@@ -76,17 +76,17 @@
\li Select \uicontrol {Layout}, and then select the \li Select \uicontrol {Layout}, and then select the
\inlineimage icons/anchor-fill.png \inlineimage icons/anchor-fill.png
(\uicontrol {Fill to Parent}) button to anchor the rectangle to (\uicontrol {Fill to Parent}) button to anchor the Rectangle to
the item. the Item.
\endlist \endlist
\li Drag and drop a \uicontrol {Text} type to the item in \li Drag and drop a \uicontrol {Text} component to the Item in
\uicontrol Navigator. \uicontrol Navigator.
\li In the \uicontrol Properties view, edit the properties of the \uicontrol Text \li In the \uicontrol Properties view, edit the properties of the
type. \uicontrol Text component
\list a \list a
@@ -110,16 +110,16 @@
\endlist \endlist
To be useful, the button type has to be created in a project. To be useful, the button component has to be created in a project.
When you work on other QML files in the project to create screens When you work on other files in the project to create screens
or other components for the UI, the button type appears in the or other components for the UI, the button component appears in
\uicontrol {My QML Components} tab of the \uicontrol Library view. \uicontrol Library > \uicontrol Components > \uicontrol {My Components}.
You can use it to create button instances and modify their properties You can use it to create button instances and modify their properties
to assign them useful IDs, change their appearance, and set the button to assign them useful IDs, change their appearance, and set the button
text for each button instance, for example. text for each button instance, for example.
To create a graphical button that scales beautifully without using To create a graphical button that scales beautifully without using
vector graphics, use the \l {Border Image} type. For more vector graphics, use the \l {Border Image} component. For more
information, see \l{Creating Scalable Buttons and Borders}. information, see \l{Creating Scalable Buttons and Borders}.
*/ */
@@ -131,7 +131,7 @@
\title Creating Scalable Buttons and Borders \title Creating Scalable Buttons and Borders
You can use the \l {Border Image} type to display an image, such as a You can use the \l {Border Image} component to display an image, such as a
PNG file, as a border and a background. PNG file, as a border and a background.
Use two border images and suitable graphics to change the appearance of Use two border images and suitable graphics to change the appearance of
@@ -141,49 +141,49 @@
change the appearance of the button depending on other mouse events, change the appearance of the button depending on other mouse events,
such as hovered. such as hovered.
Use a \l Text type to add button text. Use a \l Text component to add button text.
You can use states also to change the button text color and font size. For You can use states also to change the button text color and font size. For
example, you can scale the button text up or down. example, you can scale the button text up or down.
Add a \l {Mouse Area} type that covers the whole area and Add a \l {Mouse Area} component that covers the whole area and
reacts to mouse events. reacts to mouse events.
\image qmldesigner-borderimage-type.png "Button type in Form Editor and States" \image qmldesigner-borderimage-type.png "Button component in Form Editor and States"
\section1 Creating the Button Type \section1 Creating the Button Component
To create a button type, select \uicontrol File > To create a button component, select \uicontrol File >
\uicontrol {New File or Project} > \uicontrol {New File or Project} >
\if defined(qtcreator) \if defined(qtcreator)
\uicontrol Qt > \uicontrol {QML File (Qt Quick 2)} > \uicontrol Qt > \uicontrol {QML File (Qt Quick 2)} >
\else \else
\uicontrol {Qt Quick Files} > \uicontrol {Qt Quick File} > \uicontrol {Qt Quick Files} > \uicontrol {Qt Quick File} >
\endif \endif
\uicontrol Choose to create a QML file called Button.qml (for example). \uicontrol Choose to create a file called Button.qml (for example).
\note Types are listed in the \uicontrol Library only if the \note Components are listed in \l Library > \uicontrol Components >
filename begins with a capital letter. \uicontrol {My Components} only if the filename begins with a
capital letter.
\section1 Constructing the Button Component \section1 Constructing the Button Component
To construct the button component: To construct the button component:
\list 1 \list 1
\li Click \uicontrol {Design} to edit the QML file in the \li Click \uicontrol {Design} to edit the component file in
\uicontrol {Form Editor}. \l {Form Editor}.
\li In the \uicontrol {Assets} tab of \uicontrol Library, select \li In the \uicontrol {Assets} tab of \l Library, select
\uicontrol {Add New Assets} to copy the image files you want \inlineimage plus.png
to use to the project folder. to copy the image files you want to use to the project folder.
\li In the \uicontrol Navigator, select the root item and set the \li In \l Navigator, select the root component and set the
width (\uicontrol W) and height (\uicontrol H) of the button in the width (\uicontrol W) and height (\uicontrol H) of the button in the
\uicontrol Properties view to match the size of the images \l Properties view to match the size of the images
you plan to use. This specifies the initial size of the button you plan to use. This specifies the initial size of the button
component. component.
\li Drag and drop two \uicontrol {Border Image} types from \li Drag and drop two \uicontrol {Border Image} components from
\uicontrol Library to the root item in \uicontrol Navigator. \uicontrol Library to the root component in \uicontrol Navigator.
\li Drag and drop a \uicontrol Text type to the root item. \li Drag and drop a \uicontrol Text component to the root component.
\li Drag and drop a \uicontrol {Mouse Area} to the root item in \li Drag and drop a \uicontrol {Mouse Area} to the root component.
\uicontrol Navigator.
\li Select a border image to edit the values of its properties: \li Select a border image to edit the values of its properties:
\list a \list a
\li In the \uicontrol Id field, enter an ID for the border \li In the \uicontrol Id field, enter an ID for the border
@@ -208,11 +208,11 @@
\inlineimage icons/anchor-fill.png \inlineimage icons/anchor-fill.png
(\uicontrol {Fill to Parent}) button. (\uicontrol {Fill to Parent}) button.
\endlist \endlist
\li Select the text item to specify font size and color in \li Select the text component to specify font size and color in
\uicontrol Properties: \uicontrol Properties:
\list a \list a
\li In the \uicontrol Color field, use \li In the \uicontrol Color field, use the \l{Picking Colors}
the color picker to select the font color, or enter a value {color picker} to select the font color, or enter a value
in the field. in the field.
\li In \uicontrol Font group, \uicontrol Size field, enter the \li In \uicontrol Font group, \uicontrol Size field, enter the
font size. font size.
@@ -230,7 +230,7 @@
\section1 Using States to Change Component Property Values \section1 Using States to Change Component Property Values
\list 1 \list 1
\li In the \uicontrol States view, select \uicontrol {Create New State} \li In the \l States view, select \uicontrol {Create New State}
twice to create two new states. twice to create two new states.
\image qmldesigner-borderimage-states.png "Active and inactive states" \image qmldesigner-borderimage-states.png "Active and inactive states"
\li Select \uicontrol State1. \li Select \uicontrol State1.
@@ -239,10 +239,10 @@
, and then select \uicontrol {Set when Condition} to determine , and then select \uicontrol {Set when Condition} to determine
when the state should be applied. when the state should be applied.
\li In the \uicontrol {Binding Editor}, select the \c mouseArea \li In the \uicontrol {Binding Editor}, select the \c mouseArea
type and the \c pressed signal to specify that the state is component and the \c pressed signal to specify that the state is
applied when the mouse button is pressed down. applied when the mouse button is pressed down.
\image qmldesigner-borderimage-bindings.png "Active state when condition" \image qmldesigner-borderimage-bindings.png "Active state when condition"
\li Select the text item in \uicontrol Navigator to specify that the \li Select the text component in \uicontrol Navigator to specify that the
text size is scaled up when the button is pressed down. text size is scaled up when the button is pressed down.
\li In \uicontrol Properties, select the \uicontrol Advanced tab, and \li In \uicontrol Properties, select the \uicontrol Advanced tab, and
increase the value of the \uicontrol Scale property. increase the value of the \uicontrol Scale property.
@@ -255,8 +255,6 @@
specify that the state is applied when the mouse button is not specify that the state is applied when the mouse button is not
pressed down. pressed down.
\image qmldesigner-borderimage-bindings1.png "Inactive state when condition" \image qmldesigner-borderimage-bindings1.png "Inactive state when condition"
it in the \e inactive state by changing the value of its
\uicontrol Visibility property in \uicontrol Properties.
\li Press \key {Ctrl+S} to save the button. \li Press \key {Ctrl+S} to save the button.
\li Select the \inlineimage live_preview.png \li Select the \inlineimage live_preview.png
(\uicontrol {Show Live Preview}) button to check how the (\uicontrol {Show Live Preview}) button to check how the
@@ -265,10 +263,10 @@
component. component.
\endlist \endlist
To be useful, the button type has to be created in a project. To be useful, the button component has to be created in a project.
When you work on other QML files in the project to create screens When you work on other files in the project to create screens
or other components for the UI, the button type appears in the or other components for the UI, the button component appears in
\uicontrol {My QML Components} tab of the \uicontrol Library view. \l Library > \uicontrol Components > \uicontrol {My Components}.
You can drag and drop it to \uicontrol {Form Editor} or You can drag and drop it to \uicontrol {Form Editor} or
\uicontrol Navigator to create button instances and modify the values \uicontrol Navigator to create button instances and modify the values
of their properties to assign them useful IDs, change their appearance, of their properties to assign them useful IDs, change their appearance,

14
doc/qtcreator/src/qtquick/qtquick-form-editor.qdoc
View File

@@ -180,15 +180,15 @@
Choose \uicontrol Tools > \uicontrol Options > \uicontrol {Qt Quick} > Choose \uicontrol Tools > \uicontrol Options > \uicontrol {Qt Quick} >
\uicontrol {Qt Quick Designer} to specify settings for snapping. In the \uicontrol {Qt Quick Designer} to specify settings for snapping. In the
\uicontrol {Parent item padding} field, specify the \uicontrol {Parent component padding} field, specify the
distance in pixels between the parent component and the snapping lines. In distance in pixels between the parent component and the snapping lines. In
the \uicontrol {Sibling item spacing} field, specify the distance in pixels the \uicontrol {Sibling component spacing} field, specify the distance in
between sibling components and the snapping lines. pixels between sibling components and the snapping lines.
\image qtquick-designer-options.png "Qt Quick Designer options" \image qtquick-designer-options.png "Qt Quick Designer options"
The following image shows the snapping lines (1) when The following image shows the snapping lines (1) when
\uicontrol {Parent item padding} is set to 5 pixels. \uicontrol {Parent component padding} is set to 5 pixels.
\image qmldesigner-snap-margins.png "Snapping lines on canvas" \image qmldesigner-snap-margins.png "Snapping lines on canvas"
@@ -220,9 +220,9 @@
\image qmldesigner-preview-size.png "Component width and height" \image qmldesigner-preview-size.png "Component width and height"
To set the initial size of the root component, select \uicontrol Tools > To set the initial size of the root component, select \uicontrol Tools >
\uicontrol Options > \uicontrol {Qt Quick} > \uicontrol {Qt Quick Designer} and \uicontrol Options > \uicontrol {Qt Quick} > \uicontrol {Qt Quick Designer}
specify the component width and height in the \uicontrol {Root Item Init Size} and specify the component width and height in the
group. \uicontrol {Root Component Init Size} group.
\section1 Specifying Canvas Size \section1 Specifying Canvas Size

23
doc/qtcreator/src/qtquick/qtquick-modules-with-plugins.qdoc
View File

@@ -1,6 +1,6 @@
/**************************************************************************** /****************************************************************************
** **
** Copyright (C) 2020 The Qt Company Ltd. ** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/ ** Contact: https://www.qt.io/licensing/
** **
** This file is part of the Qt Creator documentation. ** This file is part of the Qt Creator documentation.
@@ -46,12 +46,11 @@
the contained components, and therefore, the modules must provide extra type the contained components, and therefore, the modules must provide extra type
information for code completion and the semantic checks to work correctly. information for code completion and the semantic checks to work correctly.
To create a QML module and make it appear in the \uicontrol Library view in To create a QML module and make it appear in the \l Library view:
the Design mode:
\list 1 \list 1
\li Create custom QML controls and place all the \c .qml files in a \li Create custom components and place all the \c .qml files in a
directory dedicated to your module. For example: directory dedicated to your module. For example:
\c {imports\asset_imports}. \c {imports\asset_imports}.
@@ -72,8 +71,8 @@
\li Create a \c .metainfo file for your module and place it in the \li Create a \c .metainfo file for your module and place it in the
\c designer directory. Meta information is needed to display the \c designer directory. Meta information is needed to display the
components in the \uicontrol {QML Types} tab in \uicontrol components in the \uicontrol Components tab in \uicontrol Library.
Library. Use a metainfo file delivered with Qt, such as Use a metainfo file delivered with Qt, such as
\c qtquickcontrols2.metainfo, as an example. \c qtquickcontrols2.metainfo, as an example.
\if defined(qtcreator) \if defined(qtcreator)
@@ -91,9 +90,9 @@
\endlist \endlist
Your module should now appear in the \uicontrol {QML Imports} tab in Your module should now appear in the \uicontrol Components tab in
\uicontrol Library in the Design mode. Your components should appear in the \uicontrol Library. Your components should appear in a subsection of
\uicontrol {QML Types} tab if a valid \c .metainfo file is in place. the \uicontrol Components tab if a valid \c .metainfo file is in place.
\if defined(qtcreator) \if defined(qtcreator)
\section1 Registering QML Types \section1 Registering QML Types
@@ -116,7 +115,7 @@
Ideally, QML modules have a \c{plugins.qmltypes} file in the same directory Ideally, QML modules have a \c{plugins.qmltypes} file in the same directory
as the \c qmldir file. The \c qmltypes file contains a description of the as the \c qmldir file. The \c qmltypes file contains a description of the
types exported by the module's plugins and is loaded by \QC when the components exported by the module's plugins and is loaded by \QC when the
module is imported. module is imported.
For Qt 4.8 and later, one or more \c qmltypes files can be listed in the For Qt 4.8 and later, one or more \c qmltypes files can be listed in the
@@ -131,7 +130,7 @@
Once you have obtained \c qmlplugindump for the Qt version the QML module's Once you have obtained \c qmlplugindump for the Qt version the QML module's
plugins were compiled with, run the following command to load My.Module plugins were compiled with, run the following command to load My.Module
version 1.0 from \c{/import/path/my/module} including all its plugins and version 1.0 from \c{/import/path/my/module} including all its plugins and
output a description of the plugins' types to output a description of the plugins' components to
\c{/import/path/my/module/plugins.qmltypes}: \c{/import/path/my/module/plugins.qmltypes}:
\code \code
@@ -175,7 +174,7 @@
\section1 Running QML Modules in Design Mode \section1 Running QML Modules in Design Mode
A QML emulation layer (also called QML Puppet) is used in the Design mode to A QML emulation layer (also called QML Puppet) is used in the Design mode to
render and preview images and to collect data. To be able to render custom types render and preview images and to collect data. To be able to render custom components
correctly from QML modules, the emulation layer must be built with the same correctly from QML modules, the emulation layer must be built with the same
Qt version and compiler as the QML modules. Qt version and compiler as the QML modules.

15
doc/qtcreator/src/qtquick/qtquick-navigator.qdoc
View File

@@ -38,9 +38,9 @@
\image qmldesigner-navigator.png "Navigator with component preview" \image qmldesigner-navigator.png "Navigator with component preview"
You can select components in the \uicontrol Navigator view to edit their You can select components in the \uicontrol Navigator view to edit their
properties in the \uicontrol Properties view. Components can access the properties in the \l Properties view. Components can access the
properties of their parent component. To select components in the properties of their parent component. To select components in the
\uicontrol {Form Editor} view, right-click a component, and select another \l {Form Editor} view, right-click a component, and select another
component in the \uicontrol Selection submenu. component in the \uicontrol Selection submenu.
Typically, child components are located within the parent component in Typically, child components are located within the parent component in
@@ -123,7 +123,8 @@
To hide invisible components in \uicontrol Navigator, click To hide invisible components in \uicontrol Navigator, click
\inlineimage filtericon.png \inlineimage filtericon.png
(\uicontrol {Filter Tree}) and select \uicontrol {Show only visible items}. (\uicontrol {Filter Tree}) and select
\uicontrol {Show Only Visible Components}.
\section1 Locking Components \section1 Locking Components
@@ -142,14 +143,14 @@
\image qtquick-designer-navigator-lock.gif "Locking components in Navigator" \image qtquick-designer-navigator-lock.gif "Locking components in Navigator"
You cannot select locked components in \uicontrol {Form Editor} or You cannot select locked components in \uicontrol {Form Editor} or
\uicontrol {3D Editor} nor access their properties in \l {3D Editor} nor access their properties in
\uicontrol Properties. \uicontrol Properties.
If you attempt to \l{Adding States}{remove a state} that changes the If you attempt to \l{Adding States}{remove a state} that changes the
properties of a locked component, you are prompted to confirm the removal. properties of a locked component, you are prompted to confirm the removal.
If you have \l{Editing Animation Curves}{added easing curves} to keyframe If you have \l{Editing Animation Curves}{added easing curves} to keyframe
animations, you can lock and unlock them in the \uicontrol {Curve Editor} animations, you can lock and unlock them in the \l {Curve Editor}
view. If you lock the components that contain the easing curves, the lock view. If you lock the components that contain the easing curves, the lock
status is synchronized between \uicontrol Navigator and status is synchronized between \uicontrol Navigator and
\uicontrol {Curve Editor}. \uicontrol {Curve Editor}.
@@ -164,7 +165,7 @@
components in \uicontrol {Form Editor}. To list the components in the order components in \uicontrol {Form Editor}. To list the components in the order
in which they appear in the file, as some other tools do, click in which they appear in the file, as some other tools do, click
\inlineimage filtericon.png \inlineimage filtericon.png
(\uicontrol {Filter Tree}), and select \uicontrol {Reverse item order}. (\uicontrol {Filter Tree}), and select \uicontrol {Reverse Component Order}.
To move a component to the top or bottom of the tree within its parent, To move a component to the top or bottom of the tree within its parent,
right-click it in \uicontrol Navigator or \uicontrol {Form Editor} right-click it in \uicontrol Navigator or \uicontrol {Form Editor}
@@ -218,7 +219,7 @@
right-click an instance of a component and then select right-click an instance of a component and then select
\uicontrol {Go into Component} in the context menu or \uicontrol {Go into Component} in the context menu or
press \key F2. press \key F2.
\li In \uicontrol Properties, select \uicontrol {Edit Master Component}. \li In \uicontrol Properties, select \uicontrol {Edit Base Component}.
\endlist \endlist
The component hierarchy is displayed as a bread crumb path, where you can The component hierarchy is displayed as a bread crumb path, where you can

7
doc/qtdesignstudio/examples/doc/coffeemachine.qdoc
View File

@@ -1,6 +1,6 @@
/**************************************************************************** /****************************************************************************
** **
** Copyright (C) 2020 The Qt Company Ltd. ** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/ ** Contact: https://www.qt.io/licensing/
** **
** This file is part of the Qt Design Studio documentation. ** This file is part of the Qt Design Studio documentation.
@@ -113,7 +113,8 @@
\section1 Using Timelines to Animate Transitions \section1 Using Timelines to Animate Transitions
The Coffee Machine application screens for choosing coffee, empty cup, and The Coffee Machine application screens for choosing coffee, empty cup, and
brewing each use custom QML types specified in separate QML files. brewing each use custom components specified in separate component files
(.qml).
We use the \uicontrol Timeline view to animate the transitions between We use the \uicontrol Timeline view to animate the transitions between
the screens during the application flow in \e {ApplicationFlow.ui.qml}. the screens during the application flow in \e {ApplicationFlow.ui.qml}.
@@ -122,7 +123,7 @@
Our viewport contains 200 frames, so we select the Our viewport contains 200 frames, so we select the
\inlineimage plus.png "Plus button" \inlineimage plus.png "Plus button"
button to add a 1200-frame timeline to the root element. button to add a 1200-frame timeline to the root component.
We use the default values for all other fields. We use the default values for all other fields.
To start recording the transition from the startup screen to the coffee To start recording the transition from the startup screen to the coffee

8
doc/qtdesignstudio/examples/doc/ebikedesign.qdoc
View File

@@ -1,6 +1,6 @@
/**************************************************************************** /****************************************************************************
** **
** Copyright (C) 2020 The Qt Company Ltd. ** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/ ** Contact: https://www.qt.io/licensing/
** **
** This file is part of the Qt Design Studio documentation. ** This file is part of the Qt Design Studio documentation.
@@ -55,7 +55,7 @@
Our viewport contains 1000 frames, so we select the Our viewport contains 1000 frames, so we select the
\inlineimage plus.png "Plus button" \inlineimage plus.png "Plus button"
button to add a 5000-frame timeline to the root element. button to add a 5000-frame timeline to the root component.
We use the default values for all other fields. We use the default values for all other fields.
To start recording the transitions between the Standard screen and the To start recording the transitions between the Standard screen and the
@@ -79,10 +79,10 @@
new timeline appears in the view. new timeline appears in the view.
When we select \e tripScreen in the \uicontrol Navigator, we can see the When we select \e tripScreen in the \uicontrol Navigator, we can see the
properties of the TripScreen QML type that we can animate in the properties of the TripScreen component that we can animate in the
\uicontrol Properties view. \uicontrol Properties view.
\image ebikedesign-trip-properties.png "Properties view of the Trip type" \image ebikedesign-trip-properties.png "Properties view of the Trip component"
We set values for the \uicontrol Visibility, We set values for the \uicontrol Visibility,
\uicontrol Opacity, \uicontrol currentFrame, and \uicontrol Scale properties \uicontrol Opacity, \uicontrol currentFrame, and \uicontrol Scale properties

149
doc/qtdesignstudio/examples/doc/loginui1.qdoc
View File

@@ -1,6 +1,6 @@
/**************************************************************************** /****************************************************************************
** **
** Copyright (C) 2020 The Qt Company Ltd. ** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/ ** Contact: https://www.qt.io/licensing/
** **
** This file is part of the Qt Design Studio documentation. ** This file is part of the Qt Design Studio documentation.
@@ -38,12 +38,12 @@
\e{Log In UI - Part 1} is the first in a series of tutorials that build on \e{Log In UI - Part 1} is the first in a series of tutorials that build on
each other to illustrate how to use \QDS to create a simple UI with some each other to illustrate how to use \QDS to create a simple UI with some
basic UI components, such as pages, buttons, and fields. Part 1 describes basic UI components, such as pages, buttons, and fields. Part 1 describes
how to use the \QDS wizard templates to create a Qt Quick project and a how to use the \QDS wizard templates to create a project and a
button UI control, and how to modify the files generated by the wizard button UI control, and how to modify the files generated by the wizard
templates to design your own UI. templates to design your own UI.
The \e {Learn Qt Quick} sections provide additional information about the The \e {Learn More} sections provide additional information about the
tasks performed by the wizards and about the basics of QML and Qt Quick. tasks performed by the wizards and about other basic tasks and concepts.
\section1 Creating the UI Project \section1 Creating the UI Project
@@ -78,8 +78,8 @@
\image loginui1-project.png "Log In UI project in the Design mode" \image loginui1-project.png "Log In UI project in the Design mode"
The UI is built using a \l{basic-rectangle}{Rectangle} QML type that forms The UI is built using a \l{basic-rectangle}{Rectangle} component that forms
the background and a \l Text type that displays some text. the background and a \l Text component that displays some text.
\note The visibility of views depends on the selected workspace, \note The visibility of views depends on the selected workspace,
so your \QDS might look somewhat different from the above image. so your \QDS might look somewhat different from the above image.
@@ -184,7 +184,7 @@
\li Drag and drop the Qt logo from the \uicontrol Assets tab of \li Drag and drop the Qt logo from the \uicontrol Assets tab of
\uicontrol Library to the top-left corner of the rectangle. \uicontrol Library to the top-left corner of the rectangle.
\image loginui1-library-assets.png "Library view Assets tab" \image loginui1-library-assets.png "Library view Assets tab"
\QDS automatically creates a component of the \l{Images}{Image} type \QDS automatically creates a component of the \l{Images}{Image} component
for you with the path to the image file set as the value of for you with the path to the image file set as the value of
the \uicontrol Source field in \uicontrol Properties. the \uicontrol Source field in \uicontrol Properties.
\image loginui1-image-properties.png "Image properties" \image loginui1-image-properties.png "Image properties"
@@ -198,15 +198,15 @@
\image loginui1-main-page.png "Modified UI in the Design mode" \image loginui1-main-page.png "Modified UI in the Design mode"
\section2 Learn Qt Quick - QML Types \section2 Learn More - Components
The \l {Qt Quick} module provides all the basic types necessary for creating \QDS provides preset \l{glossary-component}{components} for creating
UIs. It provides a visual canvas and includes types for creating and UIs, including components for creating and animating visual components,
animating visual components, receiving user input, and creating data models receiving user input, and creating data models and views.
and views.
To be able to use the functionality of Qt Quick types, the wizard template To be able to use the functionality of preset components, the wizard template
adds the following \e import statements to the QML files that it creates: adds the following \e import statements to the UI files (.ui.qml) that it
creates:
\quotefromfile loginui1/Screen01.ui.qml \quotefromfile loginui1/Screen01.ui.qml
\skipto import \skipto import
@@ -214,72 +214,72 @@
You can view the import statements in the \uicontrol {Text Editor} view. You can view the import statements in the \uicontrol {Text Editor} view.
The \uicontrol Library view lists the QML types in each Qt module that are The \l Library view lists the components in each module that are
supported by \QDS. You can use the basic types to create your own QML supported by \QDS. You can use the basic components to create your own
types, and they will be listed under \uicontrol {My QML Components}. components, and they will be listed under \uicontrol {My Components}.
This section is only visible if you have created custom QML components. This section is only visible if you have created custom components.
The \l {basic-rectangle}{Rectangle}, \l Text, and \l {Images}{Image} types The \l {basic-rectangle}{Rectangle}, \l Text, and \l {Images}{Image}
used in this tutorial are based on the \l Item type. It is the base type for components used in this tutorial are based on the \l Item component.
all visual elements, with implementation of basic functions and properties, It is the base component for all visual elements, with implementation
such as type name, ID, position, size, and visibility. of basic functions and properties, such as component name, ID, position,
size, and visibility.
For more information, see \l{Use Case - Visual Elements In QML}. For For more information, see \l{Use Case - Visual Elements In QML}. For
descriptions of all QML types, see \l{All QML Types} in the Qt reference descriptions of all components, see \l{All QML Types} in the Qt reference
documentation. documentation.
\section3 Regtangle Properties \section3 Regtangle Properties
The basic \l {basic-rectangle}{Rectangle} QML type is used for drawing shapes The default \l {basic-rectangle}{Rectangle} component is used for drawing
with four sides and four corners. You can fill rectangles either with a shapes with four sides and four corners. You can fill rectangles either with
solid fill color or a gradient. You can specify the border color separately. a solid fill color or a gradient. You can specify the border color separately.
By setting the value of the radius property, you can create shapes with By setting the value of the radius property, you can create shapes with
rounded corners. rounded corners.
If you want to specify the radius of each corner separately, you can use the If you want to specify the radius of each corner separately, you can use the
\l{studio-rectangle}{Rectangle} type from the Qt Quick Studio Components \l{studio-rectangle}{Rectangle} component from the Studio Components
module instead of the basic rectangle type. It is available in the module instead of the basic rectangle component. It is available in the
\uicontrol {Studio Components} tab of \uicontrol Library. \uicontrol {Studio Components} tab of \l Library > \uicontrol Components.
\section3 Text Properties \section3 Text Properties
The \l Text type is used for adding static text to the UI, such as titles The \l Text component is used for adding static text to the UI, such as
and labels. You can select the font to use and specify extensive properties titles and labels. You can select the font to use and specify extensive
for each text item, such as size in points or pixels, weight, style, and properties for each text component, such as size in points or pixels,
spacing. weight, style, and spacing.
To display custom fonts in the list of available fonts in To display custom fonts in the list of available fonts in \l Properties,
\uicontrol Properties, add them in the \uicontrol Assets add them in the \uicontrol Assets tab of \uicontrol Library.
tab of \uicontrol Library.
If you want to create a label with a background, use the \l Label type If you want to create a label with a background, use the \l Label component
from the Qt Quick Controls module instead of the Text type. from the Qt Quick Controls module instead of the Text component.
\section3 Image Properties \section3 Image Properties
The \l {Images}{Image} type is used for adding images to the UI in several The \l {Images}{Image} component is used for adding images to the UI in several
supported formats, including bitmap formats such as PNG and JPEG and vector supported formats, including bitmap formats such as PNG and JPEG and vector
graphics formats such as SVG. You must add the images to your project in the graphics formats such as SVG. You must add the images to your project in the
\uicontrol Assets tab of \uicontrol Library to be able to use them in \uicontrol Assets tab of \uicontrol Library to be able to use them in
designs. designs.
If you need to display animated images, use the \l {Animated Image} type, If you need to display animated images, use the \l {Animated Image}
also available in the \uicontrol {Qt Quick - Basic} component, also available in \uicontrol Library > \uicontrol Components >
tab of \uicontrol Library. \uicontrol {Default Components} > \uicontrol Basic.
\section1 Creating a Push Button \section1 Creating a Push Button
You can use another wizard template to create a push button and to add it to You can use another wizard template to create a push button and to add it to
the project. The wizard template creates a reusable button component that the project. The wizard template creates a reusable button component that
appears under \uicontrol {My QML Components} in \uicontrol Library. You can appears under \uicontrol {My Components} in \uicontrol Library > Components.
drag and drop it to \uicontrol {Form Editor} and modify its properties You can drag and drop it to \l {Form Editor} and modify its properties
in \uicontrol Properties to change its appearance and functionality. in \l Properties to change its appearance and functionality.
If you find that you cannot use the wizard template nor the ready-made If you find that you cannot use the wizard template nor the ready-made
button controls available in the \uicontrol {Qt Quick Controls 2} tab button controls available in the \uicontrol {Qt Quick Controls} tab
in \uicontrol Library to create the kind of push button that you want, in \uicontrol Library > \uicontrol Components to create the kind of push
you can create your button from scratch using basic QML types. For more button that you want, you can create your button from scratch using default
information, see \l {Creating Buttons} and components. For more information, see \l {Creating Buttons} and
\l {Creating Scalable Buttons and Borders}. \l {Creating Scalable Buttons and Borders}.
To create a push button by using the wizard template: To create a push button by using the wizard template:
@@ -289,7 +289,7 @@
\uicontrol {Files and Classes} > \uicontrol {Qt Quick Controls} > \uicontrol {Files and Classes} > \uicontrol {Qt Quick Controls} >
\uicontrol {Custom Button} > \uicontrol Choose. \uicontrol {Custom Button} > \uicontrol Choose.
\li In the \uicontrol {Component name} field, enter a name for your \li In the \uicontrol {Component name} field, enter a name for your
button type: \e {PushButton}. button component: \e {PushButton}.
\li Select \uicontrol Finish (or \uicontrol Done on \macos) to create \li Select \uicontrol Finish (or \uicontrol Done on \macos) to create
the button. the button.
\endlist \endlist
@@ -298,16 +298,16 @@
\image loginui1-button.png "Button in the Design mode." \image loginui1-button.png "Button in the Design mode."
\section2 Learn Qt Quick - Qt Quick Controls \section2 Learn More - UI Controls
The \e {Custom Button} wizard template creates a \l {Button} The \e {Custom Button} wizard template creates a \l {Button}
QML type that belongs to the \l {Qt Quick Controls 2} module. It is a component that belongs to the \l {Qt Quick Controls} module. It is a
push-button control that can be pushed or clicked by the user. Buttons push-button control that can be pushed or clicked by the user. Buttons
are normally used to perform an action or to answer a question. The Button are normally used to perform an action or to answer a question. The Button
type inherits properties and functionality from another QML type. These component inherits properties and functionality from another component. These
enable you to set text, display an icon, react to mouse clicks, and so on. enable you to set text, display an icon, react to mouse clicks, and so on.
To be able to use the functionality of the Button type, the wizard template To be able to use the functionality of the Button component, the wizard template
adds the following \e import statements to the \e PushButton.ui.qml file: adds the following \e import statements to the \e PushButton.ui.qml file:
\quotefromfile loginui1/PushButton.ui.qml \quotefromfile loginui1/PushButton.ui.qml
@@ -315,9 +315,9 @@
\printuntil loginui1 \printuntil loginui1
The \l {Qt Quick Templates 2} module provides the functionality of the The \l {Qt Quick Templates 2} module provides the functionality of the
Button type. The module is imported as \e T, and the alias is added to Button component. The module is imported as \e T, and the alias is added to
the Button type definition to indicate that the Button type from the the Button component definition to indicate that the Button component from the
Qt Quick Controls 2 module is used, instead of some other type with the Qt Quick Controls module is used, instead of some other component with the
same name. same name.
\printuntil text \printuntil text
@@ -331,7 +331,7 @@
\section1 Styling the Button \section1 Styling the Button
You can now modify the properties of the PushButton type to your liking. To You can now modify the properties of the PushButton component to your liking. To
make the changes apply to all the button instances, you must make them in make the changes apply to all the button instances, you must make them in
the \e PushButton.ui.qml file. the \e PushButton.ui.qml file.
@@ -362,7 +362,7 @@
rounded corners. rounded corners.
\li In the \uicontrol States view, select the \e down state and modify \li In the \uicontrol States view, select the \e down state and modify
the background and border color as above. the background and border color as above.
\li Select the text item in \uicontrol Navigator to display its \li Select the text component in \uicontrol Navigator to display its
properties in \uicontrol Properties. properties in \uicontrol Properties.
\li In the \uicontrol {Text Color} field, select \uicontrol Actions > \li In the \uicontrol {Text Color} field, select \uicontrol Actions >
\uicontrol Reset to reset the text color to the default color, \uicontrol Reset to reset the text color to the default color,
@@ -379,26 +379,25 @@
\image loginui1-button-styled.png "Modified button in the Form Editor" \image loginui1-button-styled.png "Modified button in the Form Editor"
\section2 Learn Qt Quick - Property Bindings \section2 Learn More - Property Bindings
An object's property can be assigned a static value which stays constant A component's property can be assigned a static value which stays constant
until it is explicitly assigned a new value. In this tutorial, the color until it is explicitly assigned a new value. In this tutorial, the color
values you set in \uicontrol {Binding Editor} are static. values you set in \uicontrol {Binding Editor} are static.
However, to make the fullest use of QML and its built-in support for dynamic However, to make the fullest use of the built-in support for dynamic
object behavior, you can use property bindings that specify relationships component behavior, you can use property bindings that specify relationships
between different object properties. When a property's dependencies change between different component properties. When a property's dependencies change
in value, the property is automatically updated according to the specified in value, the property is automatically updated according to the specified
relationship. relationship.
Behind the scenes, the QML engine monitors the property's dependencies Behind the scenes, the property's dependencies are monitored (that is, the
(that is, the variables in the binding expression). When it detects a variables in the binding expression). When a change is detected, the binding
change, it re-evaluates the binding expression and applies the new result expression is re-evaluated and the new result is applied to the property.
to the property.
For more information, see \l {Property Binding}. For more information, see \l {Property Binding}.
Next, you will use the \e PushButton type in the main UI QML file, Next, you will use the \e PushButton component in the main UI file,
\e Screen01.ui.qml to add two instances of the button to the UI \e Screen01.ui.qml to add two instances of the button to the UI
and to modify their text labels. and to modify their text labels.
@@ -409,9 +408,9 @@
\list 1 \list 1
\li Double-click \e Screen01.ui.qml in \uicontrol Projects \li Double-click \e Screen01.ui.qml in \uicontrol Projects
to open it in \uicontrol {Form Editor}. to open it in \uicontrol {Form Editor}.
\li Drag and drop two instances of the PushButton type from \li Drag and drop two instances of the PushButton component from
\uicontrol Library to \uicontrol {Form Editor}. \uicontrol Library to \uicontrol {Form Editor}.
\image loginui1-library.png "My QML Components tab of Library view" \image loginui1-library.png "My Components tab of Library view"
\li Select one of the buttons in \uicontrol Navigator to modify \li Select one of the buttons in \uicontrol Navigator to modify
its id and text label in \uicontrol Properties. its id and text label in \uicontrol Properties.
\li In the \uicontrol Id field, enter \e loginButton. \li In the \uicontrol Id field, enter \e loginButton.
@@ -422,7 +421,7 @@
\li Select the other button, and change its id to \e registerButton \li Select the other button, and change its id to \e registerButton
and text label to \e {Create Account}. Again, mark the text and text label to \e {Create Account}. Again, mark the text
translatable. translatable.
\li When an element is selected, selection handles are displayed in its \li When a component is selected, selection handles are displayed in its
corners and on its sides. Use the selection handles to resize the corners and on its sides. Use the selection handles to resize the
buttons so that the text fits comfortably on the button background. buttons so that the text fits comfortably on the button background.
In this tutorial, the button width is set to 120 pixels. In this tutorial, the button width is set to 120 pixels.
@@ -440,10 +439,10 @@
\image loginui1-ready.png "The finished UI in the Design mode" \image loginui1-ready.png "The finished UI in the Design mode"
\section2 Learn Qt Quick - QML Ids \section2 Learn More - Component IDs
Each QML type and each instance of a QML type has an \e id that uniquely Each component and each instance of a component has an \e id that uniquely
identifies it and enables other objects' properties to be bound to it. An identifies it and enables other components' properties to be bound to it. An
id must be unique, it must begin with a lower-case letter or an underscore id must be unique, it must begin with a lower-case letter or an underscore
character, and it can contain only letters, numbers, and underscore character, and it can contain only letters, numbers, and underscore
characters. characters.

54
doc/qtdesignstudio/examples/doc/loginui2.qdoc
View File

@@ -1,6 +1,6 @@
/**************************************************************************** /****************************************************************************
** **
** Copyright (C) 2020 The Qt Company Ltd. ** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/ ** Contact: https://www.qt.io/licensing/
** **
** This file is part of the Qt Design Studio documentation. ** This file is part of the Qt Design Studio documentation.
@@ -48,8 +48,8 @@
These instructions build on \l {Log In UI - Part 1}. These instructions build on \l {Log In UI - Part 1}.
The \e {Learn Qt Quick} sections provide additional information about the The \e {Learn More} sections provide additional information about the
features of QML and Qt Quick that are relevant to the task at hand. task at hand.
\section1 Anchoring UI Components \section1 Anchoring UI Components
@@ -91,23 +91,23 @@
\image loginui2-loginpage.png "Login page in the Design mode" \image loginui2-loginpage.png "Login page in the Design mode"
\section2 Learn Qt Quick - Anchors \section2 Learn More - Anchors
In an anchor-based layout, each QML type can be thought of as having a set In an anchor-based layout, each component can be thought of as having a set
of invisible \e anchor lines: top, bottom, left, right, fill, horizontal of invisible \e anchor lines: top, bottom, left, right, fill, horizontal
center, vertical center, and baseline. center, vertical center, and baseline.
Anchors enable placing an object either adjacent to or inside of another Anchors enable placing a component either adjacent to or inside of another
object, by attaching one or more of the object's anchor lines to the anchor component, by attaching one or more of the component's anchor lines to the
lines of the other object. If an object changes, the objects that are anchor lines of the other component. If a component changes, the components
anchored to it will adjust automatically to maintain the anchoring. that are anchored to it will adjust automatically to maintain the anchoring.
For more information, see \l{Positioning with Anchors}. For more information, see \l{Positioning with Anchors}.
\section1 Using Column Positioners \section1 Using Column Positioners
You will now add two entry fields to the page and position them in a column 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}. to learn another method of \l{Using Positioners}{positioning components}.
Next, you will position the push buttons on the page in another column. 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 Finally, you will anchor the columns to the page to enable their positions
to change when the screen size changes. to change when the screen size changes.
@@ -115,15 +115,15 @@
To add entry fields to the page: To add entry fields to the page:
\list 1 \list 1
\li In \uicontrol Library > \uicontrol {QML Types}, select the \li In \l Library > \uicontrol Components, select the
\uicontrol {+ \QtQuick.Controls} button to display the \inlineimage plus.png
\l {Qt Quick Controls 2} types in the tab: button to add the \l {Qt Quick Controls} module to the project:
\image loginui2-imports.png \image loginui2-imports.png
\li Drag and drop two instances of the \uicontrol {Text Field} \li Drag and drop two instances of the \uicontrol {Text Field}
type from the \uicontrol {Qt Quick Controls 2} tab to component from the \uicontrol {Qt Quick Controls} tab to
\uicontrol {Form Editor}. \l {Form Editor}.
\li Select one of the text fields in \uicontrol Navigator, and \li Select one of the text fields in \l Navigator, and
change its id to \e usernameField in \uicontrol Properties. change its id to \e usernameField in \l Properties.
\li In the \uicontrol Geometry group, \uicontrol Size field, \li In the \uicontrol Geometry group, \uicontrol Size field,
make the field wide enough to accommodate long user names make the field wide enough to accommodate long user names
by setting its width to \e 300 pixels. by setting its width to \e 300 pixels.
@@ -136,7 +136,7 @@
and width to \e 300 pixels. and width to \e 300 pixels.
\endlist \endlist
The Text Field type has additional properties that you can use to change The Text Field component has additional properties that you can use to change
its appearance. For example, you can change the color, font, alignment, or its appearance. For example, you can change the color, font, alignment, or
word and letter spacing of the placeholder text. word and letter spacing of the placeholder text.
@@ -187,22 +187,18 @@
\image loginui2-loginpage-ready.png "Login page in the Design mode" \image loginui2-loginpage-ready.png "Login page in the Design mode"
\section1 Learn Qt Quick - Positioners \section1 Learn More - Positioners
Qt Quick provides built-in positioner items. For many use cases, the best For many use cases, the best positioner to use is a simple grid, row, or
positioner to use is a simple grid, row, or column, and Qt Quick provides column, and \QDS provides components that will position children in these
items that will position children in these formations in the most efficient formations in the most efficient manner possible. For more information
manner possible. For more information about using pre-defined positioners, about using preset positioners, see \l {Using Positioners}.
see \l {Item Positioners}.
For more complicated UI designs, you can use QML types from the For more complicated UI designs, you can use components from the
\l {Qt Quick Layouts Overview}{Qt Quick Layouts module}. \l {Using Layouts}{Qt Quick Layouts module}.
\section1 Next Steps \section1 Next Steps
To learn more about positioning items in \QDS, see
\l{Positioning Items}.
To learn how to add a second page and move to it from the main page, see To learn how to add a second page and move to it from the main page, see
the next tutorial in the series, \l {Log In UI - Part 3}. the next tutorial in the series, \l {Log In UI - Part 3}.
*/ */

68
doc/qtdesignstudio/examples/doc/loginui3.qdoc
View File

@@ -1,6 +1,6 @@
/**************************************************************************** /****************************************************************************
** **
** Copyright (C) 2020 The Qt Company Ltd. ** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/ ** Contact: https://www.qt.io/licensing/
** **
** This file is part of the Qt Design Studio documentation. ** This file is part of the Qt Design Studio documentation.
@@ -42,8 +42,8 @@
first page, users can enter a username and password to log in. On the first page, users can enter a username and password to log in. On the
second page, they can register if they do not already have an account. second page, they can register if they do not already have an account.
Because the second page will contain most of the same UI elements as the Because the second page will contain most of the same UI components as the
login page, you will use \e states to show and hide UI elements as necessary login page, you will use \e states to show and hide UI components as necessary
when a user selects the \uicontrol {Create Account} button. when a user selects the \uicontrol {Create Account} button.
These instructions build on: These instructions build on:
@@ -53,8 +53,8 @@
\li \l {Log In UI - Part 2} \li \l {Log In UI - Part 2}
\endlist \endlist
The \e {Learn Qt Quick} sections provide additional information about the The \e {Learn More} sections provide additional information relevant to the
features of QML and Qt Quick that are relevant to the task at hand. task at hand.
\section1 Adding UI Components \section1 Adding UI Components
@@ -71,18 +71,18 @@
To add the text field and a back button needed on the registration page: To add the text field and a back button needed on the registration page:
\list 1 \list 1
\li Open \e {Screen01.ui.qml} in \uicontrol {Form Editor} for editing. \li Open \e {Screen01.ui.qml} in \l {Form Editor} for editing.
\li Drag and drop a \uicontrol {Text Field} from \uicontrol Library \li Drag and drop a \uicontrol {Text Field} from \l Library
> \uicontrol {QML Types} > \uicontrol {Qt Quick Controls 2} to > \uicontrol Components > \uicontrol {Qt Quick Controls} to
\e fieldColumn in \uicontrol Navigator. \e fieldColumn in \l Navigator.
\li In \uicontrol Properties, change the id of the text field to \li In \l Properties, change the ID of the text field to
\e verifyPasswordField. \e verifyPasswordField.
\li In the \uicontrol Geometry group, \uicontrol Size field, set the \li In the \uicontrol Geometry group, \uicontrol Size field, set the
width of the field to \e 300 pixels to match the size of the width of the field to \e 300 pixels to match the size of the
existing fields. existing fields.
\li In the \uicontrol Placeholder field, set the placeholder text to \li In the \uicontrol Placeholder field, set the placeholder text to
\e {Verify password} and mark the text translatable. \e {Verify password} and mark the text translatable.
\li Drag and drop a PushButton type from \uicontrol Library > \li Drag and drop a PushButton component from \uicontrol Library >
\uicontrol {My QML Components} to their parent rectangle in \uicontrol {My QML Components} to their parent rectangle in
\uicontrol Navigator. \uicontrol Navigator.
\li Select the button in \uicontrol Navigator and change its id to \li Select the button in \uicontrol Navigator and change its id to
@@ -145,32 +145,28 @@
\image loginui3-states.png "States view" \image loginui3-states.png "States view"
\section2 Learn Qt Quick - States \section2 Learn More - States
In Qt Quick, the \e state of a particular visual item is the set of The \l{Adding States}{state} of a particular visual component is the set of
information which describes how and where the individual component information which describes how and where the individual parts of the visual
parts of the visual item are displayed within it, and all the data component are displayed within it, and all the data associated with that
associated with that state. Most visual items in a UI will have a state. Most visual components in a UI will have a limited number of states,
limited number of states, each with well-defined properties. each with well-defined properties.
For example, an element in a list may be either selected or not, and if For example, a list item may be either selected or not, and if
selected, it may either be the currently active single selection or it selected, it may either be the currently active single selection or it
may be part of a selection group. Each of those states may have certain may be part of a selection group. Each of those states may have certain
associated visual appearance (neutral, highlighted, expanded, and so on). associated visual appearance (neutral, highlighted, expanded, and so on).
Qt Quick provides a \l State type with properties which define its Youn can apply states to trigger behavior or animations. UI components
semantics and can be used to trigger behavior or animations. UI components typically have a default state that contains all of a component's initial
typically have a state property and a default state. The default state property values and is therefore useful for managing property values before
contains all of an item's initial property values, and is therefore useful state changes.
for managing property values before state changes.
UI components can specify additional states by adding new State objects to You can specify additional states by adding new states. Each state within a
the state property. Each state within a component has a unique name. To component has a unique name. To change the current state of an component,
change the current state of an item, the state property is set to the name the state property is set to the name of the state. State changes can be
of the state. State changes can be bound to conditions by using the \c when bound to conditions by using the \c when property.
property.
For more information, see \l{Qt Quick States}.
Next, you will create connections to specify that clicking the Next, you will create connections to specify that clicking the
\uicontrol {Create Account} button on the login page triggers a \uicontrol {Create Account} button on the login page triggers a
@@ -180,12 +176,12 @@
\section1 Connecting Buttons to States \section1 Connecting Buttons to States
QML types have predefined signals that are emitted when users interact Components have predefined signals that are emitted when users interact
with the UI. The \e PushButton QML type contains a \l{Mouse Area} type with the UI. The \e PushButton component contains a \l{Mouse Area} component
that has a \e clicked signal. The signal is emitted whenever the mouse that has a \e clicked signal. The signal is emitted whenever the mouse
is clicked within the area. is clicked within the area.
You will now use the \uicontrol Connections view to You will now use the \l Connections view to
\l{Connecting Components to Signals}{connect} the clicked signal of \l{Connecting Components to Signals}{connect} the clicked signal of
\e registerButton to \e registerState and that of \e backButton \e registerButton to \e registerState and that of \e backButton
to \e loginState: to \e loginState:
@@ -217,7 +213,7 @@
\image loginui3.gif "Moving between login page and registration page" \image loginui3.gif "Moving between login page and registration page"
\section2 Learn Qt Quick - Signal and Event Handlers \section2 Learn More - Signal and Event Handlers
UI components need to communicate with each other. For example, a button UI components need to communicate with each other. For example, a button
needs to know that the user has clicked on it. In response, the button may needs to know that the user has clicked on it. In response, the button may
@@ -233,8 +229,8 @@
\section1 Next Steps \section1 Next Steps
For a more complicated UI, you would typically use QML types that specify For a more complicated UI, you would typically use components that specify
a view of items provided by a model, such as a \l ListView or \l StackView. a view of components provided by a model, such as a \l ListView or \l StackView.
For more information, see \l{Using Data Models}. For more information, see \l{Using Data Models}.
To learn how to use a timeline to animate the transition between the login To learn how to use a timeline to animate the transition between the login

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

@@ -1,6 +1,6 @@
/**************************************************************************** /****************************************************************************
** **
** Copyright (C) 2020 The Qt Company Ltd. ** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/ ** Contact: https://www.qt.io/licensing/
** **
** This file is part of the Qt Design Studio documentation. ** This file is part of the Qt Design Studio documentation.
@@ -53,8 +53,8 @@
\li \l {Log In UI - Part 3} \li \l {Log In UI - Part 3}
\endlist \endlist
The \e {Learn Qt Quick} sections provide additional information about the The \e {Learn More} sections provide additional information relevant to the
features of QML and Qt Quick that are relevant to the task at hand. task at hand.
\section1 Animating UI Components \section1 Animating UI Components
@@ -287,14 +287,14 @@
\image loginui4.gif "Moving between login page and registration page" \image loginui4.gif "Moving between login page and registration page"
\section2 Learn Qt Quick - Timeline \section2 Learn More - Timeline
The Qt Quick Timeline module provides QML types to use timelines and The Qt Quick Timeline module provides components to use timelines and
keyframes to animate component properties in UIs. Animating properties keyframes to animate component properties in UIs. Animating properties
enables their values to move through intermediate values instead of enables their values to move through intermediate values instead of
immediately changing to the target value. immediately changing to the target value.
The Keyframe type specifies the value of a keyframe on a timeline. \QDS The Keyframe component specifies the value of a keyframe on a timeline. \QDS
automatically adds keyframes between two keyframes, and sets their values automatically adds keyframes between two keyframes, and sets their values
evenly to create an appearance of movement or transformation. evenly to create an appearance of movement or transformation.
@@ -302,14 +302,15 @@
of the animation. For more information about easing curve types, see the of the animation. For more information about easing curve types, see the
documentation for \l [QML] {PropertyAnimation}{easing curves}. documentation for \l [QML] {PropertyAnimation}{easing curves}.
To be able to use the functionality of Qt Quick Timeline types, \QDS adds To be able to use the functionality of Timeline components, \QDS adds
the following \e import statement to the QML files where it uses the types: the following \e import statement to the UI files where it uses the
components:
\quotefromfile loginui4/Screen01.ui.qml \quotefromfile loginui4/Screen01.ui.qml
\skipto QtQuick.Timeline \skipto QtQuick.Timeline
\printuntil 1.0 \printuntil 1.0
All the properties and functions of the QML types from this module are All the properties and functions of the components from this module are
available in the Design mode, and therefore it is enough to learn how to available in the Design mode, and therefore it is enough to learn how to
use \uicontrol Timeline, as described in \l {Creating Animations}. use \uicontrol Timeline, as described in \l {Creating Animations}.

70
doc/qtdesignstudio/examples/doc/progressbar.qdoc
View File

@@ -1,6 +1,6 @@
/**************************************************************************** /****************************************************************************
** **
** Copyright (C) 2020 The Qt Company Ltd. ** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/ ** Contact: https://www.qt.io/licensing/
** **
** This file is part of the Qt Design Studio documentation. ** This file is part of the Qt Design Studio documentation.
@@ -36,36 +36,36 @@
\section1 Creating the Progress Bar \section1 Creating the Progress Bar
First, we create an empty Qt Quick project, as described in First, we create an empty project, as described in \l {Creating Projects}.
\l {Creating Projects}. For the purposes of this example, For the purposes of this example, we call the project \e progressbar.
we call the project \e progressbar.
In this example, we use two overlapping rectangles and a text label to In this example, we use two overlapping rectangles and a text label to
create the progress bar. For another example of a progress bar, see the create the progress bar. For another example of a progress bar, see the
\l {progress-bar-control}{Progress Bar} type in Qt Quick Controls. \l {progress-bar-control}{Progress Bar} component in Qt Quick Controls.
In the Design mode, we drag and drop a \uicontrol Rectangle from the In the Design mode, we drag and drop a \uicontrol Rectangle from
\uicontrol Library to the \uicontrol {Form Editor} and modify its size \l Library to \l {Form Editor} and modify its size to create the
to create the background for the progress bar. We change its id to background for the progress bar. We change its ID to \e background in
\e background in the \uicontrol Properties view. \l Properties.
We want to be able to control the background rectangle and the text label We want to be able to control the background rectangle and the text label
that was added by the project wizard, so we will use an \uicontrol Item that was added by the project wizard, so we will use an \uicontrol Item
for that. We drag and drop the item from the \uicontrol Library to the component for that. We drag and drop the Item from \uicontrol Library to
\uicontrol {Form Editor} and change its id to \e root in the \uicontrol {Form Editor} and change its ID to \e root in
\uicontrol Properties view. \uicontrol Properties.
To make the background and text children of the item, we drag and drop them To make the background and text children of the Item, we drag and drop them
to the item in the \uicontrol Navigator view. This enables us to use the anchor to the Item in \l Navigator. This enables us to use the anchor
buttons in \uicontrol Properties > \uicontrol Layout to anchor them to their buttons in \uicontrol Properties > \uicontrol Layout to anchor them to their
parent. We anchor the background to its parent on all edges, with a 30-pixel parent. We anchor the background to its parent on all edges, with a 30-pixel
margin at the top to leave space for the text. We then anchor the text to margin at the top to leave space for the text. We then anchor the text to
the top of the item. the top of the Item.
\image progressbar-rectangle.png "Progress bar background in the Form Editor" \image progressbar-rectangle.png "Progress bar background in the Form Editor"
We now drag and drop another rectangle on top of the background rectangle in We now drag and drop another rectangle on top of the background rectangle in
the \uicontrol Navigator and change its id to \e indicator in the properties. \uicontrol Navigator and change its ID to \e indicator in
\uicontrol Properties.
We then anchor the left, top, and bottom of the indicator to its parent with We then anchor the left, top, and bottom of the indicator to its parent with
5-pixel margins. We leave the right side free, because its value needs to 5-pixel margins. We leave the right side free, because its value needs to
change for the animation. change for the animation.
@@ -78,13 +78,13 @@
The text label will indicate the progress in numbers and changing color, The text label will indicate the progress in numbers and changing color,
while the indicator rectangle will indicate it by getting wider and while the indicator rectangle will indicate it by getting wider and
changing color. To animate the label and indicator, we'll add timelines changing color. To animate the label and indicator, we'll add timelines
in the \uicontrol Timeline view. in the \l Timeline view.
For more information about using the timeline, see \l {Creating Animations}. For more information about using the timeline, see \l {Creating Animations}.
\section2 Adding Color Animation \section2 Adding Color Animation
First, we add a color animation to the \e root item. We select the First, we add a color animation to the \e root component. We select the
\inlineimage plus.png \inlineimage plus.png
button to add a 100-frame timeline to root. You can use the default button to add a 100-frame timeline to root. You can use the default
values for all other fields. values for all other fields.
@@ -99,8 +99,8 @@
We then set the color at frame 0 to green (\e {#8de98d}) in We then set the color at frame 0 to green (\e {#8de98d}) in
\uicontrol Properties > \uicontrol Text > \uicontrol {Text Color}. \uicontrol Properties > \uicontrol Text > \uicontrol {Text Color}.
We can either pick a color from the color selector or use the We can either \l{Picking Colors}{pick a color} from the color selector
\uicontrol {Set Binding} command in the \inlineimage submenu.png or use the \uicontrol {Set Binding} command in the \inlineimage submenu.png
(\uicontrol Settings) menu to open the \uicontrol {Binding Editor}. (\uicontrol Settings) menu to open the \uicontrol {Binding Editor}.
We then move the playhead to frame 50 and set the text color to red We then move the playhead to frame 50 and set the text color to red
@@ -122,9 +122,9 @@
\image progressbar-timeline-indicator.png "Indicator timeline" \image progressbar-timeline-indicator.png "Indicator timeline"
We will now copy the color animation from the text label to the indicator. We will now copy the color animation from the text label to the indicator.
First, we right-click the text item in the \uicontrol Timeline view to open First, we right-click the text component in the \uicontrol Timeline view to
a context menu and select \uicontrol {Copy All Keyframes from Item} to copy open a context menu and select \uicontrol {Copy All Keyframes from Item} to
the keyframe values we specified for the text label. copy the keyframe values we specified for the text label.
Next, we select the indicator in the \uicontrol Navigator, and then select Next, we select the indicator in the \uicontrol Navigator, and then select
\uicontrol {Insert Keyframes for Item} to paste the keyframe \uicontrol {Insert Keyframes for Item} to paste the keyframe
@@ -138,11 +138,11 @@
\section1 Creating a Reusable Component \section1 Creating a Reusable Component
We want the progress bar to be reusable, so we'll move it to a separate We want the progress bar to be reusable, so we'll move it to a separate
QML file. To make sure that the component will contain the timeline, we component file. To make sure that the component will contain the timeline,
select \uicontrol {Filter Tree} in the \uicontrol Navigator, and then we select \uicontrol {Filter Tree} in \uicontrol Navigator and then
deselect the \uicontrol {Show Only Visible Items} check box to show the deselect the \uicontrol {Show Only Visible Items} check box to show the
timeline item in the \uicontrol Navigator. We then move the timeline item timeline component in \uicontrol Navigator. We then move the timeline
to \e root to have it moved as a part of the root component. component to \e root to have it moved as a part of the root component.
Now we can right-click root to open a context menu and select Now we can right-click root to open a context menu and select
\uicontrol {Move Component into Separate File}. We can see the \uicontrol {Move Component into Separate File}. We can see the
@@ -152,28 +152,28 @@
\section1 Exporting Properties \section1 Exporting Properties
We now select the root component in the \uicontrol Navigator, and We now select the root component in \uicontrol Navigator, and
then select \uicontrol {Go into Component} in the context menu to then select \uicontrol {Go into Component} in the context menu to
open \e Root.qml in the \uicontrol {Form Editor}. open \e Root.qml in \uicontrol {Form Editor}.
We want to be able to use the keyframe value as the value of the text label, We want to be able to use the keyframe value as the value of the text label,
so we will export it as a property alias. We select \e timeline in the so we will export it as a property alias. We select \e timeline in
\uicontrol Navigator and then \uicontrol Properties > \uicontrol Timeline > \uicontrol Navigator and then \uicontrol Properties > \uicontrol Timeline >
\uicontrol {Current frame} > \uicontrol Settings > \uicontrol {Current frame} > \uicontrol Settings >
\uicontrol {Export Property as Alias}. \uicontrol {Export Property as Alias}.
\image progressbar-root-export-property.png "Export keyframe group as a property" \image progressbar-root-export-property.png "Export keyframe group as a property"
When we select \e root in the \uicontrol Navigator, we can see the When we select \e root in \uicontrol Navigator, we can see the
\e timelineCurrentFrame property in \uicontrol Connections \e timelineCurrentFrame property in \uicontrol {Connections View}
> \uicontrol Bindings. We double-click it to change its name > \uicontrol Bindings. We double-click it to change its name
to \e progress. to \e progress.
\image progressbar-bindings-progress.png "Connections view Bindings tab" \image progressbar-bindings-progress.png "Connections View Bindings tab"
We will bind some JavaScript to the value of the text label to turn We will bind some JavaScript to the value of the text label to turn
it into a running number that reflects the number of the keyframe on the it into a running number that reflects the number of the keyframe on the
timeline. We select the text label in the \uicontrol Navigator, and then timeline. We select the text label in \uicontrol Navigator and then
select \uicontrol Properties > \uicontrol Text > \uicontrol {Set Binding} select \uicontrol Properties > \uicontrol Text > \uicontrol {Set Binding}
to open the \uicontrol {Binding Editor}. We set to open the \uicontrol {Binding Editor}. We set
\c {Math.round(root.progress)} as the value of the text label. \c {Math.round(root.progress)} as the value of the text label.
@@ -190,7 +190,7 @@
We can now add timelines for each progress bar instance, with different We can now add timelines for each progress bar instance, with different
settings. We select the \inlineimage plus.png settings. We select the \inlineimage plus.png
button to add a 4000-frame timeline to the first progress bar instance button to add a 4000-frame timeline to the first progress bar instance
(\e root). We select the \uicontrol Continuous check box, so that the (\e root). We select the \uicontrol Continuous check box so that the
animation will loop. animation will loop.
In \uicontrol Properties > \uicontrol Root, we can see the In \uicontrol Properties > \uicontrol Root, we can see the

53
doc/qtdesignstudio/examples/doc/sidemenu.qdoc
View File

@@ -1,6 +1,6 @@
/**************************************************************************** /****************************************************************************
** **
** Copyright (C) 2020 The Qt Company Ltd. ** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/ ** Contact: https://www.qt.io/licensing/
** **
** This file is part of the Qt Design Studio documentation. ** This file is part of the Qt Design Studio documentation.
@@ -50,17 +50,17 @@
The button can have the following states: checked, hover, pressed, and The button can have the following states: checked, hover, pressed, and
normal. We construct the button using different images for the button normal. We construct the button using different images for the button
background, frame, and front. We then add states in the \uicontrol States background, frame, and front. We then add \l{Adding States}{states} in
view for each of the button states. In each state, we turn the visibility the \l States view for each of the button states. In each state, we turn
of the appropriate images on or off in the button properties, to change the visibility of the appropriate images on or off in the button properties,
the appearance of the button. to change the appearance of the button.
\image sidemenu-custombutton-states.png "CustomButton QML type states" \image sidemenu-custombutton-states.png "CustomButton component states"
To change the button text when the button state changes, we bind the To change the button text when the button state changes, we bind the
text property to the state of the button in the \uicontrol Properties view. text property to the state of the button in the \l Properties view.
When \e control is selected in the \uicontrol Navigator, we select the When \e control is selected in the \l Navigator, we select the
\uicontrol Settings menu for the \uicontrol Text property, and then select \uicontrol Actions menu for the \uicontrol Text property, and then select
\uicontrol {Set Binding}. In the \uicontrol {Binding Editor}, we set the \uicontrol {Set Binding}. In the \uicontrol {Binding Editor}, we set the
binding to \c control.state. binding to \c control.state.
@@ -69,7 +69,7 @@
We want the buttons to be checkable, so we set the We want the buttons to be checkable, so we set the
\l {AbstractButton::}{checkable} property to \c true. \l {AbstractButton::}{checkable} property to \c true.
We now select \uicontrol {Set when Condition} in the \uicontrol Settings menu We now select \uicontrol {Set when Condition} in the \uicontrol Actions menu
for the states to bind the properties to the states using \c when for the states to bind the properties to the states using \c when
conditions. First, we specify that a button instance enters the \e checked conditions. First, we specify that a button instance enters the \e checked
state when the \l {AbstractButton::}{checked} property is set to \c true. state when the \l {AbstractButton::}{checked} property is set to \c true.
@@ -99,11 +99,10 @@
\section1 Constructing a Menu Bar \section1 Constructing a Menu Bar
We construct the menu bar in the \e {MainFile.ui.qml} file using the We construct the menu bar in the \e {MainFile.ui.qml} file using the
\uicontrol {Form Editor}. The CustomButton type is listed in \l {Form Editor}. The CustomButton component is listed in
\uicontrol Library > \uicontrol {QML Types} > \l Library > \uicontrol Components > \uicontrol {My Components}.
\uicontrol {My QML Components}. We drag and drop several instances of We drag and drop several instances of the component to the \l {Form Editor}
the type to the \uicontrol {Form Editor} and enclose them in a RowLayout and enclose them in a RowLayout component to lay them out as a menu bar.
type to lay them out as a menu bar.
\image sidemenu-menubar.png \image sidemenu-menubar.png
@@ -126,10 +125,10 @@
click the burger menu. In the \uicontrol {Form Editor}, we use the click the burger menu. In the \uicontrol {Form Editor}, we use the
\l Text and \l {slider-control}{Slider} components to create separate \l Text and \l {slider-control}{Slider} components to create separate
submenus for each set of effects we want to apply to the images. We use submenus for each set of effects we want to apply to the images. We use
a background image for the menu background and a BurgerMenu custom QML a background image for the menu background and a BurgerMenu custom
type for the burger menu icon. component for the burger menu icon.
\image sidemenu-ui.png "SliderMenu type" \image sidemenu-ui.png "SliderMenu component"
We add states to the \e {SideMenu.qml} file in the \uicontrol {Form Editor}. We add states to the \e {SideMenu.qml} file in the \uicontrol {Form Editor}.
When the application starts, the side menu is in the \e closed state, which When the application starts, the side menu is in the \e closed state, which
@@ -148,7 +147,7 @@
\image sidemenu-states.png "Side menu states" \image sidemenu-states.png "Side menu states"
We then select the \inlineimage plus.png We then select the \inlineimage plus.png
button in the \uicontrol Timeline view to add animation button in the \l Timeline view to add animation
for transitions to the \e open and \e close states: for transitions to the \e open and \e close states:
\image sidemenu-timeline-settings.png "Side menu timeline settings" \image sidemenu-timeline-settings.png "Side menu timeline settings"
@@ -182,7 +181,7 @@
We select \inlineimage animation.png "Timeline Settings button" We select \inlineimage animation.png "Timeline Settings button"
to open the \uicontrol {Timeline Settings} dialog. In the to open the \uicontrol {Timeline Settings} dialog. In the
\uicontrol {Transitions to states} field, we select the state to \uicontrol {Transitions to states} field, we select the state to
switch to when the animation finishes. In the lower part of the apply when the animation finishes. In the lower part of the
dialog, we bind the states that don't have animations to fixed frames. dialog, we bind the states that don't have animations to fixed frames.
For more information about using the timeline, see \l {Creating Animations}. For more information about using the timeline, see \l {Creating Animations}.
@@ -192,7 +191,7 @@
In \e {SideMenu.qml}, we use connections to bind the action of clicking In \e {SideMenu.qml}, we use connections to bind the action of clicking
the burger menu to the signal handler for triggering the opening or the burger menu to the signal handler for triggering the opening or
closing animation, depending on the current state. We create the connections closing animation, depending on the current state. We create the connections
in the \uicontrol Connections view. in the \l Connections view.
\image sidemenu-connections.png \image sidemenu-connections.png
@@ -211,13 +210,14 @@
\section1 Applying Effects \section1 Applying Effects
We nest the effects in an effects stack and bind them to the We nest the effects in an effects stack and bind them to the
\l {slider-control}{Slider} type instances. The effects apply \l {slider-control}{Slider} component instances. The effects apply
to all the images in the example application, not just the to all the images in the example application, not just the
currently open one. currently open one.
We use property bindings to connect the controls in the slider menu to We use property bindings to connect the controls in the slider menu to
\l {2D Effects}{graphical effects}. To have access to the \l {2D Effects}{graphical effects}. To have access to the
properties from all the slider type instances, we export them as aliases properties from all the slider component instances, we export them as
in \e SliderMenu.ui.qml. We select \uicontrol {Export Property as Alias} in \e SliderMenu.ui.qml. We select \uicontrol {Export Property as Alias}
in the \uicontrol Settings menu of the \uicontrol Value property in in the \uicontrol Settings menu of the \uicontrol Value property in
\uicontrol Properties > \uicontrol Slider. \uicontrol Properties > \uicontrol Slider.
@@ -227,9 +227,10 @@
\image sidemenu-effects-stack.png "Effects stack in the Navigator" \image sidemenu-effects-stack.png "Effects stack in the Navigator"
We use the \l {Images}{Image} type as the last item in the stack to display We use the \l {Images}{Image} component as the last item in the stack to
images that we apply the effects to. We export the image source property as display images that we apply the effects to. We export the image source
an alias to be able to switch the image inside the stack. property as an \l{Adding Property Aliases}{alias} to be able to switch
the image inside the stack.
For more information about the available graphical effects, see For more information about the available graphical effects, see
\l {2D Effects}. \l {2D Effects}.

28
doc/qtdesignstudio/examples/doc/washingMachineUI.qdoc
View File

@@ -48,26 +48,26 @@
Users select buttons to navigate between the screens. Users select buttons to navigate between the screens.
We use \l{Connecting Components to Signals}{connections} to determine which We use \l{Connecting Components to Signals}{connections} to determine which
screen to open when users select a particular button and \l{Adding States} screen to open when users select a particular button and \l{Adding States}
{States} to show the screens. We use the \l{Creating Animations}{timeline} {states} to show the screens. We use the \l{Creating Animations}{timeline}
to create progress indicators for buttons and the \e Running screen. to create progress indicators for buttons and the \e Running screen.
In addition, all screens contain a small clock component that displays In addition, all screens contain a small clock component that displays
the current time. We implement a \e TimeDate JavaScript component to the current time. We implement a \e TimeDate JavaScript object to
support this feature on \l{https://doc.qt.io/QtForMCUs/qtul-qmltypes.html} support this feature on \l{https://doc.qt.io/QtForMCUs/qtul-qmltypes.html}
{Qt for MCUs}, which does not support the \l Date QML type at the time of {Qt for MCUs}, which does not support the \l Date component at the time of
writing. writing.
\section1 Creating an Application for MCUs \section1 Creating an Application for MCUs
We use the \uicontrol {Qt for MCUs Application} project template to create We use the \uicontrol {Qt for MCUs Application} project template to create
an application for MCUs, which support only a subset of the \l{Qt QML}, an application for MCUs, which support only a subset of the preset
\l {Qt Quick}, and \l{Qt Quick Controls} types. We select \uicontrol File > \l{glossary-component}{components}. We select \uicontrol File >
\uicontrol {New File or Project} > \uicontrol {Qt for MCUs Application} > \uicontrol {New File or Project} > \uicontrol {Qt for MCUs Application} >
\uicontrol Choose, and follow the instructions of the wizard to create our \uicontrol Choose, and follow the instructions of the wizard to create our
project. project.
This way, only the components and properties supported on MCUs are visible This way, only the components and properties supported on MCUs are visible
in \uicontrol Library and \uicontrol Properties, and we won't accidentally in \l Library and \l Properties, and we won't accidentally
add unsupported components to our UI or specify unsupported properties for add unsupported components to our UI or specify unsupported properties for
supported components. For more information, see \l{Creating Projects}. supported components. For more information, see \l{Creating Projects}.
@@ -84,10 +84,10 @@
For this example, we used an external tool to design the UI and then For this example, we used an external tool to design the UI and then
exported and imported our design into \QDS as assets and components exported and imported our design into \QDS as assets and components
using \QB, as instructed in \l{Exporting from Design Tools}. While using \QB, as instructed in \l{Exporting from Design Tools}. While
exporting, we only picked QML types supported by Qt for MCUs to use exporting, we only picked components supported by Qt for MCUs to use
for our components. For the button components, we mostly use the for our components. For the button components, we mostly use the
\l {basic-image}{Image}, \l Text, and \l {Mouse Area} types. For the \l {basic-image}{Image}, \l Text, and \l {Mouse Area} components. For the
screen background, we use the \l {basic-rectangle}{Rectangle} type. screen background, we use the \l {basic-rectangle}{Rectangle} component.
The text might look different on the desktop and MCUs, because on the The text might look different on the desktop and MCUs, because on the
desktop we use dynamic font loading, whereas on MCUs fonts are compiled desktop we use dynamic font loading, whereas on MCUs fonts are compiled
@@ -128,7 +128,7 @@
We animate the rotation properties of the arc segments to rotate each of We animate the rotation properties of the arc segments to rotate each of
them into the next block, one after another. them into the next block, one after another.
We use this component instead of the \l Arc type, which is not supported We use this component instead of the \l Arc component, which is not supported
on MCUs. on MCUs.
We can now add a timeline animation to make the arc move around the button We can now add a timeline animation to make the arc move around the button
@@ -199,10 +199,10 @@
\section1 Connecting Buttons to State Changes \section1 Connecting Buttons to State Changes
In each file that defines a screen, we connect signals to the In each file that defines a screen, we connect signals to the
button objects to change to a particular state when users select button components to change to a particular state when users select
buttons. buttons.
Some signals are predefined for the \l {Mouse Area} type, some we have to Some signals are predefined for the \l {Mouse Area} component, some we have to
add ourselves. For example, let's look at the start button that we use add ourselves. For example, let's look at the start button that we use
in \e StartScreen.ui.qml. First, we use the \uicontrol {Text Editor} view in \e StartScreen.ui.qml. First, we use the \uicontrol {Text Editor} view
to create the \c startClicked signal: to create the \c startClicked signal:
@@ -231,14 +231,14 @@
which overrides \c when conditions. Otherwise, we could just select the which overrides \c when conditions. Otherwise, we could just select the
action to change to the state that we want in the \uicontrol Action field. action to change to the state that we want in the \uicontrol Action field.
We create similar connections between button objects and signals in the We create similar connections between button components and signals in the
other screens to apply other actions that move users to other screens. other screens to apply other actions that move users to other screens.
For more information, see \l {Connecting Components to Signals}. For more information, see \l {Connecting Components to Signals}.
\section1 Showing the Current Time \section1 Showing the Current Time
The \l Date QML type is not supported on Qt for MCUs, and the The \l Date component is not supported on Qt for MCUs, and the
\l{https://doc.qt.io/QtForMCUs/qtul-javascript-environment.html} \l{https://doc.qt.io/QtForMCUs/qtul-javascript-environment.html}
{implementation of the JavaScript \c Date()} object returns elapsed {implementation of the JavaScript \c Date()} object returns elapsed
time since when the application was started instead of the current time since when the application was started instead of the current

34
doc/qtdesignstudio/examples/doc/webinardemo.qdoc
View File

@@ -1,6 +1,6 @@
/**************************************************************************** /****************************************************************************
** **
** Copyright (C) 2020 The Qt Company Ltd. ** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/ ** Contact: https://www.qt.io/licensing/
** **
** This file is part of the Qt Design Studio documentation. ** This file is part of the Qt Design Studio documentation.
@@ -42,7 +42,7 @@
\section1 Exporting from Adobe Photoshop \section1 Exporting from Adobe Photoshop
We use Adobe Photoshop to design our application and \QB to export our We use Adobe Photoshop to design our application and \QB to export our
design to \QDS as PNG images and custom QML types. design to \QDS as PNG images and custom components.
Before we can begin, we must set up \QB as instructed in Before we can begin, we must set up \QB as instructed in
\l{Exporting Designs from Adobe Photoshop}. \l{Exporting Designs from Adobe Photoshop}.
@@ -63,10 +63,10 @@
will be exported as PNG files, with references to them in the component file will be exported as PNG files, with references to them in the component file
that contains them. that contains them.
We can export some components as QML types that provide the functionality We can export some components as components that provide the functionality
that we want. To use the types in \QDS, we need to add import statements that we want. To use the components in \QDS, we need to add import statements
that pull in the modules that contain the types. We can even specify that pull in the modules that contain the components. We can even specify
properties for the types to export, so that we won't have to do that in properties for the components to export, so that we won't have to do that in
\QDS. \QDS.
\section2 Creating a Reference Image \section2 Creating a Reference Image
@@ -94,12 +94,12 @@
\image webinardemo-qb-stacklayout.png "Settings for exporting stackLayout artboard" \image webinardemo-qb-stacklayout.png "Settings for exporting stackLayout artboard"
For the stackLayoutFrame layer, we want to use a \l StackLayout QML type, For the stackLayoutFrame layer, we want to use a \l StackLayout component,
which provides a stack of items where only one item is visible at a time. which provides a stack of items where only one item is visible at a time.
In the \uicontrol {QML Type} field, we enter \e StackLayout. In the \uicontrol {QML Type} field, we enter \e StackLayout.
To be able to use the type, we enter the statement that imports the To be able to use the component, we enter the statement that imports the
Qt Quick Layouts module, which contains the type, in the Qt Quick Layouts module, which contains the component, in the
\uicontrol {Add Imports} field: \c {QtQuick.Layouts 1.3}. \uicontrol {Add Imports} field: \c {QtQuick.Layouts 1.3}.
We will add content to the stack layout in \QDS. We will add content to the stack layout in \QDS.
@@ -110,10 +110,10 @@
We want to apply the \l {FastBlur} effect to the smallPopup UI control. We want to apply the \l {FastBlur} effect to the smallPopup UI control.
In the artboard, we have a blurEffect layer that we want to export as a In the artboard, we have a blurEffect layer that we want to export as a
FastBlurItem QML type. In the \uicontrol {QML Type} field, we enter FastBlurItem component. In the \uicontrol {QML Type} field, we enter
\e FastBlurItem. \e FastBlurItem.
To be able to use the type, we added the statement that imports the To be able to use the component, we added the statement that imports the
Qt Quick Studio Effects module: \c {QtQuick.Studio.Effects 1.0}. Qt Quick Studio Effects module: \c {QtQuick.Studio.Effects 1.0}.
We specify that the component to which we want to apply the effect is a We specify that the component to which we want to apply the effect is a
@@ -121,7 +121,7 @@
in the \uicontrol {QML Properties} field. We can modify the property in in the \uicontrol {QML Properties} field. We can modify the property in
the \uicontrol Radius field in the \uicontrol Properties view in \QDS. the \uicontrol Radius field in the \uicontrol Properties view in \QDS.
\image webinardemo-blureffect.png "FastBlurItem QML item in Design mode" \image webinardemo-blureffect.png "FastBlurItem component in Design mode"
\section2 Creating a Menu with Reusable Buttons \section2 Creating a Menu with Reusable Buttons
@@ -159,12 +159,12 @@
\section1 Using Imported Components \section1 Using Imported Components
The \e {LayoutReference.ui.qml} file contains a reference image of the The \e {LayoutReference.ui.qml} file contains a reference image of
UI we will create. We use the imported components to create the the UI we will create. We use the imported components to create the
UI in the \e {MainApp.ui.qml} file. The imported components are UI in the \e {MainApp.ui.qml} file. The imported components are
listed in \uicontrol Library > \uicontrol {QML Types} > listed in \uicontrol Library > \uicontrol Components >
\uicontrol {My QML Components}, and we can drag and drop them to the \uicontrol {My Components}, and we can drag and drop them to the
\uicontrol {Form Editor}. \l {Form Editor}.
\image webinardemo-mainappui.png "Main app UI in Design mode" \image webinardemo-mainappui.png "Main app UI in Design mode"

BIN
doc/qtdesignstudio/images/studio-2d-effects.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 16 KiB

2
doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc
View File

@@ -124,7 +124,7 @@
layer into. The component that is generated during import will be layer into. The component that is generated during import will be
of this type. For example, if you drew a rectangle, you can export of this type. For example, if you drew a rectangle, you can export
it as a \l Rectangle component. You can provide the it as a \l Rectangle component. You can provide the
\l{Learn Qt Quick - QML Types}{import statement} of the component \l{Learn More - Components}{import statement} of the component
set where the component is defined in the \uicontrol {Imports} field. set where the component is defined in the \uicontrol {Imports} field.
\row \row
\li \uicontrol Properties \li \uicontrol Properties

8
doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc
View File

@@ -1,6 +1,6 @@
/**************************************************************************** /****************************************************************************
** **
** Copyright (C) 2018 The Qt Company Ltd. ** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/ ** Contact: https://www.qt.io/licensing/
** **
** This file is part of the Design Studio documentation. ** This file is part of the Design Studio documentation.
@@ -60,7 +60,7 @@
\li In the File Explorer, create a new folder for the mock data \li In the File Explorer, create a new folder for the mock data
inside the \e imports folder in your project folder (for example, \e Data). inside the \e imports folder in your project folder (for example, \e Data).
\note Make sure to capitalize the \e Data folder name, because you \note Make sure to capitalize the \e Data folder name, because you
will need to import it as a QML type later, and QML type names must will need to import it as a component later, and component names must
be capitalized. be capitalized.
\note If you place this folder somewhere else in the project, you will \note If you place this folder somewhere else in the project, you will
need to add the path to the list of imports. To do this, in \QDS, open need to add the path to the list of imports. To do this, in \QDS, open
@@ -79,7 +79,7 @@
in the data folder. In these instructions, the file is called in the data folder. In these instructions, the file is called
\e Values.qml. \e Values.qml.
\note Make sure to capitalize the filename, because it will become \note Make sure to capitalize the filename, because it will become
a custom QML type. a custom component.
\li Select \uicontrol File > \uicontrol {New File or Project} > \li Select \uicontrol File > \uicontrol {New File or Project} >
\uicontrol {Files and Classes} > \uicontrol {JavaScript} > \uicontrol {Files and Classes} > \uicontrol {JavaScript} >
\uicontrol {JavaScript File} > \uicontrol Choose to create a \uicontrol {JavaScript File} > \uicontrol Choose to create a
@@ -120,7 +120,7 @@
} }
\endcode \endcode
\li Add the following code to use a \l Timer type to specify a range of \li Add the following code to use a \l Timer component to specify a range of
values for the property: values for the property:
\code \code
property Timer name1Timer: Timer{ property Timer name1Timer: Timer{

30
doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc
View File

@@ -1,6 +1,6 @@
/**************************************************************************** /****************************************************************************
** **
** Copyright (C) 2020 The Qt Company Ltd. ** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/ ** Contact: https://www.qt.io/licensing/
** **
** This file is part of the Qt Design Studio documentation. ** This file is part of the Qt Design Studio documentation.
@@ -43,8 +43,8 @@
to enter the settings needed for that particular type of project and create to enter the settings needed for that particular type of project and create
the necessary files for you. the necessary files for you.
Studio projects are useful for creating UIs. You cannot use \QDS projects are useful for creating UIs. You cannot use them for
them for application development, because they do not contain: application development, because they do not contain:
\list \list
\li C++ code \li C++ code
@@ -52,7 +52,7 @@
\li Code needed for deploying applications to devices. \li Code needed for deploying applications to devices.
\endlist \endlist
Because the UIs do not contain any C++ code, you do not need Because the projects do not contain any C++ code, you do not need
to build them. To test how well your designs work, you can preview the to build them. To test how well your designs work, you can preview the
UIs on the desktop or embedded Linux devices. For more UIs on the desktop or embedded Linux devices. For more
information, see \l{Previewing}. information, see \l{Previewing}.
@@ -64,20 +64,18 @@
\list \list
\li \uicontrol {Qt for MCUs Application} creates an application that \li \uicontrol {Qt for MCUs Application} creates an application that
uses a subset of \l{Qt QML} and \l{Qt Quick Controls} types (as uses a subset of preset components (as supported by Qt for MCUs)
supported by Qt for MCUs) that you can deploy, run, and debug on that you can deploy, run, and debug on MCU boards.
MCU boards. \li \uicontrol {Qt Quick Application - Empty} creates a project that
\li \uicontrol {Qt Quick Application - Empty} creates a Qt Quick UI uses default components and can be run on all target platforms.
project that uses \l{Qt Quick} types and can be run on all target \li \uicontrol {Qt Quick 3D Application} creates a project that uses
platforms. default and 3D components.
\li \uicontrol {Qt Quick 3D Application} creates a Qt Quick UI project
that uses Qt Quick and \l{Qt Quick 3D} types.
\li \uicontrol {Qt Quick Application - Scroll} and \li \uicontrol {Qt Quick Application - Scroll} and
\uicontrol {Qt Quick Application - Stack} create a Qt Quick \uicontrol {Qt Quick Application - Stack} create an application
application that uses Qt Quick Controls to implement a scrollable that uses preset UI controls to implement a scrollable
list or a set of pages with a stack-based navigation model. list or a set of pages with a stack-based navigation model.
\li \uicontrol {Qt Quick Application - Launcher} creates a Qt Quick UI \li \uicontrol {Qt Quick Application - Launcher} creates a
project that uses Qt Quick types and defines a QML laucher project that uses default components and defines a launcher
application. application.
\endlist \endlist

2
doc/qtdesignstudio/src/qtquickdesigner-components/qtdesignstudio-logic-helpers.qdoc
View File

@@ -162,7 +162,7 @@
For example, to use a \l Text component to display the value of a For example, to use a \l Text component to display the value of a
slider, we drag-and-drop \uicontrol Text, \uicontrol Slider, and slider, we drag-and-drop \uicontrol Text, \uicontrol Slider, and
\uicontrol {String Mapper} components to the same parent item. Then \uicontrol {String Mapper} components to the same parent component. Then
we select \uicontrol {String Mapper} in \uicontrol Navigator to display we select \uicontrol {String Mapper} in \uicontrol Navigator to display
its properties in \uicontrol Properties. There we bind the value of the its properties in \uicontrol Properties. There we bind the value of the
\c input property of the string mapper to the value of the \c value \c input property of the string mapper to the value of the \c value

59
doc/qtdesignstudio/src/qtquickdesigner-components/qtdesignstudio-visual-effects.qdoc
View File

@@ -1,6 +1,6 @@
/**************************************************************************** /****************************************************************************
** **
** Copyright (C) 2020 The Qt Company Ltd. ** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/ ** Contact: https://www.qt.io/licensing/
** **
** This file is part of the Qt Design Studio documentation. ** This file is part of the Qt Design Studio documentation.
@@ -30,24 +30,23 @@
\title 2D Effects \title 2D Effects
\QDS provides a set of Qt Quick Studio effects that inherit the types in the \QDS provides a set of effects that you can apply to components by
\l {Qt Graphical Effects} module. To apply a visual effect to a component, dragging-and-dropping them from \l Library > \uicontrol Components
drag-and-drop it from \uicontrol Library > \uicontrol Effects to the > \uicontrol {Qt Quick Studio Effects} to the component in \l Navigator.
component in \uicontrol Navigator.
\image studio-2d-effects.png "Effects tab in Library" \image studio-2d-effects.png "Effects tab in Library"
Effects have one or more source properties for specifying the visual input Effects have one or more source properties for specifying the visual input
for which the effect is applied to an item. The altered visual output is for which the effect is applied to a component. The altered visual output is
then presented in the effect item itself. The source can be another, often then presented in the effect component itself. The source can be another,
hidden, item in the QML scene. More complex effects can have multiple often hidden, component in the scene. More complex effects can have multiple
sources. The source item type can be any QML type, even video or another sources. The source component can be any component, even video or another
effect. Pipelining multiple effects together is a simple way to create effect. Pipelining multiple effects together is a simple way to create
even more impressive output. even more impressive output.
Each effect has a set of properties that can be used to configure the effect Each effect has a set of properties that can be used to configure the effect
output. Properties can be animated just like any other QML properties. The output. They can be animated just like any other properties. The
QML type documentation contains property descriptions and basic usage component documentation contains property descriptions and basic usage
examples. examples.
In addition to the effects described in this topic, you can set linear, In addition to the effects described in this topic, you can set linear,
@@ -64,29 +63,29 @@
cache when the source or the effect properties are animated. cache when the source or the effect properties are animated.
The \uicontrol {Transparent border} property determines the blur behavior The \uicontrol {Transparent border} property determines the blur behavior
near the edges of the item, where the pixel blurring is affected by near the edges of the component, where the pixel blurring is affected by
the pixels outside the source edges. the pixels outside the source edges.
If the property is set to \c true, the pixels outside the source are If the property is set to \c true, the pixels outside the source are
interpreted as being transparent, which is similar to OpenGL clamp-to-border interpreted as being transparent, which is similar to OpenGL clamp-to-border
extension. The blur is expanded slightly outside the effect item area. extension. The blur is expanded slightly outside the effect component area.
If the property is set to \c false, the pixels outside the source are If the property is set to \c false, the pixels outside the source are
interpreted as containing the same color as the pixels at the edge of interpreted as containing the same color as the pixels at the edge of
the item, which is similar to OpenGL clamp-to-edge behavior. The blur the component, which is similar to OpenGL clamp-to-edge behavior. The blur
does not expand outside the effect item area. does not expand outside the effect component area.
\section1 Summary of 2D Effects \section1 Summary of 2D Effects
The following table summarizes the available effects and contains links to The following table summarizes the available effects and contains links to
the documentation of the inherited QML type. the developer documentation of the inherited component.
\note The effects are available when running with OpenGL. \note The effects are available when running with OpenGL.
\table \table
\header \header
\li Icon \li Icon
\li Qt Quick Studio Effect \li Effect
\li Description \li Description
\row \row
\li \inlineimage icons/blend-mode-16px.png \li \inlineimage icons/blend-mode-16px.png
@@ -122,13 +121,13 @@
\uicontrol Desaturation field. The value ranges from \c 0.0 \uicontrol Desaturation field. The value ranges from \c 0.0
(no change) to \c 1.0 (desaturated). Desaturated pixel values are (no change) to \c 1.0 (desaturated). Desaturated pixel values are
calculated as averages of the original RGB component values calculated as averages of the original RGB component values
of the source item. of the source component.
\row \row
\li \inlineimage icons/directional-blur-16px.png \li \inlineimage icons/directional-blur-16px.png
\li \l {DirectionalBlur}{Directional Blur} \li \l {DirectionalBlur}{Directional Blur}
\li Applies a blur effect to the specified direction. The value of the \li Applies a blur effect to the specified direction. The value of the
\uicontrol Angle field, defines the direction of the blur. This \uicontrol Angle field, defines the direction of the blur. This
effect makes the source item appear to be moving in the direction of effect makes the source component appear to be moving in the direction of
the blur. Blur is applied to both sides of each pixel, and therefore the blur. Blur is applied to both sides of each pixel, and therefore
setting the direction to \c 0 and \c 180 provides the same result. setting the direction to \c 0 and \c 180 provides the same result.
@@ -142,7 +141,7 @@
\row \row
\li \inlineimage icons/displace-16px.png \li \inlineimage icons/displace-16px.png
\li \l Displace \li \l Displace
\li Moves the pixels of the source item according to the displacement \li Moves the pixels of the source component according to the displacement
map specified in the \uicontrol {Displacement source} field. map specified in the \uicontrol {Displacement source} field.
The value of the \uicontrol Displacement field specifies the The value of the \uicontrol Displacement field specifies the
@@ -156,7 +155,7 @@
\li \l {DropShadow}{Drop Shadow} \li \l {DropShadow}{Drop Shadow}
\li Generates a soft shadow behind the source component using a \li Generates a soft shadow behind the source component using a
gaussian blur. This effect blurs the alpha channel of the input and gaussian blur. This effect blurs the alpha channel of the input and
colorizes the result, which it then places behind the source object colorizes the result, which it then places behind the source component
to create a soft shadow. You can set the shadow's color in the to create a soft shadow. You can set the shadow's color in the
\uicontrol {Drop Shadow Color} field and change its location in the \uicontrol {Drop Shadow Color} field and change its location in the
\uicontrol {Horizontal offset} and \uicontrol {Vertical offset} \uicontrol {Horizontal offset} and \uicontrol {Vertical offset}
@@ -192,7 +191,7 @@
\row \row
\li \inlineimage icons/gamma-adjust-16px.png \li \inlineimage icons/gamma-adjust-16px.png
\li \l [QML] {GammaAdjust}{Gamma Adjust} \li \l [QML] {GammaAdjust}{Gamma Adjust}
\li Alters the luminance of the source item. This effect is applied \li Alters the luminance of the source component. This effect is applied
to each pixel according to the curve that is pre-defined as a to each pixel according to the curve that is pre-defined as a
power-law expression, where the value of the \uicontrol Gamma power-law expression, where the value of the \uicontrol Gamma
field is used as the reciprocal scaling exponent. field is used as the reciprocal scaling exponent.
@@ -223,7 +222,7 @@
\li Generates a halo-like glow around the source component. This effect \li Generates a halo-like glow around the source component. This effect
blurs the alpha channel of the source and colorizes it with blurs the alpha channel of the source and colorizes it with
\uicontrol {Glow color}. It then places the alpha channel behind the \uicontrol {Glow color}. It then places the alpha channel behind the
source, resulting in a halo or glow around the object. The quality source, resulting in a halo or glow around the component. The quality
of the blurred edge can be controlled by using the values of the of the blurred edge can be controlled by using the values of the
\uicontrol Samples and \uicontrol Radius and the strength of the \uicontrol Samples and \uicontrol Radius and the strength of the
glow can be changed using the value of the \uicontrol Spread field. glow can be changed using the value of the \uicontrol Spread field.
@@ -261,8 +260,8 @@
\li \inlineimage icons/levels-16px.png \li \inlineimage icons/levels-16px.png
\li \l {LevelAdjust}{Level Adjust} \li \l {LevelAdjust}{Level Adjust}
\li Adjusts color levels in the RGBA color space. This effect adjusts \li Adjusts color levels in the RGBA color space. This effect adjusts
the source item colors separately for each color channel. Source the source component colors separately for each color channel. Source
item contrast can be adjusted and color balance altered. component contrast can be adjusted and color balance altered.
The value of the \uicontrol Gamma field specifies the change factor The value of the \uicontrol Gamma field specifies the change factor
for how the value of each pixel color channel is altered according for how the value of each pixel color channel is altered according
@@ -303,9 +302,9 @@
\li \inlineimage icons/opacity-mask-16px.png \li \inlineimage icons/opacity-mask-16px.png
\li \l {OpacityMask}{Opacity Mask} \li \l {OpacityMask}{Opacity Mask}
\li Masks the source component with another component specified in the \li Masks the source component with another component specified in the
\uicontrol {Mask source} field. The mask item gets rendered into an \uicontrol {Mask source} field. The mask component gets rendered into an
intermediate pixel buffer and the alpha values from the result are intermediate pixel buffer and the alpha values from the result are
used to determine the visibility of the source item's pixels in the used to determine the visibility of the source component's pixels in the
display. display.
Select the \uicontrol Invert check box to specify that the Select the \uicontrol Invert check box to specify that the
@@ -317,7 +316,7 @@
\li \inlineimage icons/radial-blur-16px.png \li \inlineimage icons/radial-blur-16px.png
\li \l {RadialBlur}{Radial Blur} \li \l {RadialBlur}{Radial Blur}
\li Applies a directional blur effect in a circular direction around the \li Applies a directional blur effect in a circular direction around the
component's center point. This effect makes the source item appear component's center point. This effect makes the source component appear
to be rotating into the direction of the blur. Other available to be rotating into the direction of the blur. Other available
motionblur effects are \uicontrol {Zoom Blur} and motionblur effects are \uicontrol {Zoom Blur} and
\uicontrol {Directional Blur}. \uicontrol {Directional Blur}.
@@ -345,7 +344,7 @@
\row \row
\li \inlineimage icons/threshold-16px.png \li \inlineimage icons/threshold-16px.png
\li \l {ThresholdMask}{Threshold Mask} \li \l {ThresholdMask}{Threshold Mask}
\li Masks the source item with another item specified by \li Masks the source component with another component specified by
\uicontrol {Mask source}. The value of the \uicontrol Spread \uicontrol {Mask source}. The value of the \uicontrol Spread
field determines the smoothness of the mask edges near the field determines the smoothness of the mask edges near the
\uicontrol Threshold alpha value. Setting spread to \c 0.0 uses \uicontrol Threshold alpha value. Setting spread to \c 0.0 uses
@@ -356,7 +355,7 @@
\li \inlineimage icons/zoom-blur-16px.png \li \inlineimage icons/zoom-blur-16px.png
\li \l {ZoomBlur}{Zoom Blur} \li \l {ZoomBlur}{Zoom Blur}
\li Applies a directional blur effect towards source component's \li Applies a directional blur effect towards source component's
center point. This effect makes the source item appear to be center point. This effect makes the source component appear to be
moving towards the center point in Z-direction or the camera moving towards the center point in Z-direction or the camera
appear to be zooming rapidly. appear to be zooming rapidly.