Tutorial de Widgets - Diseños anidados

Al igual que los widgets pueden contener otros widgets, los diseños se pueden utilizar para proporcionar diferentes niveles de agrupación para los widgets. En este caso, queremos mostrar una etiqueta junto a una línea de edición en la parte superior de una ventana, encima de una vista de tabla que muestra los resultados de una consulta.

Para ello, creamos dos diseños: queryLayout es un QHBoxLayout que contiene los widgets QLabel y QLineEdit colocados uno al lado del otro; mainLayout es un QVBoxLayout que contiene queryLayout y QTableView dispuestos verticalmente.

#include <QtWidgets> int main(int argc, char *argv[]) { QApplication app(argc, argv); QWidget window; QLabel *queryLabel = new QLabel( QApplication::translate("nestedlayouts", "Query:")); QLineEdit *queryEdit = new QLineEdit(); QTableView *resultView = new QTableView(); QHBoxLayout *queryLayout = new QHBoxLayout(); queryLayout->addWidget(queryLabel); queryLayout->addWidget(queryEdit); QVBoxLayout *mainLayout = new QVBoxLayout(); mainLayout->addLayout(queryLayout); mainLayout->addWidget(resultView); window.setLayout(mainLayout); // Set up the model and configure the view... window.setWindowTitle( QApplication::translate("nestedlayouts", "Nested layouts")); window.show(); return app.exec(); }

Observe que llamamos a la función addLayout() de mainLayout para insertar el queryLayout encima de la tabla resultView.

Hemos omitido el código que configura el modelo que contiene los datos mostrados por el widget QTableView, resultView. Para completarlo, lo mostramos a continuación.

Además de QHBoxLayout y QVBoxLayout, Qt también proporciona las clases QGridLayout y QFormLayout para ayudar con interfaces de usuario más complejas. Puedes verlas si ejecutas Qt Widgets Designer.

Configurando el Modelo

En el código anterior, no mostramos de dónde venían los datos de la tabla porque queríamos concentrarnos en el uso de los diseños. Aquí vemos que el modelo contiene una serie de elementos que corresponden a filas, cada una de las cuales está configurada para contener datos de dos columnas.

    QStandardItemModel model;
    model.setHorizontalHeaderLabels({ QApplication::translate("nestedlayouts", "Name"),
                                      QApplication::translate("nestedlayouts", "Office") });

    const QStringList rows[] = {
        QStringList{ QStringLiteral("Verne Nilsen"), QStringLiteral("123") },
        QStringList{ QStringLiteral("Carlos Tang"), QStringLiteral("77") },
        QStringList{ QStringLiteral("Bronwyn Hawcroft"), QStringLiteral("119") },
        QStringList{ QStringLiteral("Alessandro Hanssen"), QStringLiteral("32") },
        QStringList{ QStringLiteral("Andrew John Bakken"), QStringLiteral("54") },
        QStringList{ QStringLiteral("Vanessa Weatherley"), QStringLiteral("85") },
        QStringList{ QStringLiteral("Rebecca Dickens"), QStringLiteral("17") },
        QStringList{ QStringLiteral("David Bradley"), QStringLiteral("42") },
        QStringList{ QStringLiteral("Knut Walters"), QStringLiteral("25") },
        QStringList{ QStringLiteral("Andrea Jones"), QStringLiteral("34") }
    };

    QList<QStandardItem *> items;
    for (const QStringList &row : rows) {
        items.clear();
        for (const QString &text : row)
            items.append(new QStandardItem(text));
        model.appendRow(items);
    }

    resultView->setModel(&model);
    resultView->verticalHeader()->hide();
    resultView->horizontalHeader()->setStretchLastSection(true);

El uso de modelos y vistas se trata en los Ejemplos de Vistas de Elementos y en el resumen de Programación de Modelos/Vistas.

Proyecto de ejemplo @ code.qt.io