チュートリアル：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 の場合）を選択してプロジェクトを作成します。

ウィザードは以下のファイルを生成します：

• pyproject.tomlPythonプロジェクト内のファイルとその他の設定のリストです。
• main.pyいくつかのボイラープレート・コードがあります。
• main.qml Qt Quick コントロールをインポートします。
• 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 = 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 コントロールとレイアウトのインポートを追加します：

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 コントロールの追加

ColumnLayout タイプの中にText とButton QML タイプを追加して、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 Design Studioを使って、Qt Quick UIをデザインすることもできます。

アプリケーションの実行

(Run) を選択してアプリケーションを実行します。