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