Qt Designer @ Qt - Linux Life

はじめに

Qt Designer を使用して UI のデザインをしてみましょう。

起動

$ designer &

snapshot 01

フォームの作成

ファイル(F) > 新しいフォーム(N)... をクリック

snapshot 02

Widget を選択し、作成(R) をクリック

snapshot 03

ボタンの追加

ウィジェットボックス にある PushButton を Form 上にドラッグ

snapshot 04

snapshot 05

ボタンのキャプションの変更

ボタンをダブルクリックすると変更ができます。

snapshot 06

snapshot 07

レイアウトの適用

フォームに対してレイアウトを設定します。 フォームをクリックし、フォーカスを移動します。

snapshot 08

ツールバーの 水平に並べる(H) ボタンをクリックします。

snapshot 09

snapshot 10

シグナルの接続

ボタンが押された際に、フォームが閉じるようにします。

ツールバーの シグナル/スロットを編集 をクリック

snapshot 11

ボタンからフォームへドラッグ

snapshot 12

シグナル/スロットの接続ダイアログが表示されます。

snapshot 13

全てのシグナルとスロットを表示 にチェック

snapshot 14

pushButton の clicked() シグナルを選択

snapshot 15

Form の close() スロットを選択

snapshot 16

OK ボタンで閉じると接続が表示されます。

snapshot 17

ツールバーの ウィジェットの編集 をクリックしデザインモードに戻ります。

snapshot 18

プレビューの確認

フォーム(O) > プレビュー(P) をクリック

snapshot 19

snapshot 20

Close ボタンを押すとなんとフォームが閉じ、プレビューが終了します。

サイズの変更

適当なサイズに変更しました。

snapshot 21

保存

form.ui という名前でファイルを保存します。

ソースの作成

Qt Designer ではソースコードの作成、編集はできないため、別にソースコードを書きます。

main.cpp

 1#include <QApplication>
 2#include "ui_form.h"
 3
 4int main( int argc, char** argv )
 5{
 6    QApplication app( argc, argv );
 7
 8    QWidget widget;
 9    Ui::Form ui;
10    ui.setupUi( &widget );
11    widget.show();
12
13    return app.exec();
14}

解説

2行目
form.ui を使用する場合、インクルードするヘッダ名は "ui_form.h" となります。
ui_form.h は make 時に $QTDIR/bin/uic というプログラムにより作成されます。
9行目,10行目
Designer で作成した UI のインスタンスを作成し、 QWidget のインスタンスに対してセットアップします。
詳しい処理は ui_form.h を参考にしてください。

実行

$ qmake -project
$ qmake
$ make
$ ./designer

Designer snapshot

"Close" ボタンをクリックするとアプリケーションが終了します。

スポンサードリンク

Copyright - ©2003- tasuku All Rights Reserved