Qt Tutorial
Erste Schritte mit Qt

Bemerkungen

Versionen

Installation und Setup unter Windows und Linux

Laden Sie Qt für Linux Open Source Version herunter

Gehen Sie zu https://www.qt.io/download-open-source/ und klicken Sie auf Jetzt herunterladen. Stellen Sie sicher, dass Sie das Qt-Installationsprogramm für Linux herunterladen.

Eine Datei mit dem Namen "qt-unified-linux-x-online.run" wird heruntergeladen und anschließend die Berechtigung für den Executor hinzugefügt

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

Vergessen Sie nicht, "x" für die aktuelle Version des Installationsprogramms zu ändern. Führen Sie dann das Installationsprogramm aus

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

Laden Sie Qt für Windows Open Source Version herunter

Gehen Sie zu https://www.qt.io/download-open-source/ . Der folgende Screenshot zeigt die Download-Seite unter Windows:

Was Sie jetzt tun sollten, hängt davon ab, welche IDE Sie verwenden werden. Wenn Sie Qt Creator verwenden möchten, das im Installationsprogramm enthalten ist, klicken Sie einfach auf Jetzt herunterladen und führen Sie die ausführbare Datei aus.

Wenn Sie Qt in Visual Studio verwenden, sollte normalerweise auch die Schaltfläche Jetzt herunterladen funktionieren. Stellen Sie sicher, dass die heruntergeladene Datei qt-opensource-windows-x86-msvc2015_64-xxxexe oder qt-opensource-windows-x86-msvc2015_32-xxxexe heißt (wobei xxx die Version von Qt ist, beispielsweise 5.7.0). Ist dies nicht der Fall, klicken Sie auf Alle Downloads anzeigen und wählen Sie eine der ersten vier Optionen unter Windows Host aus.

Wenn Sie Qt in Code :: Blocks verwenden möchten, klicken Sie auf Alle Downloads anzeigen und wählen Sie Qt xxx für Windows 32-Bit (MinGW xxx, 1,2 GB) unter Windows-Host aus.

Wenn Sie die entsprechende Installationsdatei heruntergeladen haben, führen Sie die ausführbare Datei aus und befolgen Sie die nachstehenden Anweisungen. Beachten Sie, dass Sie Administrator sein müssen, um Qt zu installieren. Wenn Sie kein Administrator sind, können Sie mehrere alternative Lösungen finden hier .

Installieren Sie Qt in einem beliebigen Betriebssystem

Nachdem Sie Qt heruntergeladen und das Installationsprogramm geöffnet haben, ist das Installationsverfahren für alle Betriebssysteme gleich, obwohl die Screenshots möglicherweise etwas anders aussehen. Die hier zur Verfügung gestellten Screenshots stammen von Linux.

Melden Sie sich mit einem bestehenden Qt-Konto an oder erstellen Sie ein neues:

Wählen Sie einen Pfad zum Installieren der Qt-Bibliotheken und -Tools

Wählen Sie die Bibliotheksversion und die gewünschten Funktionen aus

Wechseln Sie nach dem Herunterladen und der Installation zum Installationsverzeichnis von Qt, und starten Sie Qt Creator oder führen Sie es direkt über die Befehlszeile aus.

Hallo Welt

In diesem Beispiel erstellen wir einfach eine Drucktaste in einem Fensterrahmen auf dem Desktop. Der Druckknopf trägt das Label Hello world!

Dies ist das einfachste mögliche Qt-Programm.

Zunächst brauchen wir eine Projektdatei:

helloworld.pro

QT       += core gui

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = helloworld
TEMPLATE = app

SOURCES += main.cpp

• Mit QT wird angegeben, welche Bibliotheken (Qt-Module) in diesem Projekt verwendet werden. Da unsere erste App eine kleine grafische Benutzeroberfläche ist, benötigen wir QtCore und QtGui. Da Qt5 die QtWidgets von QtGui trennt, müssen Sie die greaterThan hinzufügen, um sie mit greaterThan zu kompilieren.
• TARGET ist der Name der App oder der Bibliothek.
• TEMPLATE beschreibt den zu erstellenden Typ. Es kann sich um eine Anwendung (App), eine Bibliothek (lib) oder einfach um Unterverzeichnisse (Unterverzeichnisse) handeln.
• SOURCES ist eine Liste von Quellcodedateien, die beim Erstellen des Projekts verwendet werden.

Wir benötigen auch die main.cpp, die eine Qt-Anwendung enthält:

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'    
}

• QAnwendungsobjekt Dieses Objekt verwaltet anwendungsweite Ressourcen und ist erforderlich, um ein Qt-Programm auszuführen, das über eine GUI verfügt. Es benötigt argv und args, da Qt einige Befehlszeilenargumente akzeptiert. Beim Aufruf von a.exec() die Qt-Ereignisschleife gestartet.
• QPushButton-Objekt Der Druckknopf mit dem Label Hello world! . Die nächste Zeile, button.show() , zeigt die Drucktaste auf dem Bildschirm in einem eigenen Fensterrahmen.

Öffnen Sie zum Ausführen der Anwendung eine Eingabeaufforderung, und geben Sie das Verzeichnis ein, in dem sich die CPP-Datei des Programms befindet. Geben Sie die folgenden Shellbefehle ein, um das Programm zu erstellen.

qmake -project
qmake
make

Basisanwendung mit QtCreator und QtDesigner

QtCreator ist momentan das beste Werkzeug, um eine Qt-Anwendung zu erstellen. In diesem Beispiel erfahren Sie, wie Sie eine einfache Qt-Anwendung erstellen, die eine Schaltfläche verwaltet und Text schreibt.

Um eine neue Anwendung zu erstellen, klicken Sie auf Datei-> Neue Datei oder Projekt:

Dann wählen Sie die Projects-> Application-> Qt Widgets-Anwendung

Dann können Sie den Namen und den Pfad Ihres Projekts auswählen:

Als Nächstes können Sie die Kits auswählen, die Sie verwenden werden. Wenn Sie kein Kit besitzen, erstellt QtCreator ein Kit mit Ihrer Qt-Version und dem Hauptcompiler Ihres Computers. Wenn Sie keinen Compiler haben, können Sie einen installieren. Unter Windows: Installieren Sie Visual Studio. Unter Linux / Mac: Installieren Sie g ++ oder clang ++.

Dann können Sie den Namen Ihrer Hauptfensterklasse, die geerbte Klasse und den Namen der Datei auswählen, die Ihrer Hauptfensterklasse entspricht. Wenn Sie Qt lernen oder testen, müssen Sie sie nicht wirklich ändern.

Der letzte Schritt besteht darin, ein Teilprojekt dieses Projekts auszuwählen und eine Versionskontrolle wie git und svn hinzuzufügen. Wenn es nur für Tests ist, müssen Sie sie nicht ändern.

Klicken Sie dann auf die Schaltfläche Fertig stellen. Jetzt sollten Sie hier sein:

Dies ist die Basis Ihrer Bewerbung. Wenn Sie es jetzt ausführen, indem Sie auf Build-> Run oder Strg + R (standardmäßig) klicken, wird ein leeres Fenster angezeigt.

Nun fügen wir einen Text und eine Schaltfläche hinzu. Dazu verwenden wir Qt Designer. Doppelklicken Sie auf das mainwindow.ui. Nun sollten Sie Folgendes sehen: (Wenn nicht und Sie eine XML-Datei sehen, klicken Sie links auf die Schaltfläche Design.)

Hier Qt Designer! Scheint ziemlich kompliziert. Aber wenn man sich erst einmal daran gewöhnt hat, ist es wirklich großartig. Wir werden etwas Text und eine Schaltfläche hinzufügen. Auf der linken Seite befindet sich die Liste der Elemente. Sie können auf eines klicken und die Objekte per Drag & Drop verschieben. Klicken Sie auf die Schaltfläche und legen Sie sie im Fenster ab. Suchen Sie dann nach dem Label und führen Sie dasselbe aus (oben links befindet sich ein Filter, in den Sie das gesuchte Objekt schreiben können).

Sie sollten jetzt so etwas haben:

Durch Doppelklick auf das Objekt können Sie den Text darauf ändern. Oder Sie können rechts unten die Eigenschaften des Objekts sehen, das Sie jetzt sind, und die Texteigenschaft finden. Hier können Sie auch den Namen ändern.

Wenn Sie jetzt speichern und ausführen (besser auf die Schaltfläche Bearbeiten klicken und dann erneut speichern, um sicherzustellen, dass Ihre Änderungen gespeichert wurden), erhalten Sie Folgendes:

Huh Warum sind mein Label und mein Button beim Laufen so? Dies liegt daran, dass es in unserem zentralen Objekt kein Layout gibt. Wenn Sie die Größe Ihres Hauptfensters ändern, können Sie übrigens sehen, dass das Objekt seinen Platz behält. Um dies zu beheben, fügen wir ein Layout hinzu. Sagen wir ein vertikales Layout. Ziehen Sie ein vertikales Layout aus der Objektliste auf der linken Seite. Jetzt sollten Sie sehen:

Ein schwebendes Layout.

Klicken Sie nun mit der rechten Maustaste auf das Hauptfenster, außer auf dem Etikett und der Schaltfläche. c \ Klicken Sie auf Layout -> Vertikale Anordnung. Jetzt sollten Sie sehen, dass Ihre Objekte in Ihrem Fenster vertikal ausgerichtet sind. Verschieben Sie nun Ihr Etikett und die Schaltfläche im Layout (per Drag & Drop erneut). jetzt solltest du bekommen:

In Ihrem Designer. Und wenn Sie Ihre Anwendung ausführen:

Hier sehen Sie Ihre Bewerbung mit dem Etikett und der Schaltfläche. Wenn Sie die Fenstergröße ändern, werden auch die Beschriftung und die Schaltfläche angepasst.

Unser Button macht aber immer noch nichts. Wir können es auf zwei verschiedene Arten ändern. Die erste besteht darin, die Schaltfläche mit einer von uns erstellten Methode zu verbinden. Wir können es mit dem Methodennamen verbinden. Gehen wir also zu unserem Code zurück und gehen Sie zu mainwindow.cpp, und fügen Sie Folgendes hinzu:

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

Im Konstruktor Ihres MainWindow NACH der ui->setupUI(this); welche die ui initialisieren.

Dann können wir MainWindow :: whenButtonIsClicked () in unserer .cpp-Klasse erstellen, wodurch der Text des Labels folgendermaßen geändert werden kann:

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

Und in unserem Hauptfenster.h müssen wir hinzufügen:

public slots:
    void whenButtonIsClicked();

Öffentliche Slots bedeuten, dass diese Methode aufgerufen werden kann, wenn ein Signal empfangen wird. Verbinden Sie das Signal, wenn Sie auf die Schaltfläche klicken und eine Methode aufrufen.

Wenn wir also unsere Anwendung ausführen und auf die Schaltfläche klicken, erhalten wir:

Was bedeutet, dass unsere Verbindung funktioniert. Mit Qt Designer haben wir jedoch einen noch einfacheren Weg. Wenn Sie es anders machen möchten, entfernen Sie die Verbindung, um die Schaltfläche zu trennen (da wir die Verbindung anders herstellen), gehen Sie zurück zu mainwindow.ui und klicken Sie mit der rechten Maustaste auf die Schaltfläche. Klicken Sie auf Gehe zu Steckplatz ..., klicken Sie auf () und drücken Sie OK.

Dann sollten Sie zu dieser Funktion verschoben werden:

void MainWindow::on_pushButton_clicked()
{
}

Dies ist die Funktion, die aufgerufen wird, wenn Sie auf die Schaltfläche klicken. Sie können also hinzufügen

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

Hinein. Gehen Sie zum Hauptfenster.h, um die Änderung zu speichern (wenn Sie zum Slot gehen, erstellen Sie eine Methode, die mit dem angeforderten Signal verknüpft ist. Sie definiert die Funktion in der .h-Datei, speichert sie jedoch nicht. Speichern Sie die Änderung.) in die Datei und speichern Sie es).

Wenn Sie nun Ihre Anwendung ausführen und auf die Schaltfläche drücken, können Sie die neue Nachricht sehen (wenn Sie die alte noch sehen, bedeutet dies, dass Sie die Verbindung nicht entfernt haben).

Dank der QVariant Klasse, die eine großartige Klasse ist, die viele Dinge in viele andere Dinge konvertieren kann, können wir auch ein Int, Double usw. in unser Label QVariant . Fügen Sie also ein Int hinzu, das sich erhöht, wenn Sie den Knopf drücken.

Also die .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

Die .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());
}

Und jetzt können wir speichern und erneut ausführen. Jedes Mal, wenn Sie auf die Schaltfläche klicken, wird "es ist noch einfacher!" Mit dem Wert von _smallCounter angezeigt. Sie sollten also etwas haben wie:

Dieses Tutorial ist fertig. Wenn Sie mehr über Qt erfahren möchten, sehen Sie sich die anderen Beispiele und die Dokumentation zu Qt in der StackOverflow-Dokumentation oder der Qt-Dokumentation an