1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
\page qtquick-how-tos.html
\title Qt Quick How-tos
This page aims to provide an easily discoverable, useful reference that
shows the simplest and best way of performing specific tasks in Qt Quick.
Each solution provides QML and/or C++ code snippets where applicable, and
every snippet is automatically tested by Qt to ensure they remain
functional.
How do I:
\list
\li \l {Call a C++ function from QML when a Button is clicked}
\li \l {See which item has active focus}
\li \l {Create a time picker like Android's TimePickerDialog}
\li \l {Use a C++ enum in JavaScript}
\endlist
\section1 Call a C++ function from QML when a Button is clicked
Assuming that the C++ type should be globally available to the QML
files in the application, the simplest way is to make it a QML singleton
with \l QML_SINGLETON. For example, in the header file, \c backend.h:
\snippet how-tos/how-to-cpp-button/backend.h file
\c backend.cpp:
\snippet how-tos/how-to-cpp-button/backend.cpp file
You can then call that function from any QML file:
\snippet how-tos/how-to-cpp-button/Main.qml file
If the C++ type only needs to be available to a small set of QML files,
consider using \l QML_ELEMENT. For more ways of exposing C++ types to QML,
see \l {Choosing the Correct Integration Method Between C++ and QML}.
This example assumes that the \c Backend type is available in a QML module.
With CMake, this is done via \l qt_add_qml_module. For an example that
demonstrates this in detail, see \l {Building a QML application}.
\section1 See which item has active focus
Write a \l {Property change signal handlers}{property change signal handler}
for the window's \l {Window::}{activeFocusItem} property:
\snippet how-tos/how-to-qml/active-focus-debugging/ActiveFocusDebuggingMain.qml file
This will print the item which currently has active focus to the console.
To ensure that the output is useful, give each item a descriptive
\l {QtObject::}{objectName}.
\section1 Create a time picker like Android's TimePickerDialog
We've prepared an example that consists of a few
\l {https://code.qt.io/cgit/qt/qtdeclarative.git/tree/tests/auto/quick/doc/how-tos/how-to-qml/time-picker/TimeComponentLabel.qml?h=\QtMajorVersion.\QtMinorVersion}
{QML files} which demonstrate how to do this. They can be used
in your application in the following manner:
\snippet how-tos/how-to-qml/time-picker/TimePickerMain.qml file
\table
\row
\li \image how-to-time-picker-light.png
\caption TimePickerDialog in its light theme.
\li \image how-to-time-picker-dark.png
\caption TimePickerDialog in its dark theme.
\endtable
\section1 Use a C++ enum in JavaScript
To expose a C++ enum to JavaScript (that is, \l QJSEngine, not
\l QQmlEngine or \l QQmlApplicationEngine), use
\l QJSEngine::newQMetaObject():
\quotefromfile how-tos/how-to-cpp-enum-js/tst_how-to-cpp-enum-js.cpp
\skipto QJSEngine engine
\printuntil setProperty
\skipto Backend backend
\printuntil backend.load()
The enum can then be used from JavaScript:
\snippet how-tos/how-to-cpp-enum-js/script.mjs file
When using \l QQmlEngine or \l QQmlApplicationEngine, there are easier
options; see
\l {Choosing the Correct Integration Method Between C++ and QML}
for more information.
\c backend.h:
\snippet how-tos/how-to-cpp-enum-js/backend.h file
\c backend.cpp:
\snippet how-tos/how-to-cpp-enum-js/backend.cpp file
For more information, see \l {QObject Integration}.
*/
|
