Exemple de mises en page de base

La section «Mises en page de base » explique comment utiliser les gestionnaires de mise en page standard disponibles dans Qt : QBoxLayout, QGridLayout et QFormLayout.

La classe QBoxLayout aligne les widgets horizontalement ou verticalement. QHBoxLayout et QVBoxLayout sont des sous-classes pratiques de QBoxLayout. QGridLayout organise les widgets dans des cellules en divisant l'espace disponible en lignes et en colonnes. QFormLayout, quant à lui, dispose ses enfants sous la forme de deux colonnes, avec les étiquettes dans la colonne de gauche et les champs de saisie dans la colonne de droite.

Pour plus d’informations, consultez la page « Gestion de la mise en page ».

Exécution de l'exemple

Vous pouvez exécuter l'exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l’exemple à l’adresse Examples. Pour plus d’informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.

Définition de la classe de boîte de dialogue

class Dialog : public QDialog
{
    Q_OBJECT

public:
    Dialog();

private:
    void createMenu();
    void createHorizontalGroupBox();
    void createGridGroupBox();
    void createFormGroupBox();

    enum { NumGridRows = 3, NumButtons = 4 };

    QMenuBar *menuBar;
    QGroupBox *horizontalGroupBox;
    QGroupBox *gridGroupBox;
    QGroupBox *formGroupBox;
    QTextEdit *smallEditor;
    QTextEdit *bigEditor;
    QLabel *labels[NumGridRows];
    QLineEdit *lineEdits[NumGridRows];
    QPushButton *buttons[NumButtons];
    QDialogButtonBox *buttonBox;

    QMenu *fileMenu;
    QAction *exitAction;
};

La classe ` Dialog ` hérite de ` QDialog`. Il s’agit d’un widget personnalisé qui affiche ses widgets enfants à l’aide des gestionnaires de géométrie : ` QHBoxLayout`, ` QVBoxLayout`, ` QGridLayout` et ` QFormLayout`.

Quatre fonctions privées permettent de simplifier le constructeur de la classe : les fonctions createMenu(), createHorizontalGroupBox(), createGridGroupBox() et createFormGroupBox() créent plusieurs widgets que l'exemple utilise pour montrer comment la mise en page affecte leur apparence.

Implémentation de la classe `Dialog`

Dialog::Dialog()
{
    createMenu();
    createHorizontalGroupBox();
    createGridGroupBox();
    createFormGroupBox();

Dans le constructeur, nous utilisons d’abord la fonction ` createMenu() ` pour créer et remplir une barre de menu, puis la fonction ` createHorizontalGroupBox() ` pour créer une zone de groupe contenant quatre boutons disposés horizontalement. Ensuite, nous utilisons la fonction ` createGridGroupBox() ` pour créer une boîte de groupe contenant plusieurs champs de saisie de ligne et un petit éditeur de texte, qui s’affichent selon une disposition en grille. Enfin, nous utilisons la fonction ` createFormGroupBox() ` pour créer une boîte de groupe comportant trois étiquettes et trois champs de saisie : un champ de saisie de ligne, une liste déroulante et une zone de sélection.

    bigEditor = new QTextEdit;
    bigEditor->setPlainText(tr("This widget takes up all the remaining space "
                               "in the top-level layout."));

    buttonBox = new QDialogButtonBox(QDialogButtonBox::Ok
                                     | QDialogButtonBox::Cancel);

    connect(buttonBox, &QDialogButtonBox::accepted, this, &QDialog::accept);
    connect(buttonBox, &QDialogButtonBox::rejected, this, &QDialog::reject);

Nous créons également un grand éditeur de texte et une boîte de dialogue à boutons. La classe ` QDialogButtonBox ` est un widget qui présente des boutons selon une disposition adaptée au style actuel du widget. Les boutons souhaités peuvent être spécifiés en tant qu’arguments du constructeur, à l’aide de l’énumération ` QDialogButtonBox::StandardButtons `.

Notez que nous n’avons pas besoin de spécifier de parent pour les widgets lors de leur création. En effet, tous les widgets que nous créons ici seront ajoutés à une disposition, et lorsqu’un widget est ajouté à une disposition, il est automatiquement rattaché au widget sur lequel la disposition est installée.

    QVBoxLayout *mainLayout = new QVBoxLayout;

La mise en page principale est un objet ` QVBoxLayout `. ` QVBoxLayout ` est une classe de commodité pour une mise en page de type « boîte » à orientation verticale.

En général, la classe ` QBoxLayout ` prend l’espace qui lui est alloué (par sa mise en page parente ou par le widget parente), le divise en une série de cases et fait en sorte que chaque widget géré occupe une case. Si l’orientation de ` QBoxLayout` est ` Qt::Horizontal `, les cases sont disposées en ligne. Si l’orientation est ` Qt::Vertical`, les cases sont disposées en colonne. Les classes de commodité correspondantes sont respectivement ` QHBoxLayout ` et ` QVBoxLayout`.

    mainLayout->setMenuBar(menuBar);

Lorsque l’on appelle la fonction ` QLayout::setMenuBar()` , la mise en page place la barre de menu fournie en haut du widget parent, et à l’extérieur de l’ content margins de ce dernier. Tous les widgets enfants sont placés sous le bord inférieur de la barre de menu.

    mainLayout->addWidget(horizontalGroupBox);
    mainLayout->addWidget(gridGroupBox);
    mainLayout->addWidget(formGroupBox);
    mainLayout->addWidget(bigEditor);
    mainLayout->addWidget(buttonBox);

Nous utilisons la fonction ` QBoxLayout::addWidget()` pour ajouter les widgets à la fin de la mise en page. Chaque widget occupera au minimum sa taille minimale et au maximum sa taille maximale. Il est possible de spécifier un facteur d’étirement dans la fonction ` addWidget()`, et tout espace excédentaire est réparti en fonction de ces facteurs d’étirement. S’il n’est pas spécifié, le facteur d’étirement d’un widget est égal à 0.

    setLayout(scrollLayout);
    setWindowTitle(tr("Basic Layouts"));
}

Nous installons la mise en page principale sur le widget ` Dialog ` à l’aide de la fonction ` QWidget::setLayout()`, et tous les widgets de la mise en page sont automatiquement rattachés au widget ` Dialog `.

void Dialog::createMenu()
{
    menuBar = new QMenuBar;

    fileMenu = new QMenu(tr("&File"), this);
    exitAction = fileMenu->addAction(tr("E&xit"));
    menuBar->addMenu(fileMenu);

    connect(exitAction, &QAction::triggered, this, &QDialog::accept);
}

Dans la fonction privée ` createMenu() `, nous créons une barre de menu et ajoutons un menu déroulant ` File ` contenant une option « Exit ».

void Dialog::createHorizontalGroupBox()
{
    horizontalGroupBox = new QGroupBox(tr("Horizontal layout"));
    QHBoxLayout *layout = new QHBoxLayout;

    for (int i = 0; i < NumButtons; ++i) {
        buttons[i] = new QPushButton(tr("Button %1").arg(i + 1));
        layout->addWidget(buttons[i]);
    }
    horizontalGroupBox->setLayout(layout);
}

Lorsque nous créons la zone de groupe horizontale, nous utilisons un « QHBoxLayout » comme mise en page interne. Nous créons les boutons que nous souhaitons placer dans la zone de groupe, les ajoutons à la mise en page, puis installons celle-ci sur la zone de groupe.

void Dialog::createGridGroupBox()
{
    gridGroupBox = new QGroupBox(tr("Grid layout"));

Dans la fonction ` createGridGroupBox() `, nous utilisons un ` QGridLayout ` qui organise les widgets dans une grille. Il utilise l’espace mis à sa disposition (par sa mise en page parent ou par le widget parent), le divise en lignes et en colonnes, puis place chaque widget qu’il gère dans la cellule appropriée.

    for (int i = 0; i < NumGridRows; ++i) {
        labels[i] = new QLabel(tr("Line %1:").arg(i + 1));
        lineEdits[i] = new QLineEdit;
        layout->addWidget(labels[i], i + 1, 0);
        layout->addWidget(lineEdits[i], i + 1, 1);
    }

Pour chaque ligne de la grille, nous créons une étiquette et un champ de saisie de ligne associé, puis nous les ajoutons à la mise en page. La fonction ` QGridLayout::addWidget()` diffère de la fonction correspondante de ` QBoxLayout` : elle nécessite que la ligne et la colonne spécifiant la cellule de la grille dans laquelle placer le widget lui soient fournies.

    smallEditor = new QTextEdit;
    smallEditor->setPlainText(tr("This widget takes up about two thirds of the "
                                 "grid layout."));
    layout->addWidget(smallEditor, 0, 2, 4, 1);

QGridLayout::addWidget() peut en outre prendre des arguments précisant le nombre de lignes et de colonnes que la cellule couvrira. Dans cet exemple, nous créons un petit éditeur qui s’étend sur trois lignes et une colonne.

Pour les fonctions QBoxLayout::addWidget() et QGridLayout::addWidget(), il est également possible d’ajouter un dernier argument spécifiant l’alignement du widget. Par défaut, celui-ci occupe toute la cellule. Mais nous pourrions, par exemple, aligner un widget sur le bord droit en spécifiant l’alignement Qt::AlignRight.

    layout->setColumnStretch(1, 10);
    layout->setColumnStretch(2, 20);
    gridGroupBox->setLayout(layout);
}

Chaque colonne d’une disposition en grille possède un facteur d’étirement. Ce facteur d’étirement est défini à l’aide de la fonction QGridLayout::setColumnStretch() et détermine la part d’espace disponible que la colonne occupera au-delà du minimum nécessaire.

Dans cet exemple, nous définissons les facteurs d’étirement des colonnes 1 et 2. Le facteur d’étirement est relatif aux autres colonnes de cette grille ; les colonnes ayant un facteur d’étirement plus élevé occupent une plus grande partie de l’espace disponible. Ainsi, la colonne 2 de notre mise en page en grille occupera davantage d'espace disponible que la colonne 1, tandis que la colonne 0 ne s'étendra pas du tout puisque son facteur d'étirement est égal à 0 (valeur par défaut).

Les colonnes et les lignes se comportent de manière identique ; il existe un facteur d’étirement équivalent pour les lignes, ainsi qu’une fonction ` QGridLayout::setRowStretch()`.

void Dialog::createFormGroupBox()
{
    formGroupBox = new QGroupBox(tr("Form layout"));
    QFormLayout *layout = new QFormLayout;
    layout->addRow(new QLabel(tr("Line 1:")), new QLineEdit);
    layout->addRow(new QLabel(tr("Line 2, long text:")), new QComboBox);
    layout->addRow(new QLabel(tr("Line 3:")), new QSpinBox);
    formGroupBox->setLayout(layout);
}

Dans la fonction ` createFormGroupBox() `, nous utilisons un ` QFormLayout ` pour organiser proprement les objets en deux colonnes : « nom » et « champ ». Il y a trois objets ` QLabel ` pour les noms, avec trois widgets de saisie correspondants comme champs : un ` QLineEdit`, un ` QComboBox ` et un ` QSpinBox`. Contrairement à ` QBoxLayout::addWidget()` et ` QGridLayout::addWidget()`, nous utilisons ` QFormLayout::addRow()` pour ajouter des widgets à la mise en page.

Exemple de projet sur code.qt.io