Exemple de mise en page de base

L'exemple de présentation debase montre comment utiliser les gestionnaires de présentation standard disponibles dans Qt : QBoxLayout, QGridLayout, et QFormLayout.

La classe QBoxLayout aligne les widgets horizontalement ou verticalement. QHBoxLayout et QVBoxLayout sont des sous-classes de commodité de QBoxLayout. QGridLayout dispose les widgets dans des cellules en divisant l'espace disponible en lignes et en colonnes. QFormLayout En revanche, la classe de mise en page "Widgets", présente ses enfants sous la forme de deux colonnes, avec des étiquettes dans la colonne de gauche et des 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

Pour exécuter l'exemple à partir de Qt Creatorouvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Définition de la classe Dialog

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 simplifient le constructeur de la classe : les fonctions createMenu(), createHorizontalGroupBox(), createGridGroupBox() et createFormGroupBox() créent plusieurs widgets que l'exemple utilise pour démontrer comment la disposition affecte leur apparence.

Mise en œuvre 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 et la fonction createHorizontalGroupBox() pour créer une boîte de groupe contenant quatre boutons avec une disposition horizontale. Ensuite, nous utilisons la fonction createGridGroupBox() pour créer un cadre contenant plusieurs lignes d'édition et un petit éditeur de texte qui sont affichés dans une grille. Enfin, nous utilisons la fonction createFormGroupBox() pour créer un cadre contenant trois étiquettes et trois champs de saisie : un éditeur de ligne, une boîte combinée et une boîte de dialogue.

    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. La classe QDialogButtonBox est un widget qui présente des boutons dans une disposition appropriée au style du widget actuel. Les boutons préférés peuvent être spécifiés en tant qu'arguments du constructeur, à l'aide de l'énumération QDialogButtonBox::StandardButtons.

Notez qu'il n'est pas nécessaire de spécifier un parent pour les widgets lorsque nous les créons. En effet, tous les widgets que nous créons ici seront ajoutés à une disposition, et lorsque nous ajoutons un widget à une disposition, il est automatiquement réparti sur le widget sur lequel la disposition est installée.

    QVBoxLayout *mainLayout = new QVBoxLayout;

La disposition principale est un objet QVBoxLayout. QVBoxLayout est une classe de commodité pour une disposition en boîte avec une orientation verticale.

En général, la classe QBoxLayout prend l'espace qu'elle reçoit (de sa disposition parentale ou du widget parent), le divise en une série de boîtes et fait en sorte que chaque widget géré remplisse une boîte. Si l'orientation de QBoxLayout est Qt::Horizontal, les cases sont placées en ligne. Si l'orientation est Qt::Vertical, les boîtes sont placées dans une colonne. Les classes de commodité correspondantes sont QHBoxLayout et QVBoxLayout, respectivement.

    mainLayout->setMenuBar(menuBar);

Lorsque nous appelons la fonction QLayout::setMenuBar(), la disposition place la barre de menu fournie en haut du widget parent et à l'extérieur de la zone content margins. 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 présentation. Chaque widget aura au moins sa taille minimale et au plus sa taille maximale. Il est possible de spécifier un facteur d'étirement dans la fonction addWidget(), et tout espace excédentaire est partagé en fonction de ces facteurs d'étirement. S'il n'est pas spécifié, le facteur d'étirement d'un widget est de 0.

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

Nous installons la présentation principale sur le widget Dialog à l'aide de la fonction QWidget::setLayout(), et tous les widgets de la présentation sont automatiquement repartis pour être des enfants du 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 le cadre horizontal, nous utilisons une page QHBoxLayout pour la mise en page interne. Nous créons les boutons que nous voulons placer dans le cadre, nous les ajoutons à la mise en page et nous installons la mise en page sur le cadre.

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

Dans la fonction createGridGroupBox(), nous utilisons un QGridLayout qui dispose les widgets dans une grille. Il prend l'espace mis à sa disposition (par sa disposition parentale ou par le widget parent), le divise en lignes et en colonnes et place chaque widget qu'il gère dans la bonne cellule.

    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 une ligne d'édition associée, et nous les ajoutons à la mise en page. La fonction QGridLayout::addWidget() diffère de la fonction correspondante dans QBoxLayout: elle a besoin de la ligne et de la colonne spécifiant la cellule de la grille dans laquelle placer le widget.

    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::addWidgetLa fonction () peut en outre prendre des arguments spécifiant le nombre de lignes et de colonnes que la cellule doit couvrir. 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, le widget remplit toute la cellule. Mais nous pourrions, par exemple, aligner un widget sur le bord droit en spécifiant que l'alignement doit être Qt::AlignRight.

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

Chaque colonne d'une grille possède un facteur d'étirement. Le facteur d'étirement est défini à l'aide de QGridLayout::setColumnStretch() et détermine la part de l'espace disponible que la colonne obtiendra en plus de son minimum nécessaire.

Dans cet exemple, nous définissons les facteurs d'étirement pour les colonnes 1 et 2. Le facteur d'étirement est relatif aux autres colonnes de la grille ; les colonnes dont le facteur d'étirement est plus élevé occupent une plus grande partie de l'espace disponible. Ainsi, dans notre grille, la colonne 2 occupera une plus grande partie de l'espace disponible que la colonne 1, et la colonne 0 n'augmentera pas du tout puisque son facteur d'étirement est de 0 (valeur par défaut).

Les colonnes et les lignes se comportent de la même manière ; 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 objet QFormLayout pour organiser proprement les objets en deux colonnes : le nom et le 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 disposition.

Exemple de projet @ code.qt.io