Qt Quick Controls - 連絡先リスト

連絡先リストの例では、Qt Quick Designerと互換性のある方法でC++バックエンドを統合する方法を示しています。UI の宣言的な部分には、Qt Quick Designer で視覚的に編集できる .ui.qml ファイルが使用されています。

C++バックエンド

連絡先リストアプリケーションでは、ユーザーが連絡先を追加、編集、削除できます。実際の実装は C++ で行われ、QAbstractListModel として公開されます。

ContactModel C++ クラスは名前空間の下に登録され、後にMainForm.ui.qml によってインポートされ、インスタンス化されます。C++ クラスを QML 型として登録する方法については、C++ から QML 型を定義する を参照してください。

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

デザイナーのサポート

designer サブディレクトリに、Qt Quick Designer の ContactModel を置き換えるプラグインを作成します。このプラグインを動作させるために、contactlist.pro に以下の行を追加します。

QML_DESIGNER_IMPORT_PATH = $$PWD/designer

Qt Quick Designer は ContactModel C++ クラスをインスタンス化できないため、ListModel を使用してモックアップを定義します。 これにより、モデルを使用するListView がQt Quick Designer で何かを表示するようになります。

例の実行

からサンプルを実行するには Qt Creatorからサンプルを実行するには、Welcome モードを開き、Examples からサンプルを選択します。詳細については、Building and Running an Exampleを参照してください。

サンプルプロジェクト @ code.qt.io