Exemple de mise en page graphique de base

L'exemple « Mises en page graphiques de base » montre comment utiliser les classes de mise en page disponibles dans QGraphicsView: QGraphicsLinearLayout et QGraphicsGridLayout. Il explique également comment créer votre propre élément de mise en page personnalisé.

Définition de la classe Window

La classe ` Window ` est une sous-classe de ` QGraphicsWidget`. Elle dispose d’un constructeur dont le paramètre est un ` QGraphicsWidget ` parent.

class Window : public QGraphicsWidget
{
    Q_OBJECT
public:
    Window(QGraphicsWidget *parent = nullptr);

};

Implémentation de la classe Window

Le constructeur de ` Window ` instancie un objet ` QGraphicsLinearLayout `, ` windowLayout`, avec une orientation verticale. Nous instancions un autre objet ` QGraphicsLinearLayout `, ` linear`, dont le parent est ` windowLayout`. Ensuite, nous créons un objet ` LayoutItem `, ` item `, et l’ajoutons à ` linear ` à l’aide de la fonction ` addItem()`. Nous fournissons également à ` item ` un ` stretchFactor`.

    QGraphicsLinearLayout *windowLayout = new QGraphicsLinearLayout(Qt::Vertical);
    QGraphicsLinearLayout *linear = new QGraphicsLinearLayout(windowLayout);
    LayoutItem *item = new LayoutItem;
    linear->addItem(item);
    linear->setStretchFactor(item, 1);

Nous répétons le processus :

• créer un nouveau LayoutItem,
• ajouter l'élément linear, et
• définir un facteur d’étirement.

    item = new LayoutItem;
    linear->addItem(item);
    linear->setStretchFactor(item, 3);
    windowLayout->addItem(linear);

Nous ajoutons ensuite linear à windowLayout, en imbriquant deux objets QGraphicsLinearLayout. Outre l’ QGraphicsLinearLayout, nous utilisons également un objet QGraphicsGridLayout, grid, qui est une grille 4x3 dont certaines cellules s’étendent sur d’autres lignes.

Nous créons sept objets ` LayoutItem ` et les plaçons dans ` grid ` à l’aide de la fonction ` addItem()`, comme le montre l’extrait de code ci-dessous :

    QGraphicsGridLayout *grid = new QGraphicsGridLayout(windowLayout);
    item = new LayoutItem;
    grid->addItem(item, 0, 0, 4, 1);
    item = new LayoutItem;
    item->setMaximumHeight(item->minimumHeight());
    grid->addItem(item, 0, 1, 2, 1, Qt::AlignVCenter);
    item = new LayoutItem;
    item->setMaximumHeight(item->minimumHeight());
    grid->addItem(item, 2, 1, 2, 1, Qt::AlignVCenter);
    item = new LayoutItem;
    grid->addItem(item, 0, 2);
    item = new LayoutItem;
    grid->addItem(item, 1, 2);
    item = new LayoutItem;
    grid->addItem(item, 2, 2);
    item = new LayoutItem;
    grid->addItem(item, 3, 2);
    windowLayout->addItem(grid);

Le premier élément que nous ajoutons à ` grid ` est placé dans la cellule supérieure gauche et s'étend sur quatre lignes. Les deux éléments suivants sont placés dans la deuxième colonne et s’étendent sur deux lignes. Les propriétés ` maximumHeight()` et ` minimumHeight()` de chaque élément sont définies sur une valeur égale afin qu’ils ne s’étendent pas verticalement. Par conséquent, ces éléments ne tiendront pas verticalement dans leurs cellules. Nous spécifions donc qu’ils doivent être alignés verticalement au centre de la cellule à l’aide de ` Qt::AlignVCenter`.

Enfin, grid est lui-même ajouté à windowLayout. Contrairement à QGridLayout::addItem(), QGraphicsGridLayout::addItem() nécessite une ligne et une colonne comme arguments, précisant dans quelle cellule l’élément doit être positionné. De plus, si les arguments rowSpan et columnSpan sont omis, leur valeur par défaut est 1.

Notez que nous ne spécifions pas de parent pour chaque LayoutItem que nous construisons, car tous ces éléments seront ajoutés à windowLayout. Lorsque nous ajoutons un élément à une mise en page, il est automatiquement rattaché au widget sur lequel la mise en page est installée.

    setLayout(windowLayout);
    setWindowTitle(tr("Basic Graphics Layouts Example"));

Maintenant que nous avons configuré ` grid ` et l’avons ajouté à ` windowLayout`, nous installons ` windowLayout ` sur l’objet fenêtre à l’aide de ` QGraphicsWidget::setLayout()` et nous définissons le titre de la fenêtre.

Définition de la classe `LayoutItem`

La classe LayoutItem est une sous-classe de QGraphicsLayoutItem et de QGraphicsItem. Elle dispose d’un constructeur, d’un destructeur et de quelques réimplémentations obligatoires. Comme elle hérite de QGraphicsLayoutItem, elle doit réimplémenter {QGraphicsLayoutItem::setGeometry()}{setGeometry()} et {QGraphicsLayoutItem::sizeHint()}{sizeHint()}. De plus, comme elle hérite de QGraphicsItem, elle doit réimplémenter {QGraphicsItem::boundingRect()}{boundingRect()} et {QGraphicsItem::paint()}{paint()}.

class LayoutItem : public QGraphicsLayoutItem, public QGraphicsItem
{
public:
    LayoutItem(QGraphicsItem *parent = nullptr);

    // Inherited from QGraphicsLayoutItem
    void setGeometry(const QRectF &geom) override;
    QSizeF sizeHint(Qt::SizeHint which, const QSizeF &constraint = QSizeF()) const override;

    // Inherited from QGraphicsItem
    QRectF boundingRect() const override;
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = nullptr) override;

private:
    QPixmap m_pix;
};

La classe ` LayoutItem ` dispose également d'une instance privée de ` QPixmap` et ` m_pix`.

Implémentation de la classe LayoutItem

Dans le constructeur de LayoutItem, m_pix est instancié et l’image block.png y est chargée.

LayoutItem::LayoutItem(QGraphicsItem *parent)
    : QGraphicsLayoutItem(), QGraphicsItem(parent),
      m_pix(QPixmap(QLatin1String(":/images/block.png")))
{
    setGraphicsItem(this);
}

Nous utilisons la macro Q_UNUSED() pour empêcher le compilateur de générer des avertissements concernant les paramètres inutilisés.

void LayoutItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option,
                       QWidget *widget)
{
    Q_UNUSED(widget);
    Q_UNUSED(option);

    QRectF frame(QPointF(0, 0), geometry().size());
    const QSize pmSize = m_pix.size();
    QGradientStops stops;

Le principe de la fonction paint() est de dessiner le rectangle d’arrière-plan, puis de dessiner un rectangle autour de la carte de pixels.

    // paint a background rect (with gradient)
    QLinearGradient gradient(frame.topLeft(), frame.topLeft() + QPointF(200,200));
    stops << QGradientStop(0.0, QColor(60, 60,  60));
    stops << QGradientStop(frame.height() / 2 / frame.height(), QColor(102, 176, 54));

    //stops << QGradientStop(((frame.height() + h)/2 )/frame.height(), QColor(157, 195,  55));
    stops << QGradientStop(1.0, QColor(215, 215, 215));
    gradient.setStops(stops);
    painter->setBrush(QBrush(gradient));
    painter->drawRoundedRect(frame, 10.0, 10.0);

    // paint a rect around the pixmap (with gradient)
    QPointF pixpos = frame.center() - (QPointF(pmSize.width(), pmSize.height()) / 2);
    QRectF innerFrame(pixpos, pmSize);
    innerFrame.adjust(-4, -4, 4, 4);
    gradient.setStart(innerFrame.topLeft());
    gradient.setFinalStop(innerFrame.bottomRight());
    stops.clear();
    stops << QGradientStop(0.0, QColor(215, 255, 200));
    stops << QGradientStop(0.5, QColor(102, 176, 54));
    stops << QGradientStop(1.0, QColor(0, 0,  0));
    gradient.setStops(stops);
    painter->setBrush(QBrush(gradient));
    painter->drawRoundedRect(innerFrame, 10.0, 10.0);
    painter->drawPixmap(pixpos, m_pix);
}

La réimplémentation de boundingRect() définira le coin supérieur gauche à (0,0), et sa taille correspondra à celle des éléments de mise en page geometry(). C’est la zone dans laquelle nous effectuons le dessin.

QRectF LayoutItem::boundingRect() const
{
    return QRectF(QPointF(0, 0), geometry().size());
}

La réimplémentation de ` setGeometry()` appelle simplement l’implémentation de sa classe de base. Cependant, comme cela modifie le `boundingRect`, nous devons également appeler ` prepareGeometryChange()`. Enfin, nous déplaçons l’élément conformément à ` geom.topLeft()`.

void LayoutItem::setGeometry(const QRectF &geom)
{
    prepareGeometryChange();
    QGraphicsLayoutItem::setGeometry(geom);
    setPos(geom.topLeft());
}

Comme nous ne voulons pas que la taille de l’élément soit inférieure à celle de la pixmap, nous devons veiller à renvoyer une indication de taille supérieure à celle de ` m_pix`. Nous ajoutons également un peu d’espace supplémentaire tout autour pour les bordures que nous dessinerons plus tard. Sinon, vous pouvez mettre l’image à l’échelle pour éviter que l’élément ne devienne plus petit que l’image. La taille recommandée correspond à la taille minimale indiquée, tandis que nous définissons la taille maximale sur une valeur élevée

QSizeF LayoutItem::sizeHint(Qt::SizeHint which, const QSizeF &constraint) const
{
    switch (which) {
    case Qt::MinimumSize:
    case Qt::PreferredSize:
        // Do not allow a size smaller than the pixmap with two frames around it.
        return m_pix.size() + QSize(12, 12);
    case Qt::MaximumSize:
        return QSizeF(1000,1000);
    default:
        break;
    }
    return constraint;
}

Exemple de projet sur code.qt.io