Turn On Blog

ぺーぺーSEの色々メモ

【Qt】.uiファイルを使った画面製作の基本

Qt Advent Calendar 2015 - Qiita
Qt Advent Calendar、6日めの記事となります。

昨日の記事は、asobotさまの「Alt+Enterを使おう!」でした。
Qt Creatorのリファクタリング機能はサイコーで、私も大好きです。
使ったことの無い方は、是非以下記事を読んで活用してください!qiita.com


さて、今回の記事は、Qt画面製作初心者向けレイアウト講座です。

バーティカルレイアウトだかグリッドレイアウトだか知らないけど、そういうので画面製作してると、なんかストレスたまるし、思った通りにできないんだよな~

という気持ちになり、ついつい絶対座標で作成してしまう…… なんてことありませんか?
本記事ですこしでもそのストレスが解消されると嬉しいです。

さっそくやっていきましょう。

レイアウトの適用方法

以下2通りの方法があります。

  1. デザイン画面の「Layouts」からドラッグ
  2. 画面上部のレイアウト適用ボタンを押す

デザイン画面の「Layouts」からドラッグ

f:id:taurano:20151206213700j:plain
画面内に新規でレイアウトスペースを追加します。
レイアウトを入れ子にしたいときなどに使いましょう。

画面上部のレイアウト適用ボタンを押す

f:id:taurano:20151206213747j:plain
画面直下のウィジェットをそのレイアウトで並び替えます。
画面全体にレイアウトを適用したいときはこちらを使いましょう。

ならべる

縦に並べたいときはVerticalLayout

何かを縦方向に羅列したいときには、VerticalLayout。
f:id:taurano:20151206213913j:plain

横に並べたいときはHorizontalLayout

f:id:taurano:20151206213935j:plain

格子状に並べたいときはGridLayout

f:id:taurano:20151206214123j:plain

詰めたい、寄せたい

レイアウトを用いていると、以下の様な不満が湧いてくるかと思われます。

  • ここ、画面端からちょっと開けたいんだけど…
  • ここのボタン、画面上で等間隔じゃなくて、上に寄せて表示したいんだけど…

そこで活躍するのが、Vertical/Horizontal Spacer。
以下からドラッグして、間隔をあけたいところや、
詰めたいウィジェットの下部などに配置します。
f:id:taurano:20151206214239j:plain

f:id:taurano:20151206214447j:plain
上記のようなボタン4つの画面ですが、
ボタンを画面上部に詰めて表示したいとします。

VerticalSpacerを画面下部にドラッグ&ドロップします。
f:id:taurano:20151206214844j:plain

できましたね。
f:id:taurano:20151206215007j:plain

しかしここで、

上部がつまりすぎだ!ちょっと…30pxくらいあけてくれ!

という要望をいただいたとします。
もう一度、こんどは上の方にVerticalSpacerをドラッグ&ドロップしてみましょう。
f:id:taurano:20151206215113j:plain

このままではだめなので、上のSpacerの高さを修正します。
プロパティ編集部分でやっていきましょう。
「sizeType」プロパティを「Fixed」、
「sizeHint」プロパティの「高さ」を30pxに設定します。
f:id:taurano:20151206215448j:plain

無事いいかんじのスペースが画面上部にできましたね。

ちょっと複雑なレイアウトに挑戦する

入力欄は画面横幅いっぱいに格子で表示したいけど、
その下に置く「決定」ボタンは最低限の大きさで画面中央に表示したい…というときは、
レイアウトを入れ子にして画面製作を行いましょう。*1

入れ子のレイアウト

まずは、フォーム部分のレイアウトを配置しましょう。
f:id:taurano:20151206220359j:plain

次に、ボタンを配置します。
f:id:taurano:20151206220451j:plain

これらのレイアウトを縦並びにしたいので、
画面全体にHorizontaiLayoutを適用します。
配置したレイアウト、ボタン以外の部分をクリックし、「垂直に並べる」ボタンを押下します。
f:id:taurano:20151206220805j:plain

このままではボタンが幅広なので、ボタンのプロパティを編集しましょう。
横方向のサイズポリシーを「Fixed」、幅をお好みのサイズに設定します。
f:id:taurano:20151206221334j:plain

どうでしょうか。左に寄ってしまいましたね。
これを中央寄せにしていきましょう。

レイアウト内配置の変更

ボタンを右クリックし、
「レイアウトの配置」→「中央揃え(横方向)」を選択します。
f:id:taurano:20151206221545j:plain

いい感じになりましたね。
f:id:taurano:20151206221643j:plain

あとは好きにフォームを配置してできあがりです。
f:id:taurano:20151206221836j:plain

それではそろそろ応用編に行ってみましょう、と、思ったのですが、
ぼちぼち長くなってしまったので、本日は一旦このあたりで区切らせていただきます。

Qt Advent Calendar2015、非情に勉強になるエントリーが多い中、
非常に初歩的な内容になってしまいましたが、お困りのどなたかの助けになればとても嬉しいです。

Twitter(たうらの (@taura_no) | Twitter)やコメントなどで、応用編へのリクエストや、内容へのご指摘などお寄せ頂けると嬉しいです。
お読み頂き、ありがとうございました!

*1:他の解決策は色々ありますが、一例として御覧ください