1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
/****************************************************************************
**
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:FDL$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
** $QT_END_LICENSE$
**
****************************************************************************/
/*!
\example flatstyle
\keyword Qt Quick Controls - Flat Style
\title Qt Quick Controls - Flat Style
\keyword Qt Quick Controls 2 - Flat Style
\ingroup qtquickcontrols2-examples
\brief A QML app using Qt Quick Controls and a QML plugin
with customized controls.
\e Flat Style shows how to integrate customized controls into Qt Quick Designer.
The example uses a pure QML plugin to define constants in a singleton. For the
declarative parts of the UI, \c .ui.qml files are used. These can be edited
visually in Qt Quick Designer.
\borderedimage qtquickcontrols2-flatstyle.png
\section1 QML Plugin
The example contains a plugin called Theme. The plugin consists of a QML file
\c Theme.qml and a \c qmldir file. The plugin is located in the imports subdirectory
and added as a resource.
To ensure the plugin is found by QML, we add the import directory to the import
paths of the engine in \c main.cpp.
\code
...
engine.addImportPath(":/imports");
...
\endcode
To ensure the code model and Qt Quick Designer can find the plugin, we add the following
line to \e flatstyle.pro.
\code
QML_IMPORT_PATH = $$PWD/imports
\endcode
All colors, font parameters, and size constants that are used in this example
are defined as properties in the singleton called \e Theme.qml.
Usually such attribute values are defined as constants as they are not suppose to change at run time.
In this example, we allow the user to change some attributes like the main color, the size parameter,
and some font parameters while the application is running.
Defining these attribute values in a singleton makes it easy to maintain and change them.
This pattern makes it easy to implement theming.
\section1 Implementing Custom Controls
The plugin also contains a style for a couple of controls that implement a custom look and feel.
This style is located in \c Flat and is set as the style for the application in \c qtquickcontrols2.conf.
The example uses the states of a Qt Quick Item to implement the different states of a control.
This has the advantage that we can define the custom look in Qt Quick Designer and we can easily
verify the different states of a control.
To edit the indicator of a switch in Qt Quick Designer we can open Switch.qml and then enter the implementation
of the indicator called \c switchHandle using the combo box on the top next to the combo box for the open documents.
\borderedimage qtquickcontrols2-flatstyle-creator.png
The application itself is just a simple form that allows the user to adjust a couple of parameters of the custom controls.
The user can choose another main color, set the font to bold or underline, and increase the size of the controls by
toggling a switch.
\e MainForm.ui.qml is just the pure declarative definition of the form, while \e flatstyle.qml instantiates the form
and implements the logic.
\include examples-run.qdocinc
*/
|
