Introduction
![Logo](../../I/OOjs_UI_icon_alert-warning.svg.png.webp)
Qt designer est une série d'outils intégrés dans Qt Creator permettant de créer graphiquement des interfaces graphiques de l'application. Lors de la compilation elles seront automatiquement reconverties en c++ et donc utilisables comme des classes normales.
Utilisation
![](../../I/Qt-Designer-4-3-4.png.webp)
![](../../I/Logo_travaux_orange.svg.png.webp)
Incorporation
Après avoir dessiné l'interface, enregistrez votre fichier (pour l'exemple ce sera widget.ui). Dans le fichier essais.pro, ajoutez la ligne :
FORMS = widget.ui
Pour l'exploiter dans un programme il faudra créer une classe héritant du widget de cette manière :
![]() |
mainwindow.h Classe basique de fenêtre graphique |
---|---|
#include <QWidget>
#include "ui_widget.h"
class MainWindow : public QWidget, public Ui::Widget
{
public:
MainWindow(QWidget *parent = 0);
};
|
![]() |
mainwindow.cpp Classe basique de fenêtre graphique |
---|---|
#include <QtGui>
MainWindow::MainWindow(QWidget *parent) : QWidget(parent)
{
setupUi(this);
}
|
Présentation
Qt Designer est disponible en lançant Qt Creator depuis Menu démarrer > Tous les programmes > Qt SDK > Qt Creator (windows).
Code
L'exemple est une calculatrice à fabriquer sous Qt designer.
Le tableau ci-dessous liste les composants de la fenêtre :
Widget | Nom de l'objet |
---|---|
QSpinBox |
nombre1 |
QComboBox |
operation |
QSpinBox |
nombre2 |
QPushButton |
boutonEgal |
QLabel |
resultat |
.pro
Il faut modifier le fichier .pro :
######################################################################
# Automatically generated by qmake (2.01a) lun. 2. juin 12:00:20 2008
######################################################################
TEMPLATE = app
TARGET =
DEPENDPATH += .
INCLUDEPATH += .
# Input
FORMS += calculatrice.ui
SOURCES += main.cpp
ATTENTION ! Il faut faire qmake
, make
pour lancer, et ne pas mettre qmake -project
, sinon Qt régénérera un un fichier .pro normal.
main.cpp
voici le main.cpp:
#include <QApplication>
#include <QtGui>
#include "ui_calculatrice.h"
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QWidget *fenetre = new QWidget;
Ui::FenCalculatrice ui;
ui.setupUi(fenetre);
fenetre->show();
return app.exec();
}
FenCalculatrice.cpp
#include "FenCalculatrice.h"
FenCalculatrice::FenCalculatrice(QWidget *parent) : QWidget(parent)
{
ui.setupUi(this);
connect(ui.boutonEgal, SIGNAL(clicked()), this, SLOT(calculerOperation()));
}
header files (.h)
FenCalculatrice.h
#ifndef HEADER_FENCALCULATRICE
#define HEADER_FENCALCULATRICE
#include <QtGui>
#include "ui_calculatrice.h"
class FenCalculatrice : public QWidget
{
Q_OBJECT
public:
FenCalculatrice(QWidget *parent = 0);
private slots:
/* Insérez les prototypes de vos slots personnalisés ici */
private:
Ui::FenCalculatrice ui;
};
#endif
Liens externes
- Tutoriel QT designer sur Le site du zero.