Qt Jambi : disposer les choses

| Natim | dourouc05 |

Plusieurs possibilités pour agencer les widgets (objets graphiques) dans une fenêtre : cela s'appelle les layouts (ou dispositions).

Commentez

- Titre : Qt Jambi : disposer les choses

- Auteurs : Natim, dourouc05

- Parution : 28 avril 2011

- Mise à jour : 27 juin 2011

- Licence :

Sommaire

- I. Trois types de disposition

- II. QHBoxLayout

- III. QVBoxLayout

- IV. QGridLayout

- V. Exercice

- V-A. Aide

- V-A-1. Comment utiliser QGroupBox ?

- V-A-2. Comment utiliser QDialogButtonBox ?

- V-A-3. Et pour les autres ?

- VI. Remerciements

I - Trois types de disposition

Pour disposer les objets dans une fenêtre, on a trois possibilités :

- QHBoxLayout pour placer les éléments horizontalement ;

- QVBoxLayout pour placer les éléments verticalement ;

- QGridLayout pour disposer les éléments comme on veut.

Voici à quoi ça ressemble :

QHBoxLayout

QVBoxLayout

QGridLayout

II - QHBoxLayout

import com.trolltech.qt.gui.QApplication;
import com.trolltech.qt.gui.QWidget;
import com.trolltech.qt.gui.QPushButton;
import com.trolltech.qt.gui.QHBoxLayout;

public class LoginBox extends QWidget
{
public LoginBox()
{
QPushButton button1 = new QPushButton("One");
QPushButton button2 = new QPushButton("Two");
QPushButton button3 = new QPushButton("Three");
QPushButton button4 = new QPushButton("Four");
QPushButton button5 = new QPushButton("Five");

QHBoxLayout layout = new QHBoxLayout();
layout.addWidget(button1);
layout.addWidget(button2);
layout.addWidget(button3);
layout.addWidget(button4);
layout.addWidget(button5);

setLayout(layout);
}

public static void main(String args[])
{
QApplication.initialize(args);

LoginBox widget = new LoginBox();
widget.show();

QApplication.exec();
}
}

Comme on peut le voir, ce n'est pas bien compliqué.

QHBoxLayout layout = new QHBoxLayout();

On crée un layout.

layout.addWidget(button1);
layout.addWidget(button2);
layout.addWidget(button3);
layout.addWidget(button4);
layout.addWidget(button5);

Puis on lui ajoute des widgets (dans l'ordre).

setLayout(layout);

On fixe le layout comme élément principal du widget.

À noter qu'il y a deux méthodes pour fixer l'élément central :

- setLayout() ;

- setWidget().

De même, si on voulait ajouter un layout dans un autre layout, on utiliserait addLayout() et non addWidget().

III - QVBoxLayout

import com.trolltech.qt.gui.QApplication;
import com.trolltech.qt.gui.QWidget;
import com.trolltech.qt.gui.QPushButton;
import com.trolltech.qt.gui.QVBoxLayout;

public class LoginBox extends QWidget
{
public LoginBox()
{
QPushButton button1 = new QPushButton("One");
QPushButton button2 = new QPushButton("Two");
QPushButton button3 = new QPushButton("Three");
QPushButton button4 = new QPushButton("Four");
QPushButton button5 = new QPushButton("Five");

QVBoxLayout layout = new QVBoxLayout();
layout.addWidget(button1);
layout.addWidget(button2);
layout.addWidget(button3);
layout.addWidget(button4);
layout.addWidget(button5);

setLayout(layout);
}

public static void main(String args[])
{
QApplication.initialize(args);

LoginBox widget = new LoginBox();
widget.show();

QApplication.exec();
}
}

IV - QGridLayout

import com.trolltech.qt.gui.QApplication;
import com.trolltech.qt.gui.QWidget;
import com.trolltech.qt.gui.QPushButton;
import com.trolltech.qt.gui.QGridLayout;

public class GridBox extends QWidget
{
public GridBox()
{
QPushButton button1 = new QPushButton("One");
QPushButton button2 = new QPushButton("Two");
QPushButton button3 = new QPushButton("Three");
QPushButton button4 = new QPushButton("Four");
QPushButton button5 = new QPushButton("Five");

QGridLayout layout = new QGridLayout();
layout.addWidget(button1, 0, 0);
layout.addWidget(button2, 0, 1);
layout.addWidget(button3, 1, 0, 1, 2);
layout.addWidget(button4, 2, 0);
layout.addWidget(button5, 2, 1);

setLayout(layout);
}

public static void main(String args[])
{
QApplication.initialize(args);

GridBox widget = new GridBox();
widget.show();

QApplication.exec();
}
}

Pour chaque widget ou layout qu'on ajoute à notre Grid, on définit sa case de départ (ligne, colonne) et, si elle fait plus d'une case, on donne le nombre de cases qu'elle prend sur la ligne et sur la colonne (rowspan, colspan). La première ligne et la première colonne commencent à 0, le premier bouton se trouve donc en (0,0), le deuxième sur la même ligne mais dans la cellule 1 (0,1). Le bouton de la deuxième ligne va prendre deux cases. Il commence à la cellule 1 de la deuxième ligne (0,1) et s'étend sur une ligne et deux colonnes (0, 1, 1, 2).

V - Exercice

Maintenant, il faut pratiquer un peu.Voici à quoi doit ressembler votre fenêtre :

Cette fenêtre vous permet de mettre en pratique tous les types de dispositions vus précédemment (bien qu'on puisse tous les faire avec des grilles) :

- QHBoxLayout ;

- QVBoxLayout ;

- QGridLayout.

Pour les widgets, on utilise :

- QGroupBox ;

- QLabel ;

- QLineEdit ;

- QCheckBox ;

- QDialogButtonBox.

V-A - Aide

V-A-1 - Comment utiliser QGroupBox ?

QGridLayout loginLayout = new QGridLayout();
// On fabrique le layout ou le widget principal
loginGroup.setLayout(loginLayout);
// ou
loginGroup.setWidget(loginWidget);

V-A-2 - Comment utiliser QDialogButtonBox ?

QDialogButtonBox boutons = new QDialogButtonBox();
boutons.addButton(QDialogButtonBox.StandardButton.Ok);
boutons.addButton(QDialogButtonBox.StandardButton.Cancel);

V-A-3 - Et pour les autres ?

Pour les autres widgets, on lit la documentation et on fait fonctionner ses méninges.

VI - Remerciements

Merci à Thibaut Cuvelier pour la mise en page et à Jacques Thery pour la relecture !