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