Tutoriel sur les widgets - Mises en page imbriquées

Tout comme les widgets peuvent contenir d’autres widgets, les mises en page peuvent être utilisées pour créer différents niveaux de regroupement des widgets. Ici, nous souhaitons afficher une étiquette à côté d’un champ de saisie en haut d’une fenêtre, au-dessus d’une vue de tableau présentant les résultats d’une requête.

Pour ce faire, nous créons deux mises en page : ` queryLayout ` est une mise en page de type « QHBoxLayout » qui contient les widgets ` QLabel ` et ` QLineEdit ` placés côte à côte ; ` mainLayout ` est une mise en page de type « QVBoxLayout » qui contient les widgets ` queryLayout ` et ` QTableView ` disposés verticalement.

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

Notez que nous appelons la fonction addLayout() de l’ mainLayout pour insérer le queryLayout au-dessus du tableau resultView.

Nous avons omis le code qui configure le modèle contenant les données affichées par le widget QTableView, resultView. Par souci d’exhaustivité, nous le présentons ci-dessous.

Outre QHBoxLayout et QVBoxLayout, Qt fournit également les classes QGridLayout et QFormLayout pour faciliter la création d’interfaces utilisateur plus complexes. Vous pouvez les consulter en lançant Qt Widgets Designer.

Configuration du modèle

Dans le code ci-dessus, nous n’avons pas indiqué d’où provenaient les données du tableau, car nous souhaitions nous concentrer sur l’utilisation des mises en page. Ici, nous voyons que le modèle contient un certain nombre d’éléments correspondant aux lignes, chacun étant configuré pour contenir les données de deux colonnes.

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

L’utilisation des modèles et des vues est abordée dans les exemples de vues d’éléments et dans la présentation de la programmation modèle/vue.

Exemple de projet sur code.qt.io