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

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

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

始める前に

始める前に

• Qt Extension for VS Code のインストール
• Qt インストールの登録

Qt Widgets アプリケーション・プロジェクトの作成

Qt アプリケーションを開発するには、コードを格納したプロジェクトフォルダと、プロジェクトのビルド方法を記したプロジェ クト設定ファイル (CMakeLists.txt) が必要です。

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

• AddressBook (QWidget に基づく)
• AddDialog (QDialog に基づく)

Visual Studio Code でQt Widgets アプリケーション・プロジェクトを作成するには、次の手順に従います：

1. Command Palette に移動し、Qt: Create a new project or file を選択します。
2. Project で Qt Widgets project.

   

3. Base class で QWidgetを選択します。
4. UI フォームを生成するには、UI form を選択します。
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コード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 ウィジェットをフォームの右上隅にドラッグして、Add とDelete ボタン用のQPushButton オブジェクトを追加します。
5. ボタンのobjectName プロパティをaddButton とdeleteButton に、text プロパティ値をAdd とDelete に設定します。
6. つのLabel ウィジェットをフォームにドラッグして、リストで選択されたアイテムを表示するためのQLabel オブジェクトを追加します。
7. 最初のラベルの名前をnameLabel に変更し、そのtext プロパティを<No item selected> に変更します。
8. 番目のラベルの名前を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 として保存します。

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

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. 別のLabel を追加し、そのobjectName プロパティをemailText に、text プロパティをEmail: に設定します。
4. Line Edit (QLineEdit) を追加し、そのobjectName プロパティをnameEdit に設定する。text プロパティは空のままにする。
5. 別の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 の Signals and Slots Editing Mode に入ります。

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 の両方を編集する必要があります。

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

#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();
    }
}

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