Qt Quick コントロール - 連絡先リスト

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

C++ バックエンド

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

C++クラス「ContactModel」は名前空間に登録され、その後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 からサンプルを選択します。詳細については、『Qt Creator 』の「チュートリアル：ビルドと実行」を参照してください。

• Qt Extension for Visual Studio Code

  「Command Palette 」から「Qt: Open Qt examples 」コマンドを実行し、リストからサンプルを選択します。詳細については、Qt Extension for Visual Studio Code の「チュートリアル: ビルドと実行」を参照してください。

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