チュートリアル：Qt Quick とQt for Python

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

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

Qt for Python アプリケーションの作成に関するその他の例については、「Qt for Python: チュートリアル」を参照してください。

開始する前に

開始する前に、次の操作を行う必要があります：

• VS Code 用 Qt 拡張機能をインストールする
• Qtのインストールを登録する

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

Visual Studio CodeでPythonコードを使用したQt Quick アプリケーションを作成するには：

1. Welcome に移動し、「New project 」を選択します。
2. Project で、以下を選択します Qt Quick application (Qt for Python)を選択します。

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

3. Name で、プロジェクト名を入力します。
4. Create in で、プロジェクトファイルのパスを入力します。
5. 「Open in new window 」を選択してプロジェクトファイルを作成し、新しい VS Code ウィンドウで開きます。

これで、Qt for Python コードを含む、動作する小さなQt Quick アプリケーションが完成しました。エディタのツールバーにある「 」を選択して、プレビューを表示します。現時点では、ウィンドウは空の状態です。

ウィザードによって、以下のファイルが作成されます：

• pyproject.toml、Pythonプロジェクト内のファイル一覧やその他の設定が記載されています。
• main.py、ここにいくつかの定型コードが含まれています。
• Main.qml：Qt Quick コントロールをインポートするファイル。
• qmldir、QMLモジュールを宣言するファイル。
• requirements.txt：生成されたコードの PySide バージョンを格納するファイルです。このファイルを使用して、pip を通じて必要な PySide バージョンをインストールできます。

プロジェクト用に PySide6 をインストールする

VS CodeからPySide6プロジェクトを実行する際の推奨方法は、プロジェクトごとにPySide6をインストールすることです。Qt Extension for VS Codeは、main.py を初めて開いた際に、そのようにするよう促します。

Qt Quick へのインポートを追加する

ウィザードは、QGuiApplication およびQQmlApplicationEngine にアクセスできるよう、main.py のソースファイルに以下のインポートを追加します：

import sys
from pathlib import Path

from PySide6.QtGui import QGuiApplication
from PySide6.QtQml import QQmlApplicationEngine

main関数の追加

また、ウィザードは `main` 関数を追加し、そこで `QGuiApplication ` インスタンスを作成して、システム引数を `QGuiApplication ` オブジェクトに渡します：

if __name__ == "__main__":
    app = QGuiApplication(sys.argv)
    ...

QMLファイルの読み込み

mainクラス内の以下の行では、QQmlApplicationEngine インスタンスを作成し、生成されたQMLモジュールをエンジンオブジェクトに読み込みます：

...
engine = QQmlApplicationEngine()
qml_file = Path(__file__).resolve().parent / "main.qml"
engine.load(qml_file)
...

最後に、ウィザードはファイルが正常に読み込まれたかどうかを確認するコードを追加します。ファイルの読み込みに失敗した場合、アプリケーションはエラーコードを返して終了します。読み込みに成功した場合、ウィザードはapp.exec() メソッドを呼び出し、Qtのメインループに入り、Qtコードの実行を開始します:

...
if not engine.rootObjects():
    sys.exit(-1)

sys.exit(app.exec())
...

UIの設計

「Edit 」モードでMain.qml ファイルを開き、Qt Quick のUIを設計します。

インポートの追加

Qt Quick Controls およびLayoutsのインポートを追加します：

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

プロパティと関数の追加

ウィザードによってメインウィンドウが追加されます：

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
}

表示されるテキストの言語をランダムに選択するプロパティと関数を追加します：

    ...
    readonly property list<string> texts: ["Hallo Welt", "Hei maailma",
                                           "Hola Mundo", "Привет мир"]

function setText() {
    var i = Math.round(Math.random() * 3)
    text.text = texts[i]
}

追加Qt Quick Controls

UIを設計するために、ColumnLayout 型内にText およびButton のQML型を追加します:

    ColumnLayout {
    anchors.fill:  parent

    Text {
        id: text
        text: "Hello World"
        Layout.alignment: Qt.AlignHCenter
    }
    Button {
        text: "Click me"
        Layout.alignment: Qt.AlignHCenter
        onClicked:  setText()
    }
}

これでアプリケーションの準備が整いました。プレビューを表示して、期待どおりに動作するかテストできます。