Qt - Utiliser des éléments QML dans une interface graphique
Dans cet exemple, nous allons utiliser une Gauge et une Gauge circulaire (fichiers QML) qui seront contrôlées depuis une "MainWindows" avec deux sliders.
Voir animation ci-dessous :
Créer un nouveau projet Qt : Application => Application Qt avec Widgets.
Modification du projet
Modifications du fichier .pro
Ajouter dans le fichier .pro de votre projet :
QT += quickwidgets
Inclusion des fichiers
Il faut inclure dans les fichiers ci-dessous dans votre "mainwindows.h" :
#include <QQuickWidget>
#include <QQuickItem>
#include <QQuickView>
#include <QVariant>
Ajout des fichiers QML
Créer un nouveau fichier ressources et y ajouter les fichiers QML à utiliser. La procédure est la même que pour ajouter des images.
Nous utiliserons deux fichiers QML :
- Une gauge : gauge2.qml
- Une gauge circulaire : gauge.qml
Création de l'interface graphique
Réaliser l'interface graphique ci-dessous :
Pour les deux sliders, créer un SLOT "valueChanged(int)" (clic droit sur le slider, puis "Aller au slot...").
Mise en place du code
Initialisation
Dans le constructeur de "MainWindow" ajouter les lignes ci-dessous :
// Chargement et affichage du fichier QML dans un widget QQuickWidget
ui->gaugeCircWidget->setSource(QUrl(QStringLiteral("qrc:/gauge.qml")));
ui->gaugeCircWidget->show();
// Chargement et affichage du fichier QML dans un widget QQuickWidget
ui->gaugeWidget->setSource(QUrl(QStringLiteral("qrc:/gauge2.qml")));
ui->gaugeWidget->show();
Code des SLOTS
void MainWindow::on_gaugeCircSlider_valueChanged(int value)
{
// Si on modifie la valeur du Slider, on appel la méthode "setQmlObjectValue"
setQmlObjectValue(ui->gaugeCircWidget, "gauge", "value", value);
}
void MainWindow::on_gaugeSlider_valueChanged(int value)
{
// Si on modifie la valeur du Slider, on appel la méthode "setQmlObjectValue"
setQmlObjectValue(ui->gaugeWidget, "gauge", "value", value);
}
void MainWindow::setQmlObjectValue(QQuickWidget* uiWidget, const char* childName, const char* propertyName, QVariant value) {
// Récupération de l'objet racine du fichier QML
QObject* qmlObject = uiWidget->rootObject();
// Recherche de l'élément QML enfant à modifier
QObject* child = qmlObject->findChild<QObject*>(childName);
// Si l'élément enfant a été trouvé
if (child)
// Modification de la valeur de la propriété
child->setProperty(propertyName, value);
}
Remarque : Une méthode "setQmlObjectValue" a été créée afin d'éviter de dupliquer le code à l'intérieur des SLOTS.