Cours:DiyWidgetQT : Différence entre versions

De troyesGEII
Aller à : navigation, rechercher
(Principe)
 
(8 révisions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
 +
=Principe=
 +
 
Pour créer votre propre Widget, il convient de spécialiser la classe [https://doc.qt.io/qt-5/qwidget.html QWidget] :
 
Pour créer votre propre Widget, il convient de spécialiser la classe [https://doc.qt.io/qt-5/qwidget.html QWidget] :
  
Ligne 20 : Ligne 22 :
 
</source>
 
</source>
  
Cette méthode ne sera {{Rouge|pas appelée directement}}. On utilisera au besoin [https://doc.qt.io/qt-5/qwidget.html#paintEvent les méthodes {{Rouge|update}} ou {{Rouge|repaint}}] au besoin !
+
Cette méthode ne sera {{Rouge|pas appelée directement}}. On utilisera [https://doc.qt.io/qt-5/qwidget.html#paintEvent les méthodes {{Rouge|update}} ou {{Rouge|repaint}}] au besoin !
  
  
Ligne 29 : Ligne 31 :
 
{
 
{
 
     QPainter painter(this);
 
     QPainter painter(this);
 +
    QPen pen;
 +
 +
    pen.setWidth(4);
 +
    pen.setColor(QColor(255,0,0));
 +
    painter.setBrush(QColor(0,220,220));
 +
    painter.setPen(pen);
 +
    painter.drawRect(10,10,width()-20,height()-20);
  
     painter.drawRect(width()/4,height()/4,
+
    pen.setWidth(10);
                    width()/2,height()/2);
+
    pen.setColor(QColor(0,0,0));
 +
     painter.setBrush(QColor(0,200,0));
 +
    painter.setPen(pen);
 +
    QPointF centre(width()/2,height()/2);
 +
    painter.drawEllipse(centre,50,50);
  
 
}
 
}
Ligne 37 : Ligne 50 :
  
  
On pourra ensuite ajouter un objet de ce type dans l'interface graphique par exemple en faisant une promotion comme [[Cours:HeritageWidgetQT|{{Rouge|vu dans une autre séance}}]]
+
On pourra ensuite ajouter un objet de ce type dans l'interface graphique :
 
+
*soit en faisant une promotion comme [[Cours:HeritageWidgetQT|{{Rouge|cf sur cette page}}]]
ou ajouter un attribut dans la classe MainWindow puis ajouter cet objet dans l'interface graphique, par ex :
+
*soit en créant un attribut dans la classe MainWindow
 +
**modifier la déclaration de la classe MainWindow :
 
<source lang=cpp>
 
<source lang=cpp>
 +
  // .h
 
   ...
 
   ...
  // .h
 
 
   MonWidget monWidget
 
   MonWidget monWidget
 
   ...
 
   ...
 
+
</source>
 +
**dans l'interface graphique :
 +
***ajouter un objet de type QWidget que l'on nommera {{Rouge|zoneWidget}}
 +
***ajouter un QPushButton dans ce zoneWidget
 +
***sélectionner zone et définir un {{Rouge|layout}} :
 +
****dans la barre d'icone en haut de l'écran
 +
****choisir "mettre en page horizontalement"
 +
***supprimer le QPushButton
 +
**on peut alors ajouter l'objet monWidget dans zone :
 +
<source lang=cpp>
 +
  // .cpp
 
   ...
 
   ...
  // .cpp
+
   ui->zone->layout()->addWidget(&monWidget);
   ui->unWidget->layout()->addWidget(&monWidget);
 
 
   // ou
 
   // ou
   setCentralWidget(&monWidget);
+
   // setCentralWidget(&monWidget);
 
</source>
 
</source>
 +
 +
=Ajout de fonctionnalité=
 +
 +
*ajouter 4 boutons sur l'interface graphique
 +
**haut
 +
**bas
 +
**gauche
 +
**droite
 +
*chaque appui sur un bouton permettra de déplacer la balle dans le sens indiqué
 +
 +
=Jeu de pong=
 +
 +
On souhaite créer un jeu de pong.
 +
 +
Un widget de type [https://doc.qt.io/archives/qt-5.15/qslider.html QSlider] permettra de déplacer la raquette.
 +
 +
{{Question|réaliser un diagramme d'état et d'objet puis coder l'application}}

Version actuelle datée du 29 septembre 2025 à 07:33

Principe

Pour créer votre propre Widget, il convient de spécialiser la classe QWidget :

class MonWidget : public QWidget
{
    Q_OBJECT
public:
    MonWidget(QWidget *parent = nullptr);

signals:
};


Il suffit ensuite de redéfinir la méthode paintEvent qui est bien entendue déclarée comme virtual dans la classe QWidget !

protected:
    void paintEvent(QPaintEvent *event) override;

Cette méthode ne sera pas appelée directement. On utilisera les méthodes update ou repaint au besoin !


On utilisera la classe QPainter pour faire le dessin du widget, ex :

void MonWidget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    QPen pen;

    pen.setWidth(4);
    pen.setColor(QColor(255,0,0));
    painter.setBrush(QColor(0,220,220));
    painter.setPen(pen);
    painter.drawRect(10,10,width()-20,height()-20);

    pen.setWidth(10);
    pen.setColor(QColor(0,0,0));
    painter.setBrush(QColor(0,200,0));
    painter.setPen(pen);
    QPointF centre(width()/2,height()/2);
    painter.drawEllipse(centre,50,50);

}


On pourra ensuite ajouter un objet de ce type dans l'interface graphique :

  • soit en faisant une promotion comme cf sur cette page
  • soit en créant un attribut dans la classe MainWindow
    • modifier la déclaration de la classe MainWindow :
   // .h
   ...
   MonWidget monWidget
   ...
    • dans l'interface graphique :
      • ajouter un objet de type QWidget que l'on nommera zoneWidget
      • ajouter un QPushButton dans ce zoneWidget
      • sélectionner zone et définir un layout :
        • dans la barre d'icone en haut de l'écran
        • choisir "mettre en page horizontalement"
      • supprimer le QPushButton
    • on peut alors ajouter l'objet monWidget dans zone :
   // .cpp
   ...
   ui->zone->layout()->addWidget(&monWidget);
   // ou
   // setCentralWidget(&monWidget);

Ajout de fonctionnalité

  • ajouter 4 boutons sur l'interface graphique
    • haut
    • bas
    • gauche
    • droite
  • chaque appui sur un bouton permettra de déplacer la balle dans le sens indiqué

Jeu de pong

On souhaite créer un jeu de pong.

Un widget de type QSlider permettra de déplacer la raquette.

Question.jpg réaliser un diagramme d'état et d'objet puis coder l'application