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

このチュートリアルでは、Qt Extension for VS Code を使ってアプリケーションを作成する方法を説明します。 Qt Quickアプリケーションを作成する方法を説明します。プロジェクトウィザードを使用してプロジェクトを作成し、Qt Quick コントロールを使用して UI を設計します。また、プロジェクトに QML ファイルを追加する方法も学びます。

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

始める前に

始める前に

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

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

Visual Studio Code でQt Quick プロジェクトを作成します：

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

   Qt Quick アプリケーション}。" src="images/vscodeext-create-new-project-quick.webp" title="{新規アイテムビューの Qt Quick アプリケーション}。"/>

3. Name にQuickAddressBook と入力します。
4. Create in に、プロジェクト・ファイルのパスを入力します。
5. Create を選択して、プロジェクト・ファイルを作成します。
6. プロジェクトの CMake キットを選択します。

これで、Qt Quick アプリケーションが作成されました。ビルドして実行するには、 を選択します。今のところ、結果は空のウィンドウです。

メインウィンドウのデザイン

ウィザードはあなたのためにメインQMLファイルを作成し、ApplicationWindow 型のルートオブジェクトを宣言しました。このファイルを変更して、アプリケーションのメインウィンドウをデザインします。

コンポーネントをコンテキストにバインドするには、Bound を指定します：

pragma ComponentBehavior: Bound

ルート・タイプで使用する予定のモジュールの import ステートメントを追加します：

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

title プロパティの値をアプリケーションのメインウィンドウのタイトルに設定します：

ApplicationWindow {
    id: mainWindow
    visible: true
    width: 480
    height: 640
    title: qsTr("Address Book")

ボタンの追加

Add ボタンを作成するには、Qt Quick ControlsモジュールからButton タイプのオブジェクトを宣言します。ボタンtext プロパティの値をAdd... に、font.pointSize プロパティの値を24 に設定します：

Button {
    id: addButton
    text: "Add..."
    font.pointSize: 24

アプリケーションを実行すると、このようになります：

ボタンをアクションに接続する

QMLにはシグナルとハンドラの仕組みがあり、シグナルはイベント、シグナルはシグナルハンドラを通して応答します。シグナルが発生すると、対応するシグナルハンドラが呼び出されます。ハンドラにスクリプトやその他の操作などのロジックを配置することで、コンポーネントがイベントに応答できるようになります。

<Signal> 特定のオブジェクトに対して特定のシグナルが発せられたときに通知を受け取るには、オブジェクト定義でon<Signal> というシグナルハンドラを宣言します。シグナルハンドラには、シグナルハンドラが呼び出されたときに実行されるJavaScriptのコードを含める必要があります。

Button タイプにはclicked シグナルがあり、ユーザがボタンをクリックしたときに発信されます。ユーザーがメイン・ウィンドウのAdd ボタンを選択したときに、アドレス帳エントリーを追加するためのポップアップを呼び出すには、ボタンのonClicked シグナル・ハンドラをポップアップのopen() メソッドに接続する必要があります：

onClicked: newAddressPopup.open()

ポップアップは後で別のQMLタイプとして追加します。

リストモデルの追加

ApplicationWindow の中で、ListModel 型のオブジェクトをid addressList で宣言し、コンタクトデータを格納します。リストモデルは自由形式のリストデータソースを定義します：

ListModel {
    id: addressList
}

ポップアップの宣言

ユーザがアドレス帳のエントリを追加するポップアップを定義するカスタムNewAddressPopup 型のオブジェクトを宣言します。addressList モデルにアドレス帳エントリを追加するためにonAddressAdded シグナルハンドラを使用します：

NewAddressPopup {
    id: newAddressPopup
    onAddressAdded: function(newName, newAddr) {
        addressList.append({name: newName, addr: newAddr})
}

NewAddressPopup タイプは後で作成します。

ボタンを配置する

Button オブジェクトとRepeater タイプのインスタンスを配置するためにColumnLayout タイプのオブジェクトを宣言します：

ColumnLayout {
    id: mainWindowLayout
    Layout.fillWidth: true
    spacing: 0
    Button {
        id: addButton
        Layout.preferredWidth: mainWindow.width
        Layout.fillWidth: true
        text: "Add..."
        font.pointSize: 24
        onClicked: newAddressPopup.open()
    }

アプリケーションを異なる画面サイズでスケーラブルにするために、Layout.fillWidth をtrue に設定します。列の行間のspacing を0 に設定します。ボタンの好ましい幅をメインウィンドウの幅にバインドします。

リピーターを追加する

Repeater 。モデルの各エントリに対して、デリゲートはモデルからのデータでシードされたコンテキストでインスタンス化されます。リピーターが作成するデリゲート項目を視覚的に配置するために、ColumnLayout などのポジショナー型のインスタンスでリピーターを囲みます。

リピータに使用するmodel としてaddressList を指定します：

Repeater {
    id: addressListViewer
    model: addressList
    Layout.preferredWidth: mainWindow.width
    Layout.fillWidth: true
}

リピーターがアドレス帳のエントリーをインスタンス化するために使用する、カスタムAddressBookItem タイプのオブジェクトを宣言します：

AddressBookItem {
    id: addressBookItem

AddressBookItem タイプは後で作成します。

削除ボタンをアクションに接続する

onRemoved シグナルハンドラを使用して、ユーザーがRemove ボタンをクリックしたときに、アドレス帳エントリをリストから削除します。

onRemoved: addressList.remove(index)

ポップアップを追加する

メインウィンドウの準備ができたので、ユーザーがアドレス帳エントリを追加できるポップアップの作成に移ります。AddressBookItem タイプは、ユーザーがメインウィンドウに入力したデータをリピーターがインスタンス化することを指定します。

Visual Studio CodeのQtファイルウィザードを使用して、ポップアップを定義するカスタム型を作成します。

ポップアップの作成

プロジェクトにカスタム QML タイプを追加します：

1. Command Palette に移動し、Qt: Create a new project or file を選択します。
2. File で、QML file を選択します。
3. Name にNewAddressPopup と入力します。
4. Create in で、プロジェクト・フォルダーへのパスの後にQuickAddressBookTypes と入力すると、そのサブフォルダーに新しいファイルが作成されます。
5. カスタム QML タイプを作成するには、Create を選択します。

NewAddressPopup.qml を CMakeLists.txt ファイルのQML_FILES セクションに追加します：

qt_add_qml_module(appQuickAddressBook
    URI QuickAddressBook
    VERSION 1.0
    QML_FILES
        Main.qml
        QuickAddressBookTypes/AddressBookItem.qml
        QuickAddressBookTypes/NewAddressPopup.qml
)

ポップアップをデザインする

NewAddressPopup.qml で、Popup 型のルートオブジェクトを宣言して、ApplicationWindow で開くポップアップを作成します。ポップアップはそれ自体のレイアウトを提供しないので、ColumnLayout とRowLayout を使用して、Name とE-Mail Address フィールドを配置します。

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Popup {
    id: newAddressPopup

modal プロパティをtrue に設定して、ポップアップがモーダルであることを指定します。focus プロパティをtrue に設定して、ポップアップがフォーカスを要求することを指定します：

modal: true
focus: true

width,x,y プロパティに値を指定して、メイン・ウィンドウの上にポップアップの位置とサイズを設定します：

width: parent.width * 0.9
x: (parent.width - width) / 2
y: 35

ポップアップ・コントロールをリセットする

ポップアップが開くとき、Name とE-Mail Address フィールドはプレースホルダ・テキストを表示し、以前に入力された値はクリアされなければなりません。onOpened シグナルハンドラを使用してフィールドの値をリセットし、Name フィールドにフォーカスを与えます：

onOpened: {
    nameField.text = "";
    addrField.text = "";
    nameField.focus = true;
}

位置フィールド

ColumnLayout 型のインスタンスを使用して、ポップアップのName とE-Mail Address フィールドを指定するTextField オブジェクトを配置します：

ColumnLayout {
    anchors.fill: parent
    TextField {
        id: nameField
        placeholderText: qsTr("Name")
        font.pointSize: 24
        Layout.preferredWidth: newAddressPopup / 2
        Layout.fillWidth: true
    }
    TextField {
        id: addrField
        placeholderText: qsTr("E-Mail Address")
        font.pointSize: 24
        Layout.preferredWidth: newAddressPopup / 2
        Layout.fillWidth: true
    }

ボタンの位置

RowLayout タイプのインスタンスを使用して、Add とCancel ボタンを指定する2つのButton オブジェクトを配置します：

RowLayout {
    Layout.fillWidth: true
    Button {
        text: "Add"
        enabled: nameField.length > 0 && addrField.length > 0
        font.pointSize: 24
        Layout.preferredWidth: newAddressPopup / 2
        Layout.fillWidth: true

ボタンをアクションに接続する

ユーザがAdd ボタンをクリックすると、Name とE-Mail Address フィールドに入力された値がメインウィンドウのアドレスリストに追加され、ポップアップが閉じられます。

これを有効にするには、addressAdded(string newName, string newAddr) シグナルを追加します：

signal addressAdded(string newName, string newAddr)

Add ボタンのonClicked シグナルハンドラをaddressAdded() シグナルに接続し、ポップアップのclose() メソッドに接続します：

    onClicked: {
        newAddressPopup.addressAdded(nameField.text, addrField.text)
        newAddressPopup.close()
    }
}

Cancel ボタンでは、onClicked シグナルハンドラをポップアップのclose() メソッドに接続して、データを保存せずにポップアップを閉じます：

Button {
    text: "Cancel"
    font.pointSize: 24
    Layout.preferredWidth: newAddressPopup / 2
    Layout.fillWidth: true
    onClicked: newAddressPopup.close()
}

アドレス帳エントリの定義

カスタムAddressBookItem タイプはメインウインドウでアドレス帳エントリを表示する方法を指定します。

ポップアップの作成」の説明に従って、AddressBookItem.qml という新しい QML ファイルを作成し、CMakeLists.txt ファイルに追加します。

エントリーをデザインする

まず、Rectangle 型のルートオブジェクトを宣言します。これはQMLでアプリケーションを作成するための基本的な構成要素の一つです。後で参照できるようにid 。

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Rectangle {
    id: addressBookItem

Rectangle とText で使用するプロパティを設定します：

required property int index
required property string name
required property string addr

行に交互の色を使うには、color プロパティの値を設定します：

color: (index % 2) == 0 ? "dimgray" : "lightgray"

矩形を親の左右の端にアンカーして、アプリケーションを異なる画面サイズでスケーラブルにします。矩形height プロパティを、それが含むテキスト項目の高さにバインドします：

anchors.left: parent.left
anchors.right: parent.right
height: itemText.height + 12

削除ボタンをアクションに接続する

削除ボタンのonClicked シグナルハンドラに接続するremoved() シグナルを追加します。これにより、ユーザーがボタンをクリックすると、メイン・ウィンドウからアドレス帳の項目が削除されます：

signal removed()

ボタンとテキストを配置する

アドレス帳エントリーを定義するために、RowLayout タイプのインスタンス内でRoundButton とText タイプのインスタンスを使用します：

RowLayout {
    spacing: 12
    Layout.fillWidth: true
    RoundButton {
        id: deleteButton
        text: "??"
        font.pointSize: 12
        palette.buttonText: "red"
        onClicked: addressBookItem.removed()
    }

テキストをフォーマットする

text プロパティの値を設定して、ポップアップからname とaddr フィールドの値を結合し、値に太字と斜体の書式を使用します：

Text {
    id: itemText
    font.pointSize: 24
    text: "<b>" + addressBookItem.name + "</b><br><i>" + addressBookItem.addr + "</i>"
}

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