2017-04-17

python,PyQt,Qt Designerでアプリ作成する方法

pyhtonで使われるGUI(グラフィカル ユーザー インターフェイス)には、Tkinterがある。
他に、wxpython、QtPy、kivyがある。

QtPy4 を使って GUI アプリの作成例。

言語 : pyhton3
GUI作成ソフト : Qt Designer
OS : Linux Mint 18

1. インストール

Qt Designer (ソフトウェアの管理)
pyqt4 ( $ sudo apt install python3-pyqt4 )
pyqt4 tool ( $ sudo apt install pyqt4-dev-tools )



2. Qt Designer 起動


Qt Designer起動画面
Qt Designer起動画面

3. (新しい)フォーオム選択


「Dialog without Buttons」 => 「作成」 クリック

Qt Designer フォーム選択
Qt Designer フォーム選択

4. フォームに必要なパーツを配置


アイコン「ウィジェット」ボタンをクリックする => パーツを配置する



以下のパーツをドラック&ドロップする。
「Line Edit」(1行のテキスト入力欄)
「Push Button」×2 (テキスト入力欄クリア・ボタン、フォームクローズ・ボタン)

テキスト入力欄配置
テキスト入力欄配置

ボタン配置
ボタン配置

5. 配置したパーツに機能を指定する


アイコン「シグナル/スロットを編集」ボタンをクリック => パーツに機能を指定する

パーツに機能を指定
パーツに機能を指定

パーツに機能を指定する方法

(1) ボタンをクリックするとテキスト入力欄が空になる

   1) マウスのポインタをボタン上に置き、ドラッグしながらテキスト入力欄へ移動する。

Qt Designer パーツに機能を指定する方法1
パーツに機能を指定する方法1-1

   2) 押した「ボタン」に何をしたら(左側)、「テキスト欄」がどうなるか(右側)を指定する。

      pushButton....項目から clicked() を選択
      lineEdit....項目から clear() を選択

Qt Designer パーツに機能を指定する方法2
パーツに機能を指定する方法1-2

   3) 「OK」ボタンをクリックすると、下図のように表示が変わる。


Qt Designer パーツに機能を指定する方法3
パーツに機能を指定する方法1-3


(2) ボタンをクリックするとフォームが閉じる(終了する)


   1) マウスのポインタをボタン上に置き、ドラッグしながら下方へ移動する。

Qt Designer パーツに機能を指定する方法4
パーツに機能を指定する方法2-1

   2) チェックを入れた後に左側項目を選択し、右側項目を選択する

      「QWidget...表示する」にチェックを入れる
      pushButton...項目から clicked() を選択
      Dialog.....項目から close() を選択
      以上のように順に操作することがここでは重要




   3) 「OK」ボタンをクリックすると、次のように表示が変わる。

Qt Designer パーツに機能を指定する方法5
パーツに機能を指定する方法2-2

   4) ボタンをダブルクリックし、表示ボタン名を変更する

     ( ”PushButton” から、それぞれ ”clear” ”close” とした )
     アイコンで「ウィジェットを編集」ボタンをクリックしてからボタン名を変更する。


6. 保存し、Qt Designer を終了




7. pyhton コードの書き出し

作成したフォームをpyhtonで書き出する。 
  本来は、フォーム => コードを表示でするのだが、コマンドで行う。

  保存したフォームのファイル名 : dw03.ui
  pyhtonコードの書き出しファイル名 : dw03.py

  コードの書き出しコマンド
  $ pyuic4 dw03.ui -o dw03.py

Qt Designer 書き出しコード
Qt Designer 書き出しコード
※ コードの書き出しをする場合、変換するファイル ( xxxxx.ui )があるディレクトリ内でする。

  dw03.py に書きだされた python コード内容

python コード内容


8. フォームを呼び出す python プログラムを作成


プログラム名 : 03.py

フォームを呼び出す python プログラム


9. 実行する


エディタ Geany で読み込み、実行 (F5キー)

Qt Designer 実行画面
Qt Designer 実行画面


Qt Designer で作成するだけで、 "Clear" ボタンでテキスト入力欄が 空に、 "Close" ボタンで フォームを閉じる、が機能した。 
Qt Designer はプログラムを組まずにボタンなどの機能をマウスだけで作成できた。

ただし、ターミナルから
$ python3 03.py
と入力しても、PyQt4 を認識しないエラーで起動しなかった。