Qt Quick Controls - Liste de contacts

L'exemple de liste de contacts montre comment intégrer un backend C++ de manière compatible avec le concepteur d'Qt Quick. Pour les parties déclaratives de l'interface utilisateur, on utilise des fichiers .ui.qml qui peuvent être modifiés visuellement dans le concepteur d'Qt Quick.

Backend C++

L’application de liste de contacts permet à l’utilisateur d’ajouter, de modifier et de supprimer des contacts. L’implémentation proprement dite est réalisée en C++ et exposée sous forme de classe « QAbstractListModel ».

La classe C++ ContactModel est enregistrée sous un espace de noms, puis importée et instanciée par MainForm.ui.qml. Pour plus d'informations sur l'enregistrement de classes C++ en tant que types QML, consultez la section « Définition de types QML à partir de C++ ».

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

Prise en charge par le Designer

Dans le sous-répertoire « designer », nous créons un plugin qui remplace le ContactModel dans Qt Quick Designer. Pour que cela fonctionne, nous ajoutons la ligne suivante au fichier contactlist.pro.

QML_DESIGNER_IMPORT_PATH = $$PWD/designer

Comme le Designer d’ Qt Quick ne peut pas instancier la classe C++ ContactModel, nous définissons une maquette à l’aide d’un ListModel. Cela garantit que l’ ListView utilisant le modèle affiche bien quelque chose dans le Designer d’ Qt Quick.

Exécution de l’exemple

Vous pouvez exécuter l’exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l'exemple à l'adresse Examples. Pour plus d'informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.

Exemple de projet sur code.qt.io