En el desarrollo de interfaces gráficas con Qt, los elementos de interfaz de usuario (widgets) son la base para construir aplicaciones interactivas. Entre los más utilizados se encuentran QLabel, QPushButton y QLineEdit. Este artículo detalla su implementación y características avanzadas.

QLabel: Visualización de Texto e Imágenes

El control QLabel está diseñado para presentar texto estático, formato HTML o gráficos. Es fundamental para mostrar información no editable al usuario.

Configuración de Fuente y Alineación

Es posible personalizar la apariencia del texto ajustando la tipografía y su posición dentro del widget:

QLabel *lblMensaje = new QLabel("Bienvenido a Qt", this);
QFont tipografia("Courier", 14, QFont::Bold);
lblMensaje->setFont(tipografia);
lblMensaje->setAlignment(Qt::AlignCenter);

Texto Enriquecido y Gráficos

La clase soporta HTML para dar formato al conetnido, así como la visualización de imágenes mediante QPixmap:

lblMensaje->setText("<h2><font color='red'>Texto Formateado</font></h2>");
QPixmap imagen(":/recursos/imagen.png");
lblMensaje->setPixmap(imagen);

Ejemplo Práctico

#include <QApplication>
#include <QWidget>
#include <QLabel>
#include <QVBoxLayout>
#include <QPixmap>

class DemoEtiqueta : public QWidget {
public:
    DemoEtiqueta(QWidget *padre = nullptr) : QWidget(padre) {
        QVBoxLayout *disposicion = new QVBoxLayout(this);

        QLabel *txtPlano = new QLabel("Mensaje de texto simple", this);
        txtPlano->setAlignment(Qt::AlignCenter);
        disposicion->addWidget(txtPlano);

        QLabel *txtHtml = new QLabel("<b>Texto en negrita</b>", this);
        disposicion->addWidget(txtHtml);

        QLabel *lblGrafico = new QLabel(this);
        lblGrafico->setPixmap(QPixmap(":/recursos/logo.png"));
        disposicion->addWidget(lblGrafico);
    }
};

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
    DemoEtiqueta ventana;
    ventana.show();
    return app.exec();
}

QPushButton: Control de Acciones

Los botones son el medio principal para que el usuario ejecute acciones. QPushButton ofrece señales para capturar clics y opciones para personalizar su estética.

Estilo y Atajos

Se pueden aplicar hojas de estilo (QSS) para cambiar colores y formas, además de asignar accesos rápidos por teclado:

QPushButton *btnAccion = new QPushButton("Ejecutar", this);
btnAccion->setShortcut(QKeySequence("Ctrl+E"));
btnAccion->setStyleSheet("background-color: #2d89ef; color: white; border-radius: 5px;");

Manejo de Eventos

La interacción se gestiona conectando la señal clicked a una ranura (slot) específica:

connect(btnAccion, &QPushButton::clicked, this, &DemoBoton::manejarClic);

Ejemplo Práctico

#include <QApplication>
#include <QWidget>
#include <QPushButton>
#include <QVBoxLayout>
#include <QMessageBox>

class DemoBoton : public QWidget {
    Q_OBJECT
public:
    DemoBoton(QWidget *padre = nullptr) : QWidget(padre) {
        QVBoxLayout *disposicion = new QVBoxLayout(this);
        QPushButton *btnInteractuar = new QPushButton("Haz clic aquí", this);
        btnInteractuar->setStyleSheet("QPushButton { background: green; color: white; padding: 6px; }");
        disposicion->addWidget(btnInteractuar);

        connect(btnInteractuar, &QPushButton::clicked, this, &DemoBoton::mostrarAlerta);
    }
private slots:
    void mostrarAlerta() {
        QMessageBox::information(this, "Aviso", "El botón fue presionado.");
    }
};

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
    DemoBoton ventana;
    ventana.show();
    return app.exec();
}

QLineEdit: Captura de Datos

Para la entrada de texto en una sola línea, QLineEdit es la opción ideal. Permite restringir la entrada mediante validadores y ofrecer textos de sugerencia.

Validación y Sugerencias

El método setPlaceholderText muestra una guía antes de que el usuario escriba, mientras que setValidator limita el tipo de datos aceptados:

QLineEdit *campoEdad = new QLineEdit(this);
campoEdad->setPlaceholderText("Introduzca su edad");
campoEdad->setValidator(new QIntValidator(0, 120, this));

Ejemplo Práctico

#include <QApplication>
#include <QWidget>
#include <QLineEdit>
#include <QLabel>
#include <QVBoxLayout>
#include <QIntValidator>

class DemoEntrada : public QWidget {
    Q_OBJECT
public:
    DemoEntrada(QWidget *padre = nullptr) : QWidget(padre) {
        QVBoxLayout *disposicion = new QVBoxLayout(this);

        QLabel *lblInstruccion = new QLabel("Ingrese un número entero:", this);
        disposicion->addWidget(lblInstruccion);

        QLineEdit *txtEntrada = new QLineEdit(this);
        txtEntrada->setPlaceholderText("0 - 100");
        txtEntrada->setValidator(new QIntValidator(0, 100, this));
        disposicion->addWidget(txtEntrada);

        QLabel *lblResultado = new QLabel("Esperando datos...", this);
        disposicion->addWidget(lblResultado);

        connect(txtEntrada, &QLineEdit::textChanged, lblResultado, &QLabel::setText);
    }
};

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
    DemoEntrada ventana;
    ventana.show();
    return app.exec();
}

Integración de Componentes

Combinando estos tres elementos, es posible construir formularios completos. A continuación, se muestra un formulario de registro de usuario que integra etiquetas, campos de texto y un botón de envío.

#include <QApplication>
#include <QWidget>
#include <QVBoxLayout>
#include <QFormLayout>
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>
#include <QMessageBox>

class FormularioRegistro : public QWidget {
    Q_OBJECT
public:
    FormularioRegistro(QWidget *padre = nullptr) : QWidget(padre) {
        QVBoxLayout *disposicionPrincipal = new QVBoxLayout(this);

        QLabel *lblTitulo = new QLabel("<h1>Registro de Usuario</h1>", this);
        lblTitulo->setAlignment(Qt::AlignCenter);
        disposicionPrincipal->addWidget(lblTitulo);

        QFormLayout *formulario = new QFormLayout();
        txtNombre = new QLineEdit(this);
        txtNombre->setPlaceholderText("Nombre completo");
        formulario->addRow("Nombre:", txtNombre);

        txtCorreo = new QLineEdit(this);
        txtCorreo->setPlaceholderText("correo@dominio.com");
        formulario->addRow("Email:", txtCorreo);
        disposicionPrincipal->addLayout(formulario);

        QPushButton *btnEnviar = new QPushButton("Registrar", this);
        btnEnviar->setStyleSheet("QPushButton { background-color: #0078D7; color: white; }");
        disposicionPrincipal->addWidget(btnEnviar);

        connect(btnEnviar, &QPushButton::clicked, this, &FormularioRegistro::procesarEnvio);
    }
private slots:
    void procesarEnvio() {
        QString nombre = txtNombre->text();
        QString correo = txtCorreo->text();
        QMessageBox::information(this, "Datos Ingresados", QString("Nombre: %1\nEmail: %2").arg(nombre).arg(correo));
    }
private:
    QLineEdit *txtNombre;
    QLineEdit *txtCorreo;
};

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
    FormularioRegistro ventana;
    ventana.resize(300, 150);
    ventana.show();
    return app.exec();
}

En este formulario, QFormLayout se utiliza para alinear automáticamente las etiquetas con sus respectivos campos de entrada, demostrando cómo Qt facilita la construcción de interfaces estructuradas y limpias.