Qt Quick Tutoriels

Cette page a pour objectif de fournir une référence utile et facile à consulter, présentant la manière la plus simple et la plus efficace d'effectuer des tâches spécifiques dans Qt Quick. Chaque solution fournit, le cas échéant, des extraits de code QML et/ou C++, et chaque extrait est automatiquement testé par Qt afin de garantir son bon fonctionnement.

Comment faire pour :

Appeler une fonction C++ depuis QML lorsqu'on clique sur un bouton

En partant du principe que le type C++ doit être accessible globalement aux fichiers QML de l'application, la méthode la plus simple consiste à en faire un singleton QML à l'aide de QML_SINGLETON. Par exemple, dans le fichier d'en-tête backend.h:

#include <QObject>
#include <QQmlEngine>

class Backend : public QObject
{
    Q_OBJECT
    QML_ELEMENT
    QML_SINGLETON

public:
    Q_INVOKABLE void doStuff();
};

backend.cpp:

#include "backend.h"

#include <QDebug>

void Backend::doStuff()
{
    qDebug() << "Did stuff!";
}

Vous pouvez ensuite appeler cette fonction depuis n'importe quel fichier QML :

import QtQuick.Controls

import MyModule

ApplicationWindow {
    width: 400
    height: 400
    title: qsTr("C++ Button example")

    Button {
        text: qsTr("Click me")
        onClicked: Backend.doStuff()
    }
}

Si le type C++ ne doit être accessible qu'à un petit nombre de fichiers QML, envisagez d'utiliser QML_ELEMENT. Pour découvrir d'autres façons d'exposer des types C++ à QML, consultez la section « Choisir la bonne méthode d'intégration entre C++ et QML ».

Cet exemple part du principe que le type « Backend » est disponible dans un module QML. Avec CMake, cela se fait via ` qt_add_qml_module`. Pour un exemple illustrant cela en détail, consultez la section « Créer une application QML ».

Déterminer quel élément a le focus actif

Écrivez un gestionnaire de signal de changement de propriété pour la propriété ` activeFocusItem ` de la fenêtre :

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    width: 400
    height: 400
    visible: true
    title: qsTr("Active focus debugging example")

    onActiveFocusItemChanged: print("activeFocusItem: " + activeFocusItem)

    Row {
        TextField {
            objectName: "textField1"
        }
        TextField {
            objectName: "textField2"
        }
    }
}

Cela affichera dans la console l'élément qui a actuellement le focus. Pour que le résultat soit utile, attribuez à chaque élément une propriété « objectName » descriptive.

Créez un sélecteur d'heure similaire à la classe `TimePickerDialog` d'Android.

Nous avons préparé un exemple composé de quelques fichiers QML qui montrent comment procéder. Vous pouvez les utiliser dans votre application de la manière suivante :

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls.Material

ApplicationWindow {
    id: window
    width: 600
    height: 600
    visible: true
    title: qsTr("Time Picker Example")

    Material.theme: darkThemeSwitch.checked ? Material.Dark : Material.Light

    // Shows the selected time and opens the dialog.
    TimeComponentLabel {
        id: openDialogLabel
        width: parent.width - 80
        anchors.centerIn: parent
        font.pixelSize: Qt.application.font.pixelSize * 8
        renderTypeQuality: Text.VeryHighRenderTypeQuality
        interactive: !timePickerDialog.opened

        text: Qt.formatTime(new Date(1970, 1, 1, timePickerDialog.hours, timePickerDialog.minutes), "hh:mm")

        onTapped: timePickerDialog.openWithMode(TimePicker.Mode.Hours)
    }

    ColumnLayout {
        // We always want the openDialogLabel to be centered in the window, not us.
        // For that reason, we use anchors rather than putting the root items into a ColumnLayout.
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: openDialogLabel.bottom
        anchors.topMargin: 24
        spacing: 12

        Switch {
            id: is24HourSwitch
            text: qsTr("24 Hour")
            checked: timePickerDialog.is24Hour
        }
        Switch {
            id: darkThemeSwitch
            text: qsTr("Dark")
        }
    }

    TimePickerDialog {
        id: timePickerDialog
        anchors.centerIn: parent
        is24Hour: is24HourSwitch.checked

        onTimeAccepted: print("A time was chosen - do something here!")
    }
}

Boîte de dialogue de sélection de l'heure avec sélecteur circulaire dans le thème clair

TimePickerDialog avec son thème clair.

Boîte de dialogue de sélection de l'heure avec sélecteur circulaire en mode sombre

TimePickerDialog avec son thème sombre.

Utiliser une énumération C++ en JavaScript

Pour exposer une énumération C++ à JavaScript (c'est-à-dire QJSEngine, et non QQmlEngine ou QQmlApplicationEngine), utilisez newQMetaObject() et registerModule() :

    QJSEngine engine;
    engine.installExtensions(QJSEngine::AllExtensions);

    QJSValue metaObjects = engine.newObject();
    const QJSValue backendJsMetaObject = engine.newQMetaObject(&Backend::staticMetaObject);
    metaObjects.setProperty("Backend", backendJsMetaObject);
    // Repeat the two lines above for other types as needed.
    engine.registerModule("MyApp", metaObjects);

    Backend backend(&engine);
    const bool loaded = backend.load();

L'énumération peut alors être utilisée depuis JavaScript :

export function backendStatusUpdate(backendStatus) {
    if (backendStatus === Backend.Error) {
        console.warn("Error!")
        return
    }

    console.log("Backend loaded successfully")
}

Si vous utilisez QQmlEngine ou QQmlApplicationEngine, il existe des options plus simples ; consultez la section « Choisir la bonne méthode d'intégration entre C++ et QML » pour plus d'informations.

backend.h:

#include <QObject>
#include <QJSEngine>

class Backend : public QObject
{
    Q_OBJECT

public:
    Backend(QJSEngine *engine);

    enum Status {
        Unknown,
        Error,
        Loading,
        Loaded
    };

    Q_ENUM(Status)

    bool load();

private:
    QJSEngine *mEngine = nullptr;
};

backend.cpp:

#include "backend.h"

Backend::Backend(QJSEngine*engine) :
    mEngine(engine)
{
}

bool Backend::load()
{
    // Effectuer le chargement ici...

    const QJSValue module = mEngine->importModule(":/script.mjs");
    if (module.isError()) {
        qWarning() << "Error loading script.mjs:" << module.toString();
       return false;
    }

    const QJSValue function = module.property("backendStatusUpdate");
    if (!function.isCallable()) {
        qWarning() << "backendStatusUpdate script function is not callable!";
       return false;
    }

    const QJSValue functionResult = function.call(QJSValueList() << Loaded);
    if (functionResult.isError()) {
        qWarning() << "backendStatusUpdate script function had errors:" << functionResult.toString();
       return false;
    }

    return true;
}

Pour plus d'informations, consultez QObject Integration.

Créer une jauge

Nous avons préparé un exemple composé de quelques fichiers C++ et QML qui illustrent la marche à suivre. Vous pouvez les utiliser dans votre application de la manière suivante :

import QtQuick.Controls

import GaugeHowTo

ApplicationWindow {
    width: 400
    height: 400
    title: qsTr("Gauge example")

    Gauge {
        minimumValue: 0
        value: 75
        maximumValue: 100
    }
}

Jauge verticale dont la valeur est réglée sur 75 sur une échelle allant de 0 à 100

Dernières retouches

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.