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

まず、Qt for Python アプリケーションプロジェクトを作成します。次に、テンプレートコードを編集して、Qt Quick を使用して「Hello World」というテキストを複数の言語で表示する簡単なアプリケーションを開発します。

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

空のプロジェクトを作成する

メインの QML ファイルを持つQt for Python アプリケーションを作成するには：

1. 「File 」>「New Project 」に移動します。
2. [ Application (Qt for Python) > Qt Quick Application - Empty >Choose を選択して、「Project Location 」ダイアログを開きます。

   

3. 「Name 」で、プロジェクト名を入力します。例：hello_world_quick。
4. 「Create in 」で、プロジェクトファイルのパスを入力します。例：C:\Examples 。
5. 「Next 」（Windows および Linux）または「Continue 」（macOS）を選択して、「Define Project Details 」ダイアログを開きます。

   

6. 「PySide version 」で、生成されるコードのPySideバージョンを選択します。
7. Next またはContinue を選択して、「Kit Selection 」ダイアログを開きます。

   

8. プロジェクトのビルド、デプロイ、実行に使用する Python キットを選択します。デフォルトでは、ソースディレクトリ内にプロジェクト用の仮想環境が作成されます。グローバルインタプリタを使用するには、Details でキットの Python と同じ名前のビルド構成を選択してください。
9. プロジェクト設定を確認し、[Finish ]（Windows および Linux）または [Done ]（macOS）を選択してプロジェクトを作成します。

ウィザードは、プロジェクト名と同じ名前の QML モジュール用に、プロジェクト名と同じ名前のサブディレクトリを作成し、以下のファイルを生成します:

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

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

Edit モードで、[Install ] を選択し、プロジェクト用にPySide6を設定します。

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()
engine.addImportPath(Path(__file__).parent)
engine.loadFromModule("ProjectName", "Main")
...

最後に、ウィザードはファイルが正常に読み込まれたかどうかを確認するコードを追加します。ファイルの読み込みに失敗した場合、アプリケーションはエラーコードを返して終了します。読み込みに成功した場合、ウィザードは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.Window
import QtQuick.Controls
import QtQuick.Layouts

プロパティと関数の追加

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

Window {
    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()
    }
}

また、Qt Quick Designer やQt Design Studio を使用して、Qt Quick の UI を設計することもできます。

アプリケーションの実行

「 」（Run ）を選択して、アプリケーションを実行します。