Qt Designer の使い方


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

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

ツールバーにボタンを配置するために、そのボタンに対応したアクションを作ります。
![2016-07-10_212630.png](https://qiita-image-store.s3.amazonaws.com/0/46088/6fa26218-9570-ffa0-7796-8fafa112a996.png)
そのアクションをツールバーにドラッグ＆ドロップすることでボタンを配置できます。
![2016-07-10_212704.png](https://qiita-image-store.s3.amazonaws.com/0/46088/93eef35c-5106-2ce1-6ac9-f540933fb52d.png)
アクションはアクションエディタの [新規] ボタンを押すことで作成できます。
ボタンに画像を表示する場合は、アイコンにリソースの画像を設定します。
![2016-07-10_201334.png](https://qiita-image-store.s3.amazonaws.com/0/46088/60600245-6fbe-bd96-60f8-a942a6d4e2c4.png)
ボタンに画像を設定する場合は、リソースとして画像を登録し、それを設定します。

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

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

```python
 # 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](https://qiita-image-store.s3.amazonaws.com/0/46088/6659ea01-efa0-302c-ded5-de2d15094f8b.png)
この状態でウィンドウをリサイズしても、 centralWidget は変化しません。
この状態では横にサイズを大きくしても、中のウィジェットのサイズは変わりません。
![2016-07-10_200616.png](https://qiita-image-store.s3.amazonaws.com/0/46088/508d33a8-b062-f8f3-ad73-08fc99dcbc45.png)

この場合、MainWindow のコンテキストメニューの [レイアウト] からレイアウトの種類を選ぶことでリサイズに対応します。
今回は直下のレイアウトに QVBoxLayout を使うため [垂直に並べる] を選択しました。
横にサイズを大きくすると中のウィジェットも横に大きくなりました。
![2016-07-10_200640.png](https://qiita-image-store.s3.amazonaws.com/0/46088/be1654a4-7f25-ce89-865e-c704fe0bd996.png)

# QVBoxLayout/QHBoxLayout で要素ごとに伸縮の許可を設定する方法
水平、垂直に並べるレイアウトにウィジェットを要素として追加します。
その中で一部だけサイズに応じて伸縮してほしい場合は、
layoutStretch プロパティで 1,0,0,1,0,1,1 のように 0 または 1 のカンマ区切りの文字列を設定します。
![2016-07-10_202812.png](https://qiita-image-store.s3.amazonaws.com/0/46088/750fab41-c7b4-5bdb-3d0c-2bc9cf50f063.png)
今の例では、1を指定した 1, 4, 6, 7 番目の要素だけが伸縮をします。
0 を指定した 2, 3, 5 番目の要素は伸縮しません。
横幅を広げる前
![2016-07-10_202408.png](https://qiita-image-store.s3.amazonaws.com/0/46088/179919f5-1daa-67b6-f1a6-90a8c567a2fe.png)
横幅を広げた後
![2016-07-10_202728.png](https://qiita-image-store.s3.amazonaws.com/0/46088/0d48d3b3-5688-1ccc-0c78-119bef38d6a8.png)

# QPushButton のツールチップの設定
ボタンにマウスポインタをホバーさせたときに、説明を表示したい場合の設定です。
![2016-07-10_201211.png](https://qiita-image-store.s3.amazonaws.com/0/46088/c91a0d91-5cce-1ec3-bac2-e5e3b5fc1571.png)
プロパティの Tooltip に文字列を設定します。
![2016-07-10_201128.png](https://qiita-image-store.s3.amazonaws.com/0/46088/124a3c0c-81be-4cf7-679f-69e26b50d960.png)

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

```python
 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](https://qiita-image-store.s3.amazonaws.com/0/46088/0962adbb-ceba-9b3d-408a-ec120f754eee.png)

スタイルシートを指定していない場合のツールバー
![2016-07-10_222058.png](https://qiita-image-store.s3.amazonaws.com/0/46088/50e5add9-da34-9db4-7f7c-67896e6c4560.png)

スタイルシートを設定した場合のツールバー（背景色を変更）
![2016-07-10_222025.png](https://qiita-image-store.s3.amazonaws.com/0/46088/c77884b6-3de2-5b19-117c-0a0f16ebcdaf.png)

# QTreeView と QTreeWidget の違い
Model-View の実装が違います。

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

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

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