Formulaire de calculatrice

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

L'exemple présente deux boîtes tournantes utilisées pour saisir des valeurs entières et une étiquette indiquant leur somme. Chaque fois que l'une des boîtes à boutons est mise à jour, les connexions entre les widgets et le formulaire garantissent que l'étiquette est également mise à jour.

Préparation

L'interface utilisateur de cet exemple est entièrement conçue à l'aide de Qt Widgets Designer. Le résultat est un fichier d'interface utilisateur décrivant le formulaire, les widgets utilisés, toutes les connexions de fente de signal entre eux et d'autres propriétés d'interface utilisateur standard.

Pour que l'exemple puisse utiliser ce fichier, nous activons la fonction CMAKE_AUTOUIC et répertorions le fichier d'interface utilisateur dans les fichiers sources :

set(CMAKE_AUTOUIC ON)

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

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

FORMS       = calculatorform.ui

Lorsque le projet est construit, uic crée un fichier d'en-tête qui nous permet 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 au cours du processus de construction :

#include "ui_calculatorform.h"

Nous définissons la classe CalculatorForm en sous-classant 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 est utilisée pour accéder au contenu de l'interface utilisateur.

Mise en œuvre de la classe CalculatorForm

Le constructeur appelle simplement le constructeur de la classe de base, met en place l'interface utilisateur du formulaire et connecte 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 comme argument à cette fonction pour utiliser le widget CalculatorForm lui-même comme conteneur pour l'interface utilisateur.

Le slot updateResult() additionne les valeurs et affiche le résultat sur le widget de sortie :

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

Elle est appelée chaque fois que la valeur de l'une des boîtes de rotation change.

Exemple de projet @ code.qt.io