Taschenrechner-Formular

Das Calculator Form Beispiel zeigt, wie ein mit Qt Widgets Designer erstelltes Formular in einer Anwendung verwendet werden kann, indem die Benutzeroberflächeninformationen einer QWidget Unterklasse verwendet werden.

Das Beispiel zeigt zwei Drehfelder, die zur Eingabe von Integer-Werten verwendet werden, und ein Etikett, das die Summe der Werte anzeigt. Immer wenn eines der beiden Drehfelder aktualisiert wird, sorgen die Signal-Slot-Verbindungen zwischen den Widgets und dem Formular dafür, dass auch das Etikett aktualisiert wird.

Vorbereitung

Die Benutzeroberfläche für dieses Beispiel wurde vollständig mit Qt Widgets Designer entworfen. Das Ergebnis ist eine UI-Datei, die das Formular, die verwendeten Widgets, alle Signal-Slot-Verbindungen zwischen ihnen und andere Standard-Eigenschaften der Benutzeroberfläche beschreibt.

Um sicherzustellen, dass das Beispiel diese Datei verwenden kann, aktivieren wir die Funktion CMAKE_AUTOUIC und führen die UI-Datei in den Quelldateien auf:

set(CMAKE_AUTOUIC ON)

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

Für qmake müssen wir eine FORMS Deklaration in die Projektdatei des Beispiels aufnehmen:

FORMS       = calculatorform.ui

Wenn das Projekt erstellt wird, erstellt uic eine Header-Datei, mit der wir das Formular konstruieren können.

Definition der Klasse CalculatorForm

Die Klasse CalculatorForm verwendet die in der Datei calculatorform.ui beschriebene Benutzerschnittstelle. Um auf das Formular und seinen Inhalt zugreifen zu können, müssen wir die ui_calculatorform.h Header-Datei einbinden, die von uic während des Build-Prozesses erstellt wurde:

#include "ui_calculatorform.h"

Wir definieren die Klasse CalculatorForm als Unterklasse von QWidget, da das Formular selbst auf QWidget basiert:

class CalculatorForm : public QWidget
{
    Q_OBJECT

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

private slots:
    void updateResult();

private:
    Ui::CalculatorForm ui;
};

Neben dem Konstruktor enthält die Klasse einen privaten Slot updateResult(), der die Berechnung durchführt und das Ausgabe-Widget entsprechend aktualisiert. Die private Membervariable ui bezieht sich auf das Formular und wird für den Zugriff auf den Inhalt der Benutzeroberfläche verwendet.

Implementierung der Klasse CalculatorForm

Der Konstruktor ruft einfach den Konstruktor der Basisklasse auf, richtet die Benutzerschnittstelle des Formulars ein und verbindet die Signale QSpinBox::valueChanged() mit dem 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);
}

Die Benutzerschnittstelle wird mit der Funktion setupUI() eingerichtet. Wir übergeben this als Argument an diese Funktion, um das CalculatorForm Widget selbst als Container für die Benutzeroberfläche zu verwenden.

Der Slot updateResult() addiert die Werte und setzt das Ergebnis auf das Ausgabe-Widget:

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

Sie wird immer dann aufgerufen, wenn sich der Wert einer der Spinboxen ändert.

Beispielprojekt @ code.qt.io