Rechner-Formular

Das Beispiel „Rechnerformular“ zeigt, wie ein mit dem „ Qt Widgets Designer“ erstelltes Formular in einer Anwendung verwendet wird, indem die Benutzeroberflächeninformationen einer Unterklasse von „ QWidget “ genutzt werden.

Das Beispiel enthält zwei Drehfelder zur Eingabe ganzzahliger Werte sowie ein Label, das deren Summe anzeigt. Bei jeder Aktualisierung eines der Drehfelder sorgen die Signal-Slot-Verbindungen zwischen den Widgets und dem Formular dafür, dass auch das Label aktualisiert wird.

Vorbereitung

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

Um sicherzustellen, dass das Beispiel diese Datei verwenden kann, aktivieren wir die „ CMAKE_AUTOUIC “-Funktion 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

Beim Erstellen des Projekts generiert „ uic “ eine Header-Datei, mit der wir das Formular erstellen können.

Definition der Klasse „CalculatorForm“

Die Klasse „ CalculatorForm “ verwendet die in der Datei „ calculatorform.ui “ beschriebene Benutzeroberfläche. Um auf das Formular und dessen Inhalt zuzugreifen, müssen wir die Header-Datei „ ui_calculatorform.h “ einbinden, die von „ uic “ während des Erstellungsvorgangs generiert wurde:

#include "ui_calculatorform.h"

Wir definieren die Klasse „ CalculatorForm “, indem wir „ QWidget “ als Basisklasse verwenden, 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;
};

Abgesehen vom Konstruktor enthält die Klasse einen privaten Slot „ updateResult() “, der die Berechnung durchführt und das Ausgabe-Widget entsprechend aktualisiert. Die private Membervariable „ ui “ verweist auf das Formular und wird verwendet, um auf die Inhalte der Benutzeroberfläche zuzugreifen.

Implementierung der Klasse „CalculatorForm“

Der Konstruktor ruft einfach den Konstruktor der Basisklasse auf, richtet die Benutzeroberfläche 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 Benutzeroberfläche wird mit der Funktion „ setupUI() “ eingerichtet. Wir übergeben „ this “ als Argument an diese Funktion, um das Widget „ CalculatorForm “ selbst als Container für die Benutzeroberfläche zu verwenden.

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

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

Er wird immer dann aufgerufen, wenn sich der Wert eines der Drehfelder ändert.

Beispielprojekt @ code.qt.io