チュートリアル：Qt Widgets アプリケーション

このチュートリアルでは、Qt Extension for VS Code を使用してアプリケーションを作成する方法を解説します Qt Widgets アプリケーションを作成する方法を解説します。プロジェクトウィザードを使用してプロジェクトを作成し、Qt Widgets Designer を使用してウィジェットベースの UI を設計します。

完成したプロジェクトは「Code: AddressBook」からダウンロードできます。

開始する前に

開始する前に、以下の準備が必要です：

• VS Code用Qt Extensionをインストールする
• Qtのインストールを登録する

Qt Widgets アプリケーションプロジェクトを作成する

Qtアプリケーションを開発するには、コードを含むプロジェクトフォルダと、プロジェクトのビルド手順が記述されたプロジェクト設定ファイル（CMakeLists.txt ）が必要です。

AddressBook プロジェクトには2つのクラスがあり、それぞれにヘッダー、ソース、およびUIフォームが含まれています:

• AddressBook （QWidget に基づく）
• AddDialog （QDialog に基づく）

Visual Studio Code でQt Widgets アプリケーションプロジェクトを作成するには：

1. Welcome に移動し、[New project] を選択します。
2. Project で、 Qt Widgets applicationを選択します。

   

3. Base class で、 QWidget を基底クラスとして選択します。
4. 「UI form 」を選択して、UI フォームを生成します。
5. Name で、「AddressBook 」と入力します。
6. Create in で、プロジェクトファイルのパスを入力します。たとえば、C:\Qt\Examples などです。
7. 「Create 」を選択して、プロジェクトファイルを作成します。
8. プロジェクト用の CMake キットを選択します。

ウィザードにより、指定したパスの「AddressBook 」フォルダ内に必要なプロジェクトファイルが生成されます。ファイル名は変更可能です。このチュートリアルでは、ファイル名は「addressbook.cpp 」、「addressbook.h 」、「addressbook.ui 」となっています。

次に、アプリケーションのメインビューを作成します。

メインビューの設計

Qt Widgets Designer を使用して、レイアウトにいくつかのウィジェットが配置されたアプリケーションのメインビューをデザインします。

Qt Widgets Designer の使用方法の詳細については、『Qt Widgets Designer マニュアル』を参照してください。

ウィジェットの追加

UI にウィジェットを追加し、そのプロパティを設定するには:

1. VS CodeのExplorer で、「addressbook.ui 」を選択し、 Open this file with Qt Widgets Designer を選択して、Qt Widgets Designer で開きます。

   

2. Qt Widgets Designer の「Widget Box 」で、「List Widget 」を選択し、フォームにドラッグして「QListWidget 」を追加します。
3. Property Editor で、objectName プロパティをaddressList に設定します。
4. 「Push Button 」ウィジェットを2つ、フォームの右上隅にドラッグして、「Add 」および「Delete 」ボタン用の「QPushButton 」オブジェクトを追加します。
5. ボタンのobjectName プロパティをaddButton に設定し、deleteButton およびtext プロパティの値をそれぞれAdd およびDelete に設定します。
6. Label ウィジェットを2つフォームにドラッグして、リストで選択された項目を表示するためのQLabel オブジェクトを追加します。
7. 最初のラベルの名前を「nameLabel 」に変更し、そのtext プロパティを「<No item selected> 」に変更します。
8. 2番目のラベルの名前を「emailLabel 」に変更し、そのtext プロパティは空のままにします。

ウィジェットを、上のスクリーンショットに表示されている位置に配置します。ウィジェットを適切に配置し、フォームのサイズ変更時に自動的にサイズ調整を行うには、フォームにレイアウトを追加する必要があります。

レイアウトへのウィジェットの追加

ボタン用の垂直レイアウトと、ボタンをレイアウトの上部に配置するためのスペーサーが必要です。さらに、ボタンレイアウトだけでなく、他のウィジェットの配置も管理するための2つ目のレイアウトも必要になります。

レイアウトにウィジェットを追加するには：

1. Vertical Spacer アイテムをフォームにドラッグして、スペーサーを追加します。
2. ボタンとスペーサーを選択し、[Form ] > [Lay Out Vertically ] を選択して、垂直レイアウトを追加します (QVBoxLayout)。
3. リストウィジェット、2つのラベル、およびボタンレイアウトを選択し、「Form 」＞「Lay Out in a Grid 」を選択して、グリッドレイアウトを追加します (QGridLayout)。

   注： ラベルの幅がフォームの幅とほぼ同じになるようにしてください 。そうしないと、グリッドレイアウトによってラベルの幅がアドレスリストの幅と同じになってしまう可能性があります。

4. 「Form 」＞「Preview 」を選択して、コンパイルせずにフォームをプレビューします。
5. File >Save を選択して、フォームを保存します。

アプリケーションをビルドして実行し、メインビューを確認します。

ダイアログの追加

メインビューの準備が整ったので、次にアプリケーションに機能を追加していきます。ユーザーが「Add 」ボタンをクリックした際にダイアログを表示させるには、「Add Address 」ダイアログを作成し、そのダイアログを「Add 」ボタンに接続したスロットから呼び出します。

ダイアログを追加するには：

1. 「Qt Widgets Designer 」で、「File 」＞「New 」の順に移動し、「Dialog without Buttons 」を選択します。
2. 「Create 」を選択してダイアログを作成します。
3. Property Editor で、ObjectName プロパティをAddDialog に設定します。
4. 「File 」>「Save 」に移動し、ファイルを「adddialog.ui 」として保存します。

CMakeLists.txt ファイル内のプロジェクトソースにUIファイルを追加します：

set(PROJECT_SOURCES
        main.cpp
        addressbook.cpp
        addressbook.h
        addressbook.ui
        adddialog.cpp
        adddialog.h
        adddialog.ui
)

ダイアログを設計する

ダイアログを設計するには：

1. Qt Widgets Designer 内で、Add Address をwindowTitle に設定します。
2. フォームにLabel を追加し、そのobjectName プロパティをnameText に、text プロパティをName: に設定します。
3. もう 1 つの `Label ` を追加し、その `objectName ` プロパティを `emailText ` に、`text ` プロパティを `Email:` に設定します。
4. Line Edit （QLineEdit ）をもう1つ追加し、そのobjectName プロパティをnameEdit に設定します。text プロパティは空のままにします。
5. もう1つのLine Edit を追加し、そのobjectName プロパティをemailEdit に設定します。text プロパティは空のままにします。
6. ラベルとラインエディットを選択し、[Form ] > [Lay Out in a Grid ] の順に選択して、グリッドレイアウトを追加します。
7. 「Push Button 」を追加し、その「objectName 」プロパティを「okButton 」に、「text 」プロパティを「OK 」に設定します。
8. ボタンの左側に水平のスペーサーを追加します。
9. スペーサーとボタンに水平レイアウトを追加します。
10. ラベルとボタンの間に垂直のスペーサーを追加します。
11. ラベルとスペーサーに垂直レイアウトを追加します。
12. 両方のレイアウトに対してグリッドレイアウトを追加します。
13. Form >Preview にアクセスし、コンパイルせずにフォームをプレビューします。
14. File >Save に移動して、フォームを保存します。

ダイアログの「OK」ボタンに接続します。

OK ボタンがQDialog::accept() スロットを呼び出すようにするには、ツールバーの [Edit Signals/Slots ] ボタンをクリックして、Qt Widgets Designer のシグナルおよびスロット編集モードに入ります。

「OK 」ボタンをクリックし、マウスカーソルをフォームの空いている領域までドラッグして、マウスボタンを離します。「Configure Connection 」ダイアログで、ボタンのQPushButton::clicked()シグナルを、フォームのQDialog::accept()スロットに接続します。

メインビューからダイアログを開く

ユーザーがメインビューで「Add 」を選択したときにダイアログを呼び出すには、AddressBook クラスにスロットを追加し、このスロットからAddDialog を呼び出す必要があります。

Qt Widgets Designer を使用して作成するフォームでは、QMetaObject::connectSlotsByName() を呼び出すことで、フォームの子ウィジェットが発信するシグナルと、on_<sender>_<signal>() という命名規則に従うスロットとの間の接続が確立されます。ユーザーが「Add 」ボタンをクリックした際にアプリケーションが適切に反応するようにするには、on_addButton_clicked() というスロットを実装する必要があります。

スロットを実装するには、VS Codeでaddressbook.h ファイルを開き、スロットの宣言を追加します。

private slots:
    void on_addButton_clicked();

次に、addressbook.cpp を開き、スロットの定義を追加します：

void AddressBook::on_addButton_clicked()
{
    AddDialog dialog(this);
    dialog.exec();
}

他のシグナルに接続するには、そのシグナルをAddressBook クラスに追加する必要があります。これには、ヘッダーファイルaddressbook.h と実装ファイルaddressbook.cpp の両方を編集する必要があります。

addressbook.cpp にadddialog.h をインクルードします：

#include "adddialog.h"

変更内容をテストするには、アプリケーションをビルドして実行します。「Add 」ボタンを選択して「Add Address 」ダイアログを開き、次に「OK 」を選択してダイアログを閉じます。

リストウィジェットへの項目の追加

ユーザーが「OK 」を選択すると、QListWidget に項目が追加される必要があります。この機能を実装するには、on_addButton_clicked() スロット内のコードを次のように変更します:

AddDialog dialog(this);

    if (dialog.exec()) {
        QString name = dialog.nameEdit->text();
        QString email = dialog.emailEdit->text();

        if (!name.isEmpty() && !email.isEmpty()) {
            QListWidgetItem *item = new QListWidgetItem(name, ui.addressList);
            item->setData(Qt::UserRole, email);
            ui.addressList->setCurrentItem(item);
        }
    }

ダイアログが実行されます。ユーザーが「OK 」を選択して承諾した場合、Name およびEmail のフィールドが抽出され、指定された情報を含むQListWidgetItem が作成されます。

選択した項目を表示する

ユーザーがリストウィジェットで項目を選択した際に、フォーム下部の `nameLabel ` および `emailLabel ` を更新するには、`AddressBook ` クラスに別のスロットを追加します。

addressbook.h ファイル内で、クラスのprivate slots セクションに以下のコードを追加します。

void on_addressList_currentItemChanged();

次に、以下のコードブロックを`addressbook.cpp`に追加します:

void AddressBook::on_addressList_currentItemChanged()
{
    QListWidgetItem *curItem = ui.addressList->currentItem();

    if (curItem) {
        ui.nameLabel->setText("Name: " + curItem->text());
        ui.emailLabel->setText("Email: " + curItem->data(Qt::UserRole).toString());
    } else {
        ui.nameLabel->setText("<No item selected>");
        ui.emailLabel->clear();
    }
}

この命名規則により、このスロットは自動的にaddressList のQListWidget::currentItemChanged()シグナルに接続され、リスト内の選択項目が変更されるたびに呼び出されるようになります。

「削除」ボタンの機能を追加する

Delete ボタンのスロットを実装するには、Visual Studioでaddressbook.h ファイルを開き、on_deleteButton_clicked() スロットの宣言を追加します。次に、addressbook.cpp を開き、on_deleteButton_clicked() のスロット定義を追加します。

スロットの本体に以下のコードを入力します:

void AddressBook::on_deleteButton_clicked()
{
    QListWidgetItem *curItem = ui.addressList->currentItem();

    if (curItem) {
        int row = ui.addressList->row(curItem);
        ui.addressList->takeItem(row);
        delete curItem;

        if (ui.addressList->count() > 0)
            ui.addressList->setCurrentRow(0);
        else
            on_addressList_currentItemChanged();
    }
}

これでアプリケーションの完成です。