Qt Designer @ Qt - Linux Life

はじめに

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

起動

$ designer &

フォームの作成

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

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

ボタンの追加

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

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

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

レイアウトの適用

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

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

シグナルの接続

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

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

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

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

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

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

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

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

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

プレビューの確認

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

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

サイズの変更

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

保存

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

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

スポンサードリンク

Copyright © 2025 Linux-Life.net