Qt Quick Controls - Kontaktliste

Das Beispiel „Kontaktliste“ zeigt, wie ein C++-Backend so integriert wird, dass es mit dem „ Qt Quick Designer“ kompatibel ist. Für die deklarativen Teile der Benutzeroberfläche werden .ui.qml-Dateien verwendet, die visuell im „ Qt Quick Designer“ bearbeitet werden können.

C++-Backend

Die Kontaktlisten-Anwendung ermöglicht es dem Benutzer, Kontakte hinzuzufügen, zu bearbeiten und zu entfernen. Die eigentliche Implementierung erfolgt in C++ und wird als „ QAbstractListModel “ bereitgestellt.

Die C++-Klasse „ContactModel“ wird unter einem Namespace registriert und später von „MainForm.ui.qml“ importiert und instanziiert. Weitere Informationen zum Registrieren von C++-Klassen als QML-Typen finden Sie unter „Definieren von QML-Typen aus C++“.

#include <QtQml/qqml.h>
...
qmlRegisterType<ContactModel>("Backend", 1, 0, "ContactModel");
...

Designer-Unterstützung

Im Unterverzeichnis „designer“ erstellen wir ein Plugin, das das „ContactModel“ im „ Qt Quick Designer“ ersetzt. Damit dies funktioniert, fügen wir die folgende Zeile zu „contactlist.pro“ hinzu.

QML_DESIGNER_IMPORT_PATH = $$PWD/designer

Da der „ Qt Quick “-Designer die C++-Klasse „ContactModel“ nicht instanziieren kann, definieren wir ein Mockup mithilfe von „ ListModel “. Dadurch wird sichergestellt, dass die „ ListView “, die das Modell verwendet, im „ Qt Quick “-Designer etwas anzeigt.

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 “ aus dem Verzeichnis „ 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.

Beispielprojekt @ code.qt.io