Erste Schritte in der Programmierung mit Qt Widgets

In diesem Thema vermitteln wir grundlegende Qt-Kenntnisse anhand der Implementierung einer einfachen Notizblock-Anwendung mit C++ und dem Qt Widgets Moduls. Die Anwendung ist ein kleiner Texteditor, mit dem Sie eine Textdatei erstellen, speichern, drucken oder erneut öffnen und bearbeiten können. Außerdem können Sie die zu verwendende Schriftart festlegen.

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

• Qt Creator

  Öffnen Sie den Modus „ Welcome “ und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter Qt Creator: Tutorial: Erstellen und Ausführen.

• Qt Extension for Visual Studio Code

  Führen Sie den Befehl „ Qt: Open Qt examples “ über „ Command Palette “ aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter Qt Extension for Visual Studio Code: Tutorial: Erstellen und Ausführen.

Erstellen des Notepad-Projekts

Das Einrichten eines neuen Projekts in „ Qt Creator “ wird durch einen Assistenten unterstützt, der Sie Schritt für Schritt durch den Prozess der Projekterstellung führt. Der Assistent fordert Sie auf, die für diesen bestimmten Projekttyp erforderlichen Einstellungen einzugeben, und erstellt das Projekt für Sie.

Um das Notepad-Projekt zu erstellen, wählen Sie „ File “ > „ New Project “ > „ Application (Qt) “ > Qt Widgets Application > „ Choose “ und folgen Sie den Anweisungen des Assistenten. Geben Sie im Dialogfeld „ Class Information “ als Klassennamen „Notepad“ ein und wählen Sie „ QMainWindow “ als Basisklasse aus.

Der Qt Widgets Application Assistent erstellt ein Projekt, das eine Hauptquelldatei und eine Reihe von Dateien enthält, die eine Benutzeroberfläche (Notepad-Widget) definieren:

• CMakeLists.txt – die Projektdatei.
• main.cpp – die Hauptquelldatei für die Anwendung.
• notepad.cpp – die Quelldatei der Notepad-Klasse des Notepad-Widgets.
• notepad.h – die Header-Datei der „notepad“-Klasse für das Notepad-Widget.
• notepad.ui – das UI-Formular für das Notepad-Widget.

Die Dateien enthalten den erforderlichen Standardcode, damit Sie das Projekt erstellen und ausführen können. In den folgenden Abschnitten werden wir uns den Inhalt der Dateien genauer ansehen.

Mehr erfahren

Hauptquelldatei

Der Assistent generiert den folgenden Code in der Datei „main.cpp“:

#include "notepad.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Notepad w;
    w.show();
    return a.exec();
}

Wir werden den Code Zeile für Zeile durchgehen. Die folgenden Zeilen binden die Header-Dateien für das Notepad-Widget und „ QApplication “ ein. Alle Qt-Klassen haben eine nach ihnen benannte Header-Datei.

#include "notepad.h"

#include <QApplication>

Die folgende Zeile definiert die Hauptfunktion, die den Einstiegspunkt für alle C- und C++-basierten Anwendungen darstellt:

int main(int argc, char *argv[])

Die folgende Zeile erstellt ein ` QApplication `-Objekt. Dieses Objekt verwaltet anwendungsweite Ressourcen und ist für die Ausführung jedes Qt-Programms erforderlich, das ` Qt Widgets` verwendet. Es erstellt ein Anwendungsobjekt mit den Befehlszeilenargumenten ` argc `, die in ` argv` ausgeführt werden. (Für GUI-Anwendungen, die ` Qt Widgets` nicht verwenden, können Sie stattdessen ` QGuiApplication ` verwenden.)

    QApplication a(argc, argv);

Die folgende Zeile erstellt das Notepad-Objekt. Dies ist das Objekt, für das der Assistent die Klasse und die UI-Datei erstellt hat. Die Benutzeroberfläche enthält visuelle Elemente, die in Qt als „ widgets “ bezeichnet werden. Beispiele für Widgets sind Textfelder, Bildlaufleisten, Beschriftungen und Optionsfelder. Ein Widget kann auch als Container für andere Widgets dienen, beispielsweise als Dialogfeld oder als Hauptanwendungsfenster.

    Notepad w;

Die folgende Zeile zeigt das Notepad-Widget auf dem Bildschirm in einem eigenen Fenster an. Widgets können auch als Container fungieren. Ein Beispiel hierfür ist „ QMainWindow “, das oft mehrere Arten von Widgets enthält. Widgets sind standardmäßig nicht sichtbar; die Funktion ` show()` macht das Widget sichtbar.

    w.show();

Die folgende Zeile versetzt das „ QApplication “ in seine Ereignisschleife. Wenn eine Qt-Anwendung läuft, werden Ereignisse generiert und an die Widgets der Anwendung gesendet. Beispiele für Ereignisse sind Mausklicks und Tastenanschläge.

    return a.exec();

Weitere Informationen

Entwerfen einer Benutzeroberfläche

Der Assistent generiert eine Benutzeroberflächendefinition im XML-Format: notepad.ui. Wenn Sie die Datei notepad.ui in „ Qt Creator “ öffnen, wird sie automatisch im integrierten „ Qt Widgets Designer“ geöffnet.

Wenn Sie die Anwendung erstellen, startet „ Qt Creator “ den Qt-User Interface Compiler (uic), der die .ui-Datei einliest und eine entsprechende C++-Header-Datei, ui_notepad.h, erstellt.

Verwendung des „ Qt Widgets Designer“

Der Assistent erstellt eine Anwendung, die ein „ QMainWindow “ verwendet. Diese verfügt über ein eigenes Layout, dem Sie eine Menüleiste, Andock-Widgets, Symbolleisten und eine Statusleiste hinzufügen können. Der mittlere Bereich kann mit jeder Art von Widget belegt werden. Der Assistent platziert dort das Notepad-Widget.

So fügen Sie Widgets im „ Qt Widgets Designer“ hinzu:

1. Doppelklicken Sie im Modus „ Qt Creator Edit “ in der Ansicht „ Projects “ auf die Datei „notepad.ui“, um die Datei im integrierten „ Qt Widgets Designer“ zu öffnen.
2. Ziehen Sie Widgets aus „Text Edit“ (QTextEdit) per Drag & Drop auf das Formular.
3. Drücken Sie Strg+A (oder Cmd+A), um die Widgets auszuwählen, und klicken Sie auf „ Lay out Vertically “ (oder drücken Sie Strg+L), um ein vertikales Layout (QVBoxLayout) anzuwenden.
4. Drücken Sie Strg+S (oder Cmd+S), um Ihre Änderungen zu speichern.

Die Benutzeroberfläche sieht nun im „ Qt Widgets Designer“ wie folgt aus:

Sie können die generierte XML-Datei im Code-Editor anzeigen:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Notepad</class>
 <widget class="QMainWindow" name="Notepad">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>400</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Notepad</string>
  </property>
  <widget class="QWidget" name="centralWidget">
   <layout class="QVBoxLayout" name="verticalLayout">
    <item>
     <widget class="QTextEdit" name="textEdit"/>
    </item>
   </layout>
  </widget>
  <widget class="QMenuBar" name="menuBar">
    ...

Die folgende Zeile enthält die XML-Deklaration, die die im Dokument verwendete XML-Version und Zeichenkodierung angibt:

<?xml version="1.0" encoding="UTF-8"?>

Der Rest der Datei enthält ein „ ui “-Element, das ein Notepad-Widget definiert:

<ui version="4.0">

Die UI-Datei wird zusammen mit der Header- und Quelldatei der Notepad-Klasse verwendet. Wir werden uns den Rest der UI-Datei in den folgenden Abschnitten ansehen.

Notepad-Header-Datei

Der Assistent hat eine Header-Datei für die Notepad-Klasse generiert, die die erforderlichen #includes, einen Konstruktor, einen Destruktor und das Ui-Objekt enthält. Die Datei sieht wie folgt aus:

#include <QMainWindow>

QT_BEGIN_NAMESPACE
namespace Ui {
class Notepad;
}
QT_END_NAMESPACE

class Notepad : public QMainWindow
{
    Q_OBJECT

public:
    explicit Notepad(QWidget *parent = nullptr);
    ~Notepad();

private:
    Ui::Notepad *ui;
    QString currentFile;
};

Die folgende Zeile bindet „ QMainWindow “ ein, das ein Hauptanwendungsfenster bereitstellt:

#include <QMainWindow>

Die folgenden Zeilen deklarieren die Klasse „Notepad“ im Namespace „Ui“, dem Standard-Namespace für die UI-Klassen, die vom Tool „ uic “ aus .ui-Dateien generiert werden:

namespace Ui {
class Notepad;
}

Die Klassendeklaration enthält das Makro „ Q_OBJECT “. Es muss an erster Stelle in der Klassendefinition stehen und deklariert unsere Klasse als „ QObject “. Natürlich muss sie auch von „ QObject “ erben. Ein „ QObject “ erweitert eine normale C++-Klasse um mehrere Funktionen. Insbesondere können der Klassenname und die Slot-Namen zur Laufzeit abgefragt werden. Es ist auch möglich, die Parametertypen eines Slots abzufragen und diesen aufzurufen.

class Notepad : public QMainWindow
{
    Q_OBJECT

Die folgenden Zeilen deklarieren einen Konstruktor mit einem Standardargument namens „ parent “. Der Wert 0 gibt an, dass das Widget keinen übergeordneten Elternteil hat (es handelt sich um ein Widget der obersten Ebene).

public:
    explicit Notepad(QWidget *parent = nullptr);

Die folgende Zeile deklariert einen virtuellen Destruktor, um die Ressourcen freizugeben, die das Objekt während seines Lebenszyklus belegt hat. Gemäß der C++-Namenskonvention haben Destruktoren denselben Namen wie die Klasse, zu der sie gehören, mit einer Tilde (~) als Präfix. In „ QObject “ sind Destruktoren virtuell, um sicherzustellen, dass die Destruktoren abgeleiteter Klassen ordnungsgemäß aufgerufen werden, wenn ein Objekt über einen Zeiger auf die Basisklasse gelöscht wird.

    ~Notepad();

In den folgenden Zeilen wird eine Membervariable deklariert, bei der es sich um einen Zeiger auf die Notepad-UI-Klasse handelt. Eine Membervariable ist einer bestimmten Klasse zugeordnet und für alle deren Methoden zugänglich.

private:
    Ui::Notepad *ui;
    QString currentFile;
};

Notepad-Quelldatei

Die vom Assistenten für die Notepad-Klasse generierte Quelldatei sieht wie folgt aus:

#include "notepad.h"
#include "ui_notepad.h"

Notepad::Notepad(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::Notepad)
{
    ui->setupUi(this);

}

Die folgenden Zeilen binden die vom Assistenten generierte Header-Datei der Notepad-Klasse sowie die vom „ uic “-Tool generierte UI-Header-Datei ein:

#include "notepad.h"
#include "ui_notepad.h"

Die folgende Zeile definiert den Konstruktor von „ Notepad “:

Notepad::Notepad(QWidget *parent) :

Die folgende Zeile ruft den Konstruktor von „ QMainWindow “ auf, der die Basisklasse für die „Notepad“-Klasse darstellt:

    QMainWindow(parent),

Die folgende Zeile erstellt die Instanz der „UI“-Klasse und weist sie dem Mitglied „ ui “ zu:

    ui(new Ui::Notepad)

Die folgende Zeile richtet die Benutzeroberfläche ein:

{
    ui->setupUi(this);

Im Destruktor löschen wir die ` ui`:

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

Projektdatei

Der Assistent generiert für uns die folgende Projektdatei: „ CMakeLists.txt “:

# Copyright (C) 2022 The Qt Company Ltd.
# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

cmake_minimum_required(VERSION 3.16)
project(notepad LANGUAGES CXX)

find_package(Qt6
    REQUIRED COMPONENTS Core Gui Widgets
    OPTIONAL_COMPONENTS PrintSupport
)

qt_standard_project_setup()

qt_add_executable(notepad
    main.cpp
    notepad.cpp notepad.h notepad.ui
)

set_target_properties(notepad PROPERTIES
    WIN32_EXECUTABLE TRUE
    MACOSX_BUNDLE TRUE
)

target_link_libraries(notepad PRIVATE
    Qt6::Core
    Qt6::Gui
    Qt6::Widgets
)

if(TARGET Qt6::PrintSupport)
    target_link_libraries(notepad PRIVATE Qt6::PrintSupport)
endif()

# Resources:
set(notepad_resource_files
    "images/bold.png"
    "images/copy.png"
    "images/create.png"
    "images/cut.png"
    "images/edit_redo.png"
    "images/edit_undo.png"
    "images/exit.png"
    "images/font.png"
    "images/info.png"
    "images/italic.png"
    "images/new.png"
    "images/open.png"
    "images/paste.png"
    "images/pencil.png"
    "images/print.png"
    "images/save.png"
    "images/save_as.png"
    "images/underline.png"
)

qt_add_resources(notepad "notepad"
    PREFIX
        "/"
    FILES
        ${notepad_resource_files}
)

install(TARGETS notepad
    BUNDLE  DESTINATION .
    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
)

qt_generate_deploy_app_script(
    TARGET notepad
    OUTPUT_SCRIPT deploy_script
    NO_UNSUPPORTED_PLATFORM_ERROR
)
install(SCRIPT ${deploy_script})

Die Projektdatei gibt die im Projekt enthaltenen Quell-, Header- und UI-Dateien an.

Weitere Informationen

Hinzufügen von Benutzerinteraktionen

Um den Editor um Funktionen zu erweitern, fügen wir zunächst Menüpunkte und Schaltflächen in einer Symbolleiste hinzu.

Klicken Sie auf „Type Here“ und fügen Sie die Optionen „New“, „Open“, „Save“, „Save as“, „Print“ und „Exit“ hinzu. Dadurch werden im darunterliegenden Aktionseditor 5 Zeilen erstellt. Um die Aktionen mit Slots zu verknüpfen, klicken Sie mit der rechten Maustaste auf eine Aktion, wählen Sie „ Go to slot “ > „ triggered() “ und vervollständigen Sie den Code für den jeweiligen Slot.

Wenn wir die Aktionen zusätzlich zu einer Symbolleiste hinzufügen möchten, können wir jedem „ QAction “ ein Symbol zuweisen und anschließend den „ QAction “ auf die Symbolleiste ziehen. Sie weisen ein Symbol zu, indem Sie einen Symbolnamen in die Eigenschaft „Icon“ der betreffenden Aktion eingeben. Sobald der „ QAction “ auf die Symbolleiste gezogen wurde, wird durch Klicken auf das Symbol der zugehörige Slot gestartet.

Vervollständigen Sie die Methode „ newDocument() “:

void Notepad::newDocument()
{
    currentFile.clear();
    ui->textEdit->setText(QString());
}

Die Variable „ currentFile “ ist eine globale Variable, die die aktuell bearbeitete Datei enthält, und „ clear() “ löscht den Textpuffer. Die Variable „ currentFile “ ist im privaten Teil von „notepad.h“ definiert:

private:
    Ui::Notepad *ui;
    QString currentFile;

Eine Datei öffnen

Klicken Sie in „ notepad.ui “ mit der rechten Maustaste auf „ actionOpen “ und wählen Sie „ Go to Slot “.

Vervollständigen Sie die Methode „ open() “.

void Notepad::open()
{
    QString fileName = QFileDialog::getOpenFileName(this, "Open the file");
    if (fileName.isEmpty())
        return;
    QFile file(fileName);
    currentFile = fileName;
    if (!file.open(QIODevice::ReadOnly | QFile::Text)) {
        QMessageBox::warning(this, "Warning", "Cannot open file: " + file.errorString());
        return;
    }
    setWindowTitle(fileName);
    QTextStream in(&file);
    QString text = in.readAll();
    ui->textEdit->setText(text);
    file.close();
}

QFileDialog::getOpenFileName Es öffnet sich ein Dialogfeld, in dem Sie eine Datei auswählen können. Das „ QFile “-Objekt „ myfile “ erhält die ausgewählte Datei „ file_name “ als Parameter. Wir speichern die ausgewählte Datei zusätzlich in der globalen Variablen „ currentFile “ für spätere Zwecke. Wir öffnen die Datei mit „ file.open “ als schreibgeschützte Textdatei. Kann die Datei nicht geöffnet werden, wird eine Warnung ausgegeben und das Programm wird beendet.

Wir definieren eine Funktion „ QTextStream “ instream für den Parameter „ myfile “. Der Inhalt der Datei „ myfile “ wird in „ QString “ text kopiert. „ setText(text) “ füllt den Puffer unseres Editors mit „ text “.

Eine Datei speichern

Wir erstellen die Methode zum Speichern einer Datei auf dieselbe Weise wie beim Öffnen einer Datei, indem wir mit der rechten Maustaste auf „ actionSave “ klicken und „ Go to Slot “ auswählen.

void Notepad::save()
{
    QString fileName;
    // If we don't have a filename from before, get one.
    if (currentFile.isEmpty()) {
        fileName = QFileDialog::getSaveFileName(this, "Save");
        if (fileName.isEmpty())
            return;
        currentFile = fileName;
    } else {
        fileName = currentFile;
    }
    QFile file(fileName);
    if (!file.open(QIODevice::WriteOnly | QFile::Text)) {
        QMessageBox::warning(this, "Warning", "Cannot save file: " + file.errorString());
        return;
    }
    setWindowTitle(fileName);
    QTextStream out(&file);
    QString text = ui->textEdit->toPlainText();
    out << text;
    file.close();
}

QFile Das Objekt „ myfile “ ist mit der globalen Variablen „ current_file “ verknüpft, die die Datei enthält, mit der wir gearbeitet haben. Wenn wir „ myfile “ nicht öffnen können, wird eine Fehlermeldung ausgegeben und die Methode bricht ab. Wir erstellen ein „ QTextStream “ unter „ outstream “. Der Inhalt des Editor-Puffers wird in reinen Text konvertiert und anschließend in „ outstream “ geschrieben.

Eine Datei unter einem anderen Namen speichern

void Notepad::saveAs()
{
    QString fileName = QFileDialog::getSaveFileName(this, "Save as");
    if (fileName.isEmpty())
        return;
    QFile file(fileName);

    if (!file.open(QFile::WriteOnly | QFile::Text)) {
        QMessageBox::warning(this, "Warning", "Cannot save file: " + file.errorString());
        return;
    }
    currentFile = fileName;
    setWindowTitle(fileName);
    QTextStream out(&file);
    QString text = ui->textEdit->toPlainText();
    out << text;
    file.close();
}

Dies ist derselbe Vorgang wie beim Speichern einer Datei, mit dem einzigen Unterschied, dass Sie hier einen neuen Dateinamen für die zu erstellende Datei eingeben müssen.

Eine Datei drucken

Wenn Sie Druckfunktionen nutzen möchten, müssen Sie „ PrintSupport “ zur Projektdatei hinzufügen:

find_package(Qt6
    REQUIRED COMPONENTS Core Gui Widgets
    OPTIONAL_COMPONENTS PrintSupport
)

In ` notepad.cpp` deklarieren wir ein QPrinter-Objekt namens ` printDev`:

void Notepad::print()
{
#if defined(QT_PRINTSUPPORT_LIB) && QT_CONFIG(printer)
    QPrinter printDev;
#if QT_CONFIG(printdialog)
    QPrintDialog dialog(&printDev, this);
    if (dialog.exec() == QDialog::Rejected)
        return;
#endif // QT_CONFIG(printdialog)
    ui->textEdit->print(&printDev);
#endif // QT_CONFIG(printer)
}

Wir öffnen ein Druckerdialogfeld und speichern den ausgewählten Drucker im Objekt „ printDev “. Wenn wir auf „ Cancel “ geklickt und keinen Drucker ausgewählt haben, kehrt die Methode zurück. Der eigentliche Druckbefehl wird mit „ ui->textEdit->print “ unter Angabe unseres QPrinter-Objekts als Parameter ausgegeben.

Schriftart auswählen

void Notepad::selectFont()
{
    bool fontSelected;
    QFont font = QFontDialog::getFont(&fontSelected, this);
    if (fontSelected)
        ui->textEdit->setFont(font);
}

Wir deklarieren eine boolesche Variable, die angibt, ob wir mit ` QFontDialog` eine Schriftart ausgewählt haben. Ist dies der Fall, legen wir die Schriftart mit ` ui->textEdit->setFont(myfont)` fest.

Kopieren, Ausschneiden, Einfügen, Rückgängig und Wiederherstellen

Wenn Sie Text markieren und in die Zwischenablage kopieren möchten, rufen Sie die entsprechende Methode von ` ui->textEdit` auf. Das Gleiche gilt für Ausschneiden, Einfügen, Rückgängig und Wiederherstellen.

Diese Tabelle zeigt die zu verwendenden Methodennamen.

Mehr erfahren

Erstellen und Ausführen über die Befehlszeile

Um eine Beispielanwendung über die Befehlszeile zu erstellen, legen Sie ein Build-Verzeichnis dafür an. Wechseln Sie in das Build-Verzeichnis und führen Sie „ qt-cmake “ aus, um Ihr Projekt für den Build zu konfigurieren. Wenn das Projekt erfolgreich konfiguriert wurde, können Sie es mithilfe der generierten Dateien erstellen.

md <build_directory>
cd <build_directory>
<qt_installation_directory>\bin\qt-cmake -GNinja <source_directory>
<generator>

Die Befehle erstellen eine ausführbare Datei im Build-Verzeichnis. Das Tool ` CMake ` liest die Projektdatei und erstellt Anweisungen zum Erstellen der Anwendung. Der Generator verwendet diese Anweisungen dann, um die ausführbare Binärdatei zu erstellen.

Um beispielsweise das Notepad-Beispiel unter Windows zu erstellen, geben Sie bei Verwendung von Ninja als Generator die folgenden Befehle ein:

md notepad-build
cd notepad-build
C:\Qt\6.12.0\msvc2022_64\bin\qt-cmake -GNinja C:\Examples\notepad
ninja

Wenn Sie Ninja nicht als Generator verwenden, nutzen Sie anstelle von ` ninja` den generatorunabhängigen CMake-Befehl, um die Anwendung zu erstellen:

cmake --build