第5章 Qt Designerを使ってみよう

5.1 Qt Designerとは

この章ではQt Designerと呼ばれるGUIアプリケーションを簡単に作成するためのツールの 基本的な使い方を説明していきたいと思います。 今まではWidget(部品)をどのように配置するのかはコードの上で書いていました。 しかし以外とこの作業は面倒なうえ、どのような仕上がりになっているかはコンパイルして プログラムを実行するまでわかりませんでした。

この問題を解決するためのツールがQt Designerです。 まずはQt Designerを使ってどのようなことができるかを見ていきましょう。

5.2 Qt Designerの起動

ではDesignerを起動してみましょう。

Windowsを使っている方は大体は、スタート → Qt by Trolltech v4.3.1 (OpenSource) → Designer の順で起動できると思います。Linuxを使っている方はコマンドラインにて designer と入力 することで起動できます。

image {Qt Designerの起動画面(on Windows)} {chap:05:exe01}

起動したらDialog without Buttonsを選択してOKを押しましょう。(図{chap:05:exe01}) 真ん中に表示されているDialog -untitled という部分がダイアログです。 ここに左側にあるウィジェットボックスから部品をドラッグアンドドロップして貼り付けます。

image1 {Qt Designer(on Windows)} {chap:05:exe02}

5.3 部品の配置

では、ウィジェットボックスからLine Edit,Label,Push Buttonを使って図{chap:05:exe02}のように 配置してみましょう。Push Buttonをダブルクリックするとボタンに表示される文字を変えることができます。 また、&Ok とするとOのしたに下線を引くことができます。

次にボタンの位置などを整えてみましょう。

image2 {Qt Designer(on Windows)} {chap:05:exe03}

図{chap:05:exe03}を見てください。図の左から赤い四角で囲まれている順に、 水平に並べる、垂直に並べる、格子状に並べる、サイズ調節となっています。 水平に並べるはいままで使ってきたQHBoxLayoutにあたります。 同様に垂直に並べる、格子状に並べるもQVBoxLayout、QGridLayoutと同じです。

OkボタンとCancelボタン二つを選択して垂直に並べるを押してください。 赤い四角で囲まれ、綺麗にボタンが整えられたと思います。

次にダイアログ内部の空いている所をクリックして水平に整えるボタンを押してください。 そして最後にサイズ調節ボタンを押してください。

image3 {Qt Designer(on Windows)} {chap:05:exe04}

図{chap:05:exe04}のように配置できたでしょうか。 これで部品の配置は終わりです。 メニューバーのフォーム → プレビュー を押してみてください。 そうすると実際にプログラムが実行された際に表示されるダイアログを見ることができます。

ここでLabelをもう少し大きくしたいと感じた方もいるかも(?)しれません。 その場合、Labelの幅は最低このくらいで高さがこのくらいといった設定も行うことができます。

image4 {Qt Designer(on Windows)} {chap:05:exe05}

まずLabelをクリックしてプロパティを見てください。(図{chap:05:exe05}) プロパティの中にminimumSizeという設定を行うところがあります。 ここでwidthを100,heightを0に設定してみましょう。 この設定を行うことで、ウィンドウのサイズが変わってもLabelが幅100以下になることはありません。

同様にしてline Editの方もminimumSizeを幅100,高さ0に設定してみましょう。

5.4 Signal/Slotを設定してみよう

部品を配置した後はSignal/Slotを設定してみましょう。 Qt Designerでは基本的なシグナル/スロットはDesigner上で作成することができます。 もちろん、自分で作った独自の機能を使いたい場合はソースコードを変更する必要があります。

image5 {Qt Designer(on Windows)} {chap:05:exe06}

図{chap:05:exe06}の赤い四角で囲まれているボタンを押してください。 このボタンを押す事によりシグナル/スロット編集モードに入ります。

image6 {Qt Designer(on Windows)} {chap:05:exe07}

また、シグナル/スロットエディタというウィンドウも表示させてください。 図{chap:05:exe07}のようにシグナル/スロットエディタにチェックを入れることで表示することができます。

では、まずはOkボタンをクリックしたら(Signal:clicked関数が発生したら)ダイアログが終了する (Slot:accept関数が発生する)ように設定してみましょう。 okボタンをクリックしながら、ダイアログの上でボタンを離してください。

image7 {Qt Designer(on Windows)} {chap:05:exe08}

そうすると、シグナル/スロット接続を設定するウィンドウが出てくると思います。 図{chap:05:exe08}のように設定してみてください。

同様にCancelボタンをクリックしたらreject関数が発生するように設定してみましょう。

image8 {Qt Designer(on Windows)} {chap:05:exe09}

図{chap:05:exe09}のようになったでしょうか。 設定できたら、プレビューを押して動作を確認してみましょう。 OkまたはCancelボタンを押すとダイアログが終了すると思います。

では、他にもlineEditが編集されたらlabelにlineEditの内容が表示されるようにしてみましょう。 lineEditからlabelに赤い矢印を持っていき、lineEditのtextChanged(QString)関数をシグナル、 labelのsetText(QString)をスロットとしてみましょう。

また、lineEditのtextChanged(QString)をシグナルとしてダイアログのsetWindowTitle(QString)をスロット としてみましょう。すべての関数を表示したい場合はすべてのシグナルとスロットを表示にチェックを入れてください。

image9 {Qt Designer(on Windows)} {chap:05:exe10}

図{chap:05:exe10}のようになったでしょうか。 プレビューで実行し、lineEditの中身を編集するとlabelとダイアログのタイトルにlineEditと同じ内容が 表示されれば成功です。