Formulario de calculadora

El ejemplo de formulario de calculadora muestra cómo utilizar un formulario creado con Qt Widgets Designer en una aplicación utilizando la información de la interfaz de usuario de una subclase de QWidget.

El ejemplo presenta dos casillas giratorias que se utilizan para introducir valores enteros y una etiqueta que muestra su suma. Cada vez que se actualiza una de las casillas, las conexiones de las ranuras de señal entre los widgets y el formulario garantizan que también se actualice la etiqueta.

Preparación

La interfaz de usuario de este ejemplo se diseña completamente utilizando Qt Widgets Designer. El resultado es un archivo de interfaz de usuario que describe el formulario, los widgets utilizados, cualquier conexión de ranura de señal entre ellos y otras propiedades estándar de la interfaz de usuario.

Para asegurarnos de que el ejemplo puede utilizar este archivo, habilitamos la función CMAKE_AUTOUIC y listamos el archivo UI en los archivos fuente:

set(CMAKE_AUTOUIC ON)

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

Para qmake, necesitamos incluir una declaración FORMS en el archivo de proyecto del ejemplo:

FORMS       = calculatorform.ui

Cuando se construya el proyecto, uic creará un archivo de cabecera que nos permitirá construir el formulario.

Definición de la clase CalculatorForm

La clase CalculatorForm utiliza la interfaz de usuario descrita en el archivo calculatorform.ui. Para acceder al formulario y a su contenido, necesitamos incluir el fichero de cabecera ui_calculatorform.h creado por uic durante el proceso de construcción:

#include "ui_calculatorform.h"

Definimos la clase CalculatorForm subclasificando QWidget porque el propio formulario está basado en QWidget:

class CalculatorForm : public QWidget
{
    Q_OBJECT

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

private slots:
    void updateResult();

private:
    Ui::CalculatorForm ui;
};

Aparte del constructor, la clase contiene una ranura privada updateResult() que realiza el cálculo y actualiza el widget de salida en consecuencia. La variable miembro privada ui hace referencia al formulario, y se utiliza para acceder al contenido de la interfaz de usuario.

Implementación de la clase CalculatorForm

El constructor simplemente llama al constructor de la clase base, configura la interfaz de usuario del formulario y conecta las señales QSpinBox::valueChanged() a la ranura 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);
}

La interfaz de usuario se configura con la función setupUI(). Pasamos this como argumento a esta función para utilizar el propio widget CalculatorForm como contenedor de la interfaz de usuario.

La ranura updateResult() suma los valores y establece el resultado en el widget de salida:

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

Se llama cada vez que cambia el valor de uno de los cuadros de giro.

Proyecto de ejemplo @ code.qt.io