12
22

More than 5 years have passed since last update.

Qt Designer の使い方

Last updated at Posted at 2016-07-10

Qt Designer を使ってポトペタでウィンドウを作成しました。
そのときに調べたことをメモとして残します。

ツールバーの設定の仕方

ツールバーはウィンドウ上のコンテキストメニューの [ツールバーの追加] で追加できます。
最初はそこにツールボタンをドラッグ&ドロップで配置するのかと思ったのですが違っていました。

ツールバーにボタンを配置するために、そのボタンに対応したアクションを作ります。
2016-07-10_212630.png
そのアクションをツールバーにドラッグ&ドロップすることでボタンを配置できます。
2016-07-10_212704.png
アクションはアクションエディタの [新規] ボタンを押すことで作成できます。
ボタンに画像を表示する場合は、アイコンにリソースの画像を設定します。
2016-07-10_201334.png
ボタンに画像を設定する場合は、リソースとして画像を登録し、それを設定します。

ツールバーのボタンのイベント処理

ツールバーのボタンが押されたときのイベント処理を PySide で行う場合は、次のようにアクションのイベントに関数を割り当てます。

たとえば actionMenu というアクションをアクションエディタで作り、ツールバーに設定しました。
そのボタンが押されたときに onToolbarMenu という関数を呼び出したい場合は次のように PySide で設定します。

 # ui ファイルを読み込み、 ui オブジェクトを作成、表示
 loader = QtUiTools.QUiLoader()
 self.ui = loader.load("XXX.ui")
 self.ui.show()
 # アクションのイベントハンドラを設定
 self.ui.actionMenu.triggered.connect(self.onToolbarMenu)

画像をリソースに登録する

画像を登録するには、リソースエディタを使います。
リソースエディタの [リソースを編集] (鉛筆)ボタンでダイアログを表示します。
新しいリソースファイルを作成し、その qrc にプレフィックスを追加します。
プレフィックスを選択してから、[ファイルを追加] ボタンを押して画像を選択します。
これで、画像が qrc ファイルのリソースとして登録されて、ウィジェットの画像選択で選ぶことができます。

centralWidget がリサイズに対応してない場合

オブジェクトインスペクタの MainWindow の下に配置される centralWidget のアイコンがこのようになっていた場合は、レイアウトが無効になっています。
2016-07-10_200313.png
この状態でウィンドウをリサイズしても、 centralWidget は変化しません。
この状態では横にサイズを大きくしても、中のウィジェットのサイズは変わりません。
2016-07-10_200616.png

この場合、MainWindow のコンテキストメニューの [レイアウト] からレイアウトの種類を選ぶことでリサイズに対応します。
今回は直下のレイアウトに QVBoxLayout を使うため [垂直に並べる] を選択しました。
横にサイズを大きくすると中のウィジェットも横に大きくなりました。
2016-07-10_200640.png

QVBoxLayout/QHBoxLayout で要素ごとに伸縮の許可を設定する方法

水平、垂直に並べるレイアウトにウィジェットを要素として追加します。
その中で一部だけサイズに応じて伸縮してほしい場合は、
layoutStretch プロパティで 1,0,0,1,0,1,1 のように 0 または 1 のカンマ区切りの文字列を設定します。
2016-07-10_202812.png
今の例では、1を指定した 1, 4, 6, 7 番目の要素だけが伸縮をします。
0 を指定した 2, 3, 5 番目の要素は伸縮しません。
横幅を広げる前
2016-07-10_202408.png
横幅を広げた後
2016-07-10_202728.png

QPushButton のツールチップの設定

ボタンにマウスポインタをホバーさせたときに、説明を表示したい場合の設定です。
2016-07-10_201211.png
プロパティの Tooltip に文字列を設定します。
2016-07-10_201128.png

PySide から ui ファイルを使う

Qt Designer で作成した .ui ファイルを PySide の QtUiTools を使ってウィンドウとして作成できます。

 from PySide import QtUiTools
 # XXX_rc.py は XXX.qrc を変換したもの。qrcを使った ui を読み込む場合に必要。
 import XXX_rc.py
 # ui ファイルを読み込み、 ui オブジェクトを作成
 loader = QtUiTools.QUiLoader()
 ui = loader.load("XXX.ui")
 ui.show()

.qrc リソースは .py に変換して使う

Qt Designer で扱う画像は qrc に登録されています。
.qrc ファイルは PySide ではそのままでは利用できません。
.py ファイルに変換して、 import します。
QUiLoader は .ui ファイルを読み込んでいるときに、この import された .py のモジュールを利用します。
.py のファイル名は .qrc のファイル名に _rc を追加した名前にします。

XXX.qrc を python3 用の .py ファイルに変換する場合は、次のコマンドを実行します。

pyside-rcc.exe -py3 XXX.qrc > XXX_rc.py

pyside-rcc.exe は Python のインストールフォルダの直下の
Lib\site-packages\PySide にあると思います。

これにより XXX_rc.py が作成されます。

stylesheet を使って、簡単にデザインを設定する。

QWidget には styleSheet というプロパティがあります。
そこで、 css のような記述をすることで外観を簡単に変更できます。
[スタイルシートを変更]ダイアログでは、背景色を変える設定などを GUI で設定できます。

スタイルシートを設定します。[...]ボタンでダイアログを表示できます。
2016-07-10_221959.png

スタイルシートを指定していない場合のツールバー
2016-07-10_222058.png

スタイルシートを設定した場合のツールバー(背景色を変更)
2016-07-10_222025.png

QTreeView と QTreeWidget の違い

Model-View の実装が違います。

QTreeView は モデルが内蔵されていないので、自前のモデルを使って GUI を操作したい場合に向いています。
View だけという意味合いがネーミングから感じられます。

QTreeWidget は Qt ライブラリ独自のモデルが内蔵されているので、手軽にツリーGUIを使いたい場合に向いています。
逆に言えばモデルを好き勝手いじれません。

QTreeWidget は QTreeView の派生クラスで、利用者がモデルを作る手間を省いたクラスといえます。

12
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
22