forked from qt-creator/qt-creator
271c6cf6db
Change-Id: I9f816084e24d887a6fca5abb3689347156a26558 Reviewed-by: Tim Jenssen <tim.jenssen@theqtcompany.com>
133 lines
4.7 KiB
Plaintext
133 lines
4.7 KiB
Plaintext
/****************************************************************************
|
|
**
|
|
** Copyright (C) 2015 The Qt Company Ltd.
|
|
** Contact: http://www.qt.io/licensing
|
|
**
|
|
** This file is part of Qt Creator
|
|
**
|
|
**
|
|
** GNU Free Documentation License
|
|
**
|
|
** Alternatively, this file may be used under the terms of the GNU Free
|
|
** Documentation License version 1.3 as published by the Free Software
|
|
** Foundation and appearing in the file included in the packaging of this
|
|
** file.
|
|
**
|
|
**
|
|
****************************************************************************/
|
|
|
|
// **********************************************************************
|
|
// NOTE: the sections are not ordered by their logical order to avoid
|
|
// reshuffling the file each time the index order changes (i.e., often).
|
|
// Run the fixnavi.pl script to adjust the links to the index order.
|
|
// **********************************************************************
|
|
|
|
/*!
|
|
|
|
\contentspage {Qt Creator Manual}
|
|
\previouspage creator-using-qt-quick-designer.html
|
|
\page quick-components.html
|
|
\nextpage quick-buttons.html
|
|
|
|
\title Creating Components
|
|
|
|
A \l{glossary-component}{component} provides a way of defining a new visual item
|
|
that you can re-use in other QML files. A component is like a black box; it
|
|
interacts with the outside world through properties, signals, and slots, and
|
|
is generally defined in its own QML file. You can import components to
|
|
screens and applications.
|
|
|
|
You can use the following QML types to create components:
|
|
|
|
\list
|
|
|
|
\li \l{BorderImage} uses an image as a border or background.
|
|
|
|
\li \l{Image}
|
|
adds a bitmap to the scene. You can stretch and tile images.
|
|
|
|
\li \l{Item}
|
|
is the most basic of all visual types in QML. Even though it has no
|
|
visual appearance, it defines all the properties that are common
|
|
across visual types, such as the x and y position, width and height,
|
|
anchoring, and key handling.
|
|
|
|
\li \l{Rectangle}
|
|
adds a rectangle that is painted with a solid fill color and an
|
|
optional border. You can also use the radius property to create
|
|
rounded rectangles.
|
|
|
|
\li \l{Text} adds formatted read-only text.
|
|
|
|
\li \l{TextEdit}
|
|
adds a single line of editable formatted text that can be validated.
|
|
|
|
\li \l{TextInput}
|
|
adds a single line of editable plain text that can be validated.
|
|
|
|
\omit
|
|
\li \l{WebView} adds web content to a canvas.
|
|
\endomit
|
|
|
|
\endlist
|
|
|
|
You can also use ready-made Qt Quick 1 Components (for Qt 4) to create
|
|
screens with a native look and feel for a particular target platform.
|
|
Since Qt 5.1, Qt Quick Controls, Dialogs, and Layouts are available for
|
|
creating classic desktop-style user interfaces using Qt Quick 2.1. You can
|
|
use the Qt Quick Controls Styles to customize Qt Quick Controls.
|
|
|
|
Some ready-made controls, such as a gauge, dial, status indicator, and
|
|
tumbler, are provided by the \l {Qt Quick Extras} module.
|
|
|
|
The \QC project wizards create Qt Quick applications that use Qt Quick
|
|
Components or Controls.
|
|
|
|
Even if you use the Qt Quick Components, you can still write cross-platform
|
|
applications, by using different sets of QML files for each platform.
|
|
|
|
\section1 Creating Components in Qt Quick Designer
|
|
|
|
\list 1
|
|
|
|
\li Select \uicontrol File > \uicontrol {New File or Project} >
|
|
\uicontrol {Files and Classes} > \uicontrol Qt > \uicontrol {QML File (Qt Quick 1)} or
|
|
\uicontrol {QML File (Qt Quick 2)} > \uicontrol Choose to create a new .qml
|
|
file.
|
|
|
|
\note Components are listed in the \uicontrol {QML Components} section of
|
|
the \uicontrol Library only if the filename begins with a capital
|
|
letter.
|
|
|
|
\li Click \uicontrol Design to open the .qml file in \QMLD.
|
|
|
|
\li Drag and drop a QML type from the \uicontrol Library to the editor.
|
|
|
|
\li Edit its properties in the \uicontrol Properties pane.
|
|
|
|
The available properties depend on the QML type.
|
|
|
|
\endlist
|
|
|
|
The following sections contain examples of how to create some common
|
|
components:
|
|
|
|
\list
|
|
|
|
\li \l{Creating Buttons}
|
|
|
|
\li \l{Creating Scalable Buttons and Borders}
|
|
|
|
\endlist
|
|
|
|
\section1 Moving Within Components
|
|
|
|
Components can consist of several other components. To view the component
|
|
hierarchy as a bread crumb path when you edit a component on the canvas,
|
|
select \uicontrol {Go into Component} or press \key F2. Click the component
|
|
names in the path to navigate to them. You can easily navigate back to the
|
|
top level when you are done editing the component.
|
|
|
|
\image qmldesigner-breadcrumbs.png "Go into Component command"
|
|
*/
|