Formulaire de calcul

L'exemple de formulaire de calculatrice montre comment utiliser un formulaire créé avec Qt Widgets Designer dans une application en exploitant les informations d'interface utilisateur d'une sous-classe de QWidget.

L’exemple présente deux zones de saisie utilisées pour entrer des valeurs entières et une étiquette qui affiche leur somme. Chaque fois que l’une des zones de saisie est mise à jour, les connexions signal-slot entre les widgets et le formulaire garantissent que l’étiquette est également mise à jour.

Préparation

L’interface utilisateur de cet exemple a été entièrement conçue à l’aide d’ Qt Widgets Designer. Le résultat est un fichier UI décrivant le formulaire, les widgets utilisés, les connexions signal-slot entre eux, ainsi que d’autres propriétés standard de l’interface utilisateur.

Pour que l'exemple puisse utiliser ce fichier, nous activons la fonctionnalité « CMAKE_AUTOUIC » et ajoutons le fichier UI à la liste des fichiers source :

set(CMAKE_AUTOUIC ON)

qt_add_executable(calculatorform
    calculatorform.cpp calculatorform.h calculatorform.ui
    main.cpp
)

Pour l’ qmake, nous devons inclure une déclaration ` FORMS ` dans le fichier de projet de l’exemple :

FORMS       = calculatorform.ui

Lors de la compilation du projet, la fonctionnalité « uic » créera un fichier d’en-tête qui nous permettra de construire le formulaire.

Définition de la classe CalculatorForm

La classe CalculatorForm utilise l’interface utilisateur décrite dans le fichier calculatorform.ui. Pour accéder au formulaire et à son contenu, nous devons inclure le fichier d’en-tête ui_calculatorform.h créé par uic lors du processus de compilation :

#include "ui_calculatorform.h"

Nous définissons la classe ` CalculatorForm ` en créant une sous-classe de ` QWidget `, car le formulaire lui-même est basé sur ` QWidget` :

class CalculatorForm : public QWidget
{
    Q_OBJECT

public:
    explicit CalculatorForm(QWidget *parent = nullptr);

private slots:
    void updateResult();

private:
    Ui::CalculatorForm ui;
};

Outre le constructeur, la classe contient un slot privé updateResult() qui effectue le calcul et met à jour le widget de sortie en conséquence. La variable membre privée ui fait référence au formulaire et sert à accéder au contenu de l’interface utilisateur.

Implémentation de la classe CalculatorForm

Le constructeur appelle simplement le constructeur de la classe de base, configure l’interface utilisateur du formulaire et relie les signaux QSpinBox::valueChanged() au slot updateResult().

CalculatorForm::CalculatorForm(QWidget *parent)
    : QWidget(parent)
{
    ui.setupUi(this);
    connect(ui.inputSpinBox1, &QSpinBox::valueChanged, this, &CalculatorForm::updateResult);
    connect(ui.inputSpinBox2, &QSpinBox::valueChanged, this, &CalculatorForm::updateResult);
}

L’interface utilisateur est configurée à l’aide de la fonction ` setupUI() `. Nous passons ` this ` en argument à cette fonction afin d’utiliser le widget ` CalculatorForm ` lui-même comme conteneur de l’interface utilisateur.

L'emplacement updateResult() additionne les valeurs et affiche le résultat dans le widget de sortie :

void CalculatorForm::updateResult()
{
    const int sum = ui.inputSpinBox1->value() + ui.inputSpinBox2->value();
    ui.outputWidget->setText(QString::number(sum));
}

Il est appelé chaque fois que la valeur de l’une des zones de sélection change.

Exemple de projet sur code.qt.io