Widgets-Tutorial – Verschachtelte Layouts

Genauso wie Widgets andere Widgets enthalten können, lassen sich Layouts verwenden, um Widgets auf verschiedenen Ebenen zu gruppieren. Hier möchten wir oben im Fenster neben einem Line-Edit-Feld eine Beschriftung anzeigen, und zwar oberhalb einer Tabellenansicht, die die Ergebnisse einer Abfrage anzeigt.

Dies erreichen wir durch die Erstellung von zwei Layouts: „ queryLayout “ ist ein „ QHBoxLayout “, das die Widgets „ QLabel “ und „ QLineEdit “ nebeneinander enthält; „ mainLayout “ ist ein „ QVBoxLayout “, das die Widgets „ queryLayout “ und „ QTableView “ vertikal angeordnet enthält.

#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(); }

Beachten Sie, dass wir die Funktion „ addLayout()“ des „ mainLayout “ aufrufen, um das „ queryLayout “ oberhalb der „ resultView “-Tabelle einzufügen.

Wir haben den Code weggelassen, der das Modell mit den vom „ QTableView “-Widget angezeigten Daten einrichtet („ resultView “). Der Vollständigkeit halber zeigen wir diesen im Folgenden.

Neben QHBoxLayout und QVBoxLayout bietet Qt auch die Klassen QGridLayout und QFormLayout an, die bei komplexeren Benutzeroberflächen helfen. Diese können Sie sehen, wenn Sie den Qt Widgets -Designer starten.

Einrichten des Modells

Im obigen Code haben wir nicht gezeigt, woher die Daten der Tabelle stammen, da wir uns auf die Verwendung von Layouts konzentrieren wollten. Hier sehen wir, dass das Modell eine Reihe von Elementen enthält, die den Zeilen entsprechen, wobei jedes Element so eingerichtet ist, dass es Daten für zwei Spalten enthält.

    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);

Die Verwendung von Modellen und Ansichten wird in den Beispielen zu Elementansichten und in der Übersicht zur Modell-Ansicht-Programmierung behandelt.

Beispielprojekt @ code.qt.io