| /**************************************************************************** |
| ** |
| ** 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 |
| */ |