Qt Quick Controls - Contact List

A QML app using Qt Quick Controls and a C++ class that implements a simple contact list.

The Contact List Example shows how to integrate a C++ backend in a way that is compatible with Qt Quick Designer. For the declarative parts of the UI, .ui.qml files are used that can be edited visually in the Qt Quick Designer.

C++ Backend

The contact list application allows the user to add, edit, and remove contacts. The actual implementation is done in C++ and exposed as a QAbstractListModel .

The ContactModel C++ class is registered under a namespace and later imported and instantiated by MainForm.ui.qml . For more information about registering C++ classes as QML types, see 从 C++ 定义 QML 类型 .

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

Designer Support

In the designer subdirectory, we create a plugin that replaces the ContactModel in Qt Quick Designer. For this to work we add the following line to contactlist.pro .

QML_DESIGNER_IMPORT_PATH = $$PWD/designer
					

Because Qt Quick Designer cannot instantiate the ContactModel C++ class, we define a mockup using a ListModel . This ensures that the ListView using the model shows something in Qt Quick Designer.

运行范例

要运行范例从 Qt Creator ,打开 Welcome 模式,然后选择范例从 Examples 。更多信息,拜访 构建和运行范例 .

范例工程 @ code.qt.io