Qt Tutoriel
Démarrer avec Qt

Remarques

Versions

Installation et configuration sous Windows et Linux

Téléchargez la version Open Source de Qt pour Linux

Allez sur https://www.qt.io/download-open-source/ et cliquez sur Download Now, assurez-vous de télécharger le programme d’installation de Qt pour Linux.

Un fichier nommé qt-unified-linux-x-online.run sera téléchargé, puis ajoutera une autorisation d'exécution

chmod +x qt-unified-linux-x-online.run

N'oubliez pas de changer 'x' pour la version actuelle du programme d'installation. Puis lancez l'installateur

./qt-unified-linux-x-online.run

Télécharger la version Qt pour Windows Open Source

Allez sur https://www.qt.io/download-open-source/ . La capture d'écran suivante montre la page de téléchargement sous Windows:

Ce que vous devez faire maintenant dépend de l’EDI que vous allez utiliser. Si vous envisagez d'utiliser Qt Creator, qui est inclus dans le programme d'installation, cliquez simplement sur Télécharger maintenant et lancez l'exécutable.

Si vous utilisez Qt dans Visual Studio, le bouton Télécharger maintenant devrait également fonctionner. Assurez-vous que le fichier téléchargé s'appelle qt-opensource-windows-x86-msvc2015_64-xxxexe ou qt-opensource-windows-x86-msvc2015_32-xxxexe (où xxx est la version de Qt, par exemple 5.7.0). Si ce n'est pas le cas, cliquez sur Afficher tous les téléchargements et sélectionnez l'une des quatre premières options sous Windows Host.

Si vous envisagez d'utiliser Qt dans Code :: Blocks, cliquez sur Afficher tous les téléchargements et sélectionnez Qt xxx pour Windows 32 bits (MinGW xxx, 1,2 Go) sous hôte Windows.

Une fois que vous avez téléchargé le fichier d'installation approprié, exécutez le fichier exécutable et suivez les instructions ci-dessous. Notez que vous devez être un administrateur pour installer Qt. Si vous n'êtes pas administrateur, vous pouvez trouver plusieurs solutions alternatives ici .

Installez Qt dans n'importe quel système opérationnel

Une fois que vous avez téléchargé Qt et ouvert le programme d'installation, la procédure d'installation est la même pour tous les systèmes opérationnels, bien que les captures d'écran puissent être un peu différentes. Les captures d'écran fournies ici proviennent de Linux.

Connectez-vous avec un compte Qt existant ou créez-en un nouveau:

Sélectionnez un chemin pour installer les bibliothèques et les outils Qt

Sélectionnez la version de la bibliothèque et les fonctionnalités souhaitées

Une fois le téléchargement terminé et l'installation terminée, accédez au répertoire d'installation de Qt et lancez Qt Creator ou exécutez-le directement à partir de la ligne de commande.

Bonjour le monde

Dans cet exemple, nous créons et affichons simplement un bouton-poussoir dans un cadre de fenêtre sur le bureau. Le bouton poussoir aura le label Hello world!

Cela représente le programme Qt le plus simple possible.

Tout d'abord, nous avons besoin d'un fichier de projet:

helloworld.pro

QT       += core gui

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = helloworld
TEMPLATE = app

SOURCES += main.cpp

• QT est utilisé pour indiquer quelles bibliothèques (modules Qt) sont utilisées dans ce projet. Comme notre première application est une petite interface graphique, nous aurons besoin de QtCore et de QtGui. Comme Qt5 sépare QtWidgets de QtGui, nous avons besoin d'ajouter greaterThan ligne plus grande afin de la compiler avec Qt5.
• CIBLE est le nom de l'application ou de la bibliothèque.
• TEMPLATE décrit le type à construire. Il peut s'agir d'une application (app), d'une bibliothèque (lib) ou simplement de sous-répertoires (sous-répertoires).
• SOURCES est une liste de fichiers de code source à utiliser lors de la création du projet.

Nous avons également besoin du fichier main.cpp contenant une application Qt:

main.cpp

#include <QApplication>
#include <QPushButton>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QPushButton button ("Hello world!");
    button.show();

    return a.exec(); // .exec starts QApplication and related GUI, this line starts 'event loop'    
}

• QApplication object. Cet objet gère les ressources à l'échelle de l'application et est nécessaire pour exécuter tout programme Qt doté d'une interface graphique. Il nécessite argv et args car Qt accepte quelques arguments de ligne de commande. Lors de l'appel de a.exec() la boucle d'événement Qt est lancée.
• Objet QPushButton. Le bouton poussoir avec l'étiquette Hello world! . La ligne suivante, button.show() , montre le bouton-poussoir sur l'écran dans son propre cadre de fenêtre.

Enfin, pour exécuter l'application, ouvrez une invite de commande et entrez le répertoire dans lequel vous avez le fichier .cpp du programme. Tapez les commandes shell suivantes pour générer le programme.

qmake -project
qmake
make

Application de base avec QtCreator et QtDesigner

QtCreator est actuellement le meilleur outil pour créer une application Qt. Dans cet exemple, nous allons voir comment créer une application Qt simple qui gère un bouton et écrit du texte.

Pour créer une nouvelle application, cliquez sur Fichier-> Nouveau fichier ou projet:

Ensuite, choisissez l'application Projets-> Application-> Qt Widgets

Ensuite, vous pouvez choisir le nom et le chemin de votre projet:

Ensuite, vous pouvez choisir les kits que vous utiliserez. Si vous n'avez pas de kit, QtCreator créera un kit avec votre version de Qt et le compilateur principal de votre ordinateur. Si vous n'avez pas de compilateur, vous pouvez en installer un. Sous Windows: installez Visual Studio. Sur Linux / Mac: installez g ++ ou clang ++.

Ensuite, vous pouvez choisir le nom de votre classe de fenêtre principale, la classe héritée, le nom du fichier correspondant à votre classe de fenêtre principale. Si vous apprenez ou testez Qt, vous n'avez pas vraiment besoin de les modifier.

La dernière étape peut être de choisir un sous-projet de ce projet et d'ajouter un contrôle de version tel que git et svn. Encore une fois, si ce n'est que pour les tests, vous n'avez pas besoin de les modifier.

Cliquez ensuite sur le bouton Terminer. Maintenant, vous devriez être ici:

C'est la base de votre application. Si vous l'exécutez maintenant en cliquant sur Build-> Run ou ctrl + R (par défaut), vous verrez une fenêtre vide.

Maintenant, nous allons ajouter un texte et un bouton. pour ce faire, nous utiliserons Qt Designer. Double-cliquez sur le mainwindow.ui Alors maintenant, vous devriez voir: (sinon et vous voyez un fichier XML, cliquez sur le bouton de conception à gauche)

Voici Qt Designer! Semble assez compliqué. Mais une fois que vous vous êtes habitué, c'est vraiment génial. Nous allons ajouter du texte et un bouton. A gauche, il y a la liste des articles. Vous pouvez cliquer sur un et faire glisser les objets. Cliquez sur le bouton poussoir et déposez-le dans la fenêtre. Puis recherchez l'étiquette et faites la même chose (vous avez un filtre en haut à gauche où vous pouvez écrire l'objet que vous recherchez).

Vous devriez avoir quelque chose comme ça maintenant:

En double-cliquant sur l'objet, vous pouvez modifier le texte. Ou vous pouvez voir en bas à droite les propriétés de l'objet que vous êtes maintenant et trouver la propriété text. Ici vous pouvez également changer le nom.

Maintenant, si vous enregistrez et exécutez (il est préférable de cliquer sur le bouton Modifier, puis de sauvegarder à nouveau pour vous assurer que vos modifications ont bien été enregistrées), vous obtenez:

Hein? Pourquoi mon label et mon bouton sont comme ça quand je cours? C'est parce qu'il n'y a pas de mise en page dans notre objet central. Au fait, si vous redimensionnez votre fenêtre principale, vous pouvez voir que l’objet conserve sa place. Donc, pour le réparer, nous allons ajouter une mise en page. Disons une disposition verticale. Faites donc glisser et déposez une disposition verticale de la liste d'objets à gauche. Maintenant, vous devriez voir:

Une mise en page flottante.

Alors maintenant, faites un clic droit sur la fenêtre principale, n'importe où, sauf sur l'étiquette et le bouton. c \ Cliquez sur Disposition-> Disposition verticale. Maintenant, vous devriez voir que vos objets sont alignés verticalement dans votre fenêtre. Alors maintenant, déplacez (avec le glisser-déposer à nouveau) votre étiquette et votre bouton dans la mise en page. maintenant vous devriez obtenir:

Dans votre concepteur. Et si vous exécutez votre application:

Ici vous pouvez voir votre application avec l'étiquette et le bouton. Et si vous redimensionnez votre fenêtre, l'étiquette et le bouton sont également redimensionnés.

Mais notre bouton ne fait toujours rien. Nous pouvons le changer de 2 manières différentes. La première consiste à connecter le bouton avec une méthode que nous avons créée. Nous pouvons le faire avec le nom de la méthode connect. Revenons donc à notre code et allons maintenant à mainwindow.cpp ajouter:

connect(ui->pushButton, SIGNAL(clicked(bool)), this, SLOT(whenButtonIsClicked()));

Dans le constructeur de votre fenêtre principale APRÈS l' ui->setupUI(this); qui initialise l'interface utilisateur.

Ensuite, nous pouvons créer le MainWindow :: whenButtonIsClicked () dans notre classe .cpp qui pourrait changer le texte de l'étiquette comme ceci:

void MainWindow::whenButtonIsClicked()
{
    ui->label->setText("the button has been clicked !");
}

Et dans notre mainwindow.h, nous devons ajouter:

public slots:
    void whenButtonIsClicked();

Les slots publics signifient que cette méthode peut être appelée lorsqu'un signal est reçu. connecter le signal lorsque nous cliquons sur le bouton et une méthode pour appeler.

Alors maintenant, si nous exécutons notre application et cliquez sur le bouton, nous obtenons:

Ce qui signifie que notre connexion fonctionne. Mais avec Qt Designer, nous avons un moyen encore plus simple de le faire. Si vous voulez faire autrement, retirez la connexion pour déconnecter le bouton (parce que nous allons le connecter différemment), revenez à mainwindow.ui et cliquez avec le bouton droit sur le bouton. Cliquez sur Aller à l'emplacement ..., sélectionnez cliqué () et appuyez sur OK.

Alors vous devriez être déplacé à cette fonction:

void MainWindow::on_pushButton_clicked()
{
}

C'est la fonction qui sera appelée lorsque vous cliquez sur le bouton. Donc, vous pouvez ajouter

ui->label->setText("it's even easier !");

Dans ça. Allez dans le fichier mainwindow.h pour enregistrer le changement (lorsque vous faites un aller à l'emplacement, il crée une méthode liée au signal que vous avez demandé. Il définit la fonction dans le .h mais ne l'enregistre pas. Vous devriez donc aller au fichier et enregistrez-le).

Et maintenant, lorsque vous exécutez votre application et que vous appuyez sur le bouton, vous pouvez voir le nouveau message (si vous voyez toujours l'ancien, c'est que vous n'avez pas supprimé la connexion).

Nous pouvons également ajouter un int, double, etc dans notre label grâce à QVariant qui est une classe géniale qui peut convertir beaucoup de choses dans beaucoup d'autres choses. Donc, ajoutez un int qui augmente lorsque vous appuyez sur le bouton.

Donc le .h:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

public slots:
    void whenButtonIsClicked();

private slots:
    void on_pushButton_clicked();

private:
    Ui::MainWindow  *ui;
    double          _smallCounter;
};

#endif // MAINWINDOW_H

Le .cpp:

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
//    connect(ui->pushButton, SIGNAL(clicked(bool)), this, SLOT(whenButtonIsClicked()));
    _smallCounter = 0.0f;
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::whenButtonIsClicked()
{
    ui->label->setText("the button has been clicked !");
}

void MainWindow::on_pushButton_clicked()
{
    _smallCounter += 0.5f;
    ui->label->setText("it's even easier ! " + QVariant(_smallCounter).toString());
}

Et maintenant, nous pouvons enregistrer et exécuter à nouveau. Chaque fois que vous cliquez sur le bouton, il affiche "c'est encore plus facile!" Avec la valeur de _smallCounter. Donc, vous devriez avoir quelque chose comme:

Ce tutoriel est terminé. Si vous voulez en savoir plus sur Qt, voyons les autres exemples et la documentation de Qt sur la documentation StackOverflow ou la documentation Qt