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

まず、Qt for Python アプリケーション・プロジェクトを作成します。そして、Qt Quick を使って、Hello Worldというテキストをいくつかの言語で表示する小さなアプリケーションを開発するために、定型コードを編集します。

Qt for Python アプリケーションの作成例については、Qt for Python Examples and Tutorials を参照してください。

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

メインの 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.tomlPythonプロジェクトとその他の設定ファイルのリストです。
• main.pyこれは、Pythonプロジェクト内のファイルやその他の設定を一覧表示します。
• <ProjectName>/Main.qml Qt Quick コントロールをインポートします。
• <ProjectName>/qmldirQMLモジュールを宣言します。
• 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

メイン関数の追加

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

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

QMLファイルのロード

メインクラスの次の行では、QQmlApplicationEngine インスタンスを作成し、生成された QML モジュールを engine オブジェクトにロードします：

...
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

ColumnLayout タイプの中にText とButtonQML タイプを追加し、UI をデザインします：

    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) を選択してください。