PySide2 の UI デザインを QtDesigner で行う

2018.05.27 2018.10.22

はじめに

Qt では QtCreator という IDE を使って UI デザインができるが、PySide でも QtDesigner を使って UI デザインを行う事ができる。

QtDesigner のインストール

QtDesigner は、下記のようにしてインストールできる。

Windows の場合

Windows の場合、PySide2 をインストールした際に designer.exe の名前ですでにインストールされている。例えば、仮想環境 env に PySide2 をインストールしているのであれば、env\Lib\site-packages\PySide2\desinger.exe が QtDesigner となっている。

Ubuntu の場合

Ubuntu の場合、PySide2 をインストールしただけではインストールされていないので、下記のようにしてインストールする。

$ sudo apt install qttools5-dev-tools

これでメニューから「Qt デザイナ」を起動できる。下記は Ubuntu MATE の例。

UI デザインを行う

QtDesigner を起動して UI のデザインをする。QtDesigner 自体は適当に触っていれば大体検討つくはず。ここでは、単純にラベルとボタンを一つずつ張り付けた MinWindow を作成した。

デザインが出来上がったら、「ファイル」メニューから保存すると .ui ファイルが作成される。（ここでは、main_sample.ui という名前とする。）

UI をロードするコード

Python コードからこの .ui ファイルをロードして使用すれば良い。下記のようなコードで MainWindow をロードして表示できる。

import sys
from PySide2.QtUiTools import QUiLoader
from PySide2.QtWidgets import QApplication
from PySide2.QtCore import QFile

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

    # ui ファイルを開く
    file = QFile("main_sample.ui")
    file.open(QFile.ReadOnly)

    # ローダを使って ui ファイルをロードする
    loader = QUiLoader()
    window = loader.load(file)

    window.show()

ローダを使って ui ファイルをロードするだけなので難しくは無い。このプログラムを実行すると、下記のように main_sample.ui で定義したウィンドウが表示される。

UI 定義されたオブジェクトにコードからアクセスする

ui ファイルで定義したオブジェクトにアクセスするには、ローダから取得したオブジェクトからアクセスできる。上記ローダの部分を下記のように書き換えてみる。

   loader = QUiLoader()
   window = loader.load(file)
   window.label.setText("Hello Japan.")

これを実行すると、ui デザインの "Hello World!" が "Hello Japan." に書き換わっているのを確認できる。

参考

Qt for Python UiFiles