Tutoriel sur les widgets - Dispositions imbriquées

Tout comme les widgets peuvent contenir d'autres widgets, les dispositions peuvent être utilisées pour fournir différents niveaux de regroupement pour les widgets. Ici, nous voulons afficher une étiquette à côté d'une ligne d'édition en haut d'une fenêtre, au-dessus d'un tableau affichant les résultats d'une requête.

Pour ce faire, nous créons deux présentations : queryLayout est une présentation QHBoxLayout qui contient les widgets QLabel et QLineEdit placés côte à côte ; mainLayout est une présentation 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 mainLayout pour insérer le queryLayout au-dessus du tableau resultView.

Nous avons omis le code qui met en place le modèle contenant les données affichées par le widget QTableView, resultView. Par souci d'exhaustivité, nous le montrons ci-dessous.

Outre les classes QHBoxLayout et QVBoxLayout, Qt Help fournit également les classes QGridLayout et QFormLayout pour faciliter l'utilisation d'interfaces utilisateur plus complexes. Vous pouvez les voir en exécutant Qt Widgets Designer.

Mise en place du modèle

Dans le code ci-dessus, nous n'avons pas montré d'où venaient les données du tableau car nous voulions nous concentrer sur l'utilisation des mises en page. Ici, nous voyons que le modèle contient un certain nombre d'éléments correspondant à des lignes, chacune d'entre elles étant configurée 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 vue d'ensemble de la programmation modèle/vue.

Exemple de projet @ code.qt.io