Formations à l'informatique et à l'électronique

Auteur : SD
Créé le : 15-03-2018

Qt Utiliser des éléments QML dans une interface graphique

Logo Qt Creator

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.

Vois animation ci-dessous :

Qt QML Widget

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 :

Création de l'interface graphique

Qt QML Widget

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.

Articles connexes

Articles sur Qt


Vous avez apprécié cet article ? Partagez le !

Article connexe : Qt Classe abstraite et polymorphisme