Erste Schritte mit Qt Designer

Für dieses Tutorial muss Qt Creator installiert sein – Sie können es kostenlos von der Qt-Website herunterladen. Gehen Sie zu https://www.qt.io/download und laden Sie das Qt-Paket herunter. Sie können sich während der Installation dafür entscheiden, nur Creator zu installieren.

Öffnen Sie Qt Creator und Sie werden das Hauptfenster sehen. Der Designer ist über die Registerkarte auf der linken Seite verfügbar. Um diesen jedoch zu aktivieren, müssen Sie zunächst eine .ui-Datei erstellen.

Die Qt Creator-Oberfläche, mit dem Design-Bereich auf der linken Seite.

Um eine .ui-Datei zu erstellen, gehen Sie auf Datei -> Neue Datei oder Projekt… In dem erscheinenden Fenster wählen Sie Qt unter Files and Classes auf der linken Seite, dann wählen Sie Qt Designer Form auf der rechten Seite. Sie werden feststellen, dass das Icon „ui“ trägt, was den Typ der Datei anzeigt, die Sie erstellen.

Erstellen Sie eine neue Qt .ui Datei.

Im nächsten Schritt werden Sie gefragt, welche Art von Widget Sie erstellen möchten. Wenn Sie eine Anwendung starten, ist Main Window die richtige Wahl. Sie können jedoch auch .ui-Dateien für Dialogfelder, Formulare und benutzerdefinierte zusammengesetzte Widgets erstellen.

Wählen Sie die Art des zu erstellenden Widgets aus, für die meisten Anwendungen wird dies das Hauptfenster sein.

Wählen Sie anschließend einen Dateinamen und einen Speicherordner für Ihre Datei. Speichern Sie Ihre .uiDatei unter demselben Namen wie die Klasse, die Sie erstellen werden, um die nachfolgenden Befehle zu vereinfachen.

Wählen Sie einen Speichernamen und einen Ordner für Ihre Datei.

Schließlich können Sie die Datei zu Ihrem Versionskontrollsystem hinzufügen, wenn Sie eines verwenden. Sie können diesen Schritt auch überspringen – er hat keinen Einfluss auf Ihre Benutzeroberfläche.

Optional fügen Sie die Datei zu Ihrer Versionskontrolle hinzu, z.B. Git.

Hauptfenster gestalten

Sie sehen Ihr neu erstelltes Hauptfenster im UI-Designer. Zu Beginn ist nicht viel zu sehen, nur eine graue Arbeitsfläche, die das Fenster darstellt, zusammen mit den Anfängen einer Menüleiste.

Die Anfangsansicht des erstellten Hauptfensters.

Sie können die Größe des Fensters ändern, indem Sie auf das Fenster klicken und die blauen Griffe an jeder Ecke ziehen.

Die Anfangsansicht des erstellten Hauptfensters.

Der erste Schritt bei der Erstellung einer Anwendung besteht darin, einige Widgets zu Ihrem Fenster hinzuzufügen. In unseren ersten Anwendungen haben wir gelernt, dass wir .setCentralWidget() verwenden müssen, um das zentrale Widget für ein QMainWindow festzulegen. Wir haben auch gesehen, dass wir, um mehrere Widgets mit einem Layout hinzuzufügen, ein zwischengeschaltetes QWidget benötigen, auf das wir das Layout anwenden können, anstatt das Layout direkt zum Fenster hinzuzufügen.

Qt Creator kümmert sich automatisch darum, obwohl es nicht besonders offensichtlich ist.

Um mehrere Widgets mit einem Layout zum Hauptfenster hinzuzufügen, ziehen Sie zuerst Ihre Widgets auf das QMainWindow. Hier ziehen wir 3 Beschriftungen. Es spielt keine Rolle, wo Sie sie ablegen.

Hauptfenster mit 1 Beschriftung und 1 Schaltfläche hinzugefügt.

Wir haben 2 Widgets erstellt, indem wir sie auf das Fenster gezogen haben und sie zu Kindern dieses Fensters gemacht haben. Jetzt können wir ein Layout anwenden.

Finden Sie das QMainWindow im rechten Fenster (es sollte ganz oben sein). Darunter sehen Sie centralwidget, das das zentrale Widget des Fensters darstellt. Das Symbol für das zentrale Widget zeigt das aktuelle Layout an. Zu Beginn ist es mit einem roten Kreis durchkreuzt, was bedeutet, dass kein Layout aktiv ist.

Klicken Sie mit der rechten Maustaste auf das QMainWindow-Objekt und wählen Sie „Layout“ in der sich daraus ergebenden Auswahlliste.

Klicken Sie mit der rechten Maustaste auf das Hauptfenster und wählen Sie „Layout“.

Als Nächstes sehen Sie eine Liste von Layouts, die Sie auf das Fenster anwenden können. Wählen Sie Lay Out Horizontal und das Layout wird auf das Widget angewendet.

Wählen Sie das Layout, das auf das Hauptfenster angewendet werden soll.

Das ausgewählte Layout wird auf das zentrale Widget des QMainWindow angewendet und die Widgets werden dem Layout hinzugefügt, wobei sie entsprechend dem ausgewählten Layout angeordnet werden. Beachten Sie, dass Sie in Qt Creator die Widgets innerhalb des Layouts verschieben und neu anordnen oder ein anderes Layout auswählen können, wie Sie möchten. Das macht es besonders schön für das Prototyping und das Ausprobieren von Dingen.

Vertikales Layout auf Widgets im Hauptfenster angewendet.

Verwendung der generierten .ui-Datei

Wir haben eine sehr einfache Benutzeroberfläche erstellt. Der nächste Schritt besteht darin, diese in Python zu übertragen und sie zu verwenden, um eine funktionierende Anwendung zu erstellen.

Speichern Sie zunächst Ihre .ui-Datei – standardmäßig wird sie an dem Ort gespeichert, den Sie bei der Erstellung gewählt haben, obwohl Sie einen anderen Ort wählen können, wenn Sie möchten.

Die .ui-Datei ist im XML-Format. Um unser UI von Python aus zu verwenden, stehen uns zwei alternative Methoden zur Verfügung –

1. mit der .loadUI()-Methode in eine Klasse laden
2. mit dem pyuic5-Tool in Python konvertieren.

Diese beiden Ansätze werden im Folgenden behandelt. Ich persönlich ziehe es vor, die Benutzeroberfläche in eine Python-Datei zu konvertieren, um die Dinge aus Sicht der Programmierung & ähnlich zu halten.

Die .ui-Datei direkt laden

Um .ui-Dateien zu laden, können wir das uicModul verwenden, das in PyQt5 enthalten ist, insbesondere die uic.loadUI()Methode. Diese nimmt den Dateinamen einer UI-Datei und lädt sie, um ein voll funktionsfähiges PyQt5-Objekt zu erzeugen.

Für PySide2 kann man eine QUiLoader-Instanz verwenden und die loader.load()-Methode aufrufen, um dasselbe zu erreichen.

Eine (sehr) einfache UI, die in Qt Creator entworfen wurde

Da die uid.loadUI()-Methode ein Instanzobjekt erzeugt, kann man keinen eigenen __init__()-Code anhängen. Man kann dies jedoch durch eine benutzerdefinierte Setup-Funktion handhaben

Um ein UI aus dem __init__-Block eines bestehenden Widgets (z.B. ein QMainWindow) zu laden, kann man uic.loadUI(filename, self) für PyQt5 verwenden.

Der PySide2-Loader unterstützt diesen Ansatz nicht – der zweite Parameter ist für das Eltern-Widget des Widgets, das man erstellt. Dies hindert Sie daran, eigenen Code zur Initialisierung des Widgets hinzuzufügen, aber Sie können dies mit einer separaten init-Funktion umgehen.

Konvertieren Ihrer .ui-Datei in Python

Um eine Python-Ausgabedatei zu erzeugen, führen Sie pyuic5 von der Befehlszeile aus und übergeben Sie die .ui-Datei und die Zieldatei für die Ausgabe mit einem -o-Parameter. Im Folgenden wird eine Python-Datei mit dem Namen MainWindow.py erzeugt, die unsere erstellte Benutzeroberfläche enthält.

pyuic5 mainwindow.ui -o MainWindow.py

Wenn Sie PyQt4 verwenden, heißt das Tool `pyuic4`, ist aber ansonsten völlig identisch.

Sie können die resultierende MainWindow.py-Datei in einem Editor öffnen, um einen Blick darauf zu werfen, obwohl Sie diese Datei nicht bearbeiten sollten. Die Stärke von Qt Creator liegt darin, dass Sie Ihre Anwendung während der Entwicklung bearbeiten, optimieren und aktualisieren können. Alle Änderungen, die Sie an dieser Datei vorgenommen haben, gehen verloren, wenn Sie sie aktualisieren. Sie können jedoch alles überschreiben und verändern, was Sie möchten, wenn Sie die Datei importieren und in Ihren Anwendungen verwenden.

Der Import der resultierenden Python-Datei funktioniert wie bei jeder anderen Datei. Sie können Ihre Klasse wie folgt importieren. Das pyuic5-Werkzeug hängt Ui_ an den Namen des in Qt Creator definierten Objekts an, und dieses Objekt wollen Sie importieren.

from MainWindow import Ui_MainWindow

Um das Hauptfenster in Ihrer Anwendung zu erstellen, erstellen Sie eine Klasse wie üblich, aber als Unterklasse sowohl von QMainWindow als auch von Ihrer importierten Ui_MainWindow-Klasse. Rufen Sie schließlich self.setupUi(self) aus der Klasse __init__ auf, um die Einrichtung der Schnittstelle auszulösen.

Das Ergebnis ist das gleiche wie zuvor.

Eine (sehr) einfache Benutzeroberfläche, die in Qt Creator entworfen wurde

Das war’s. Ihr Fenster ist nun vollständig eingerichtet. Da die Verwendung einer .ui-Datei den UI-spezifischen Code abstrahiert, können Sie dasselbe Muster verwenden, um jede von Ihnen entworfene Oberfläche zu laden.

Hinzufügen von Anwendungslogik

Sie können mit Widgets, die mit Qt Creator erstellt wurden, genauso interagieren wie mit solchen, die mit Code erstellt wurden. Um die Dinge zu vereinfachen, fügt uic alle untergeordneten Widgets dem Fensterobjekt mit ihrer in Qt Creator angegebenen ID hinzu. Wie man mit diesen arbeitet, wird im nächsten Teil behandelt.