トップ > Qt Creatorを使う > ユーザーインターフェイスのデザイン

ユーザーインターフェイスのデザイン

ここでは次のようなユーザーインターフェイスを作成します。

プロジェクトナビゲーターからtextfinder.uiというファイルをダブルクリックするとQtDesignerが立ち上がり、何も配置されていないフォームが表示されるので、そのフォームに次のWidgetをドラック＆ドロップで配置します。
* Label
* Line Edit
* Push Button

LabelをダブルクリックしてKeywordと入力します。同じく、Push ButtonもFindと入力します。
その後、ボタンを選択した状態でQtCreatorの右下にあるプロパティからobjectNameをfindButtonに変更しておきます。

Ctrl+Aで配置したWidgetをすべて選択して、ツールバーにある水平に並べるボタンを押すと、次のように配置したWidgetがきれいに横に配置されます。

次に、TextEditをドラック＆ドロップしてフォームに配置します。
今度はフォームを選択した状態で、ツールバーにある垂直に並べるボタンを押します。
すると、次のようにきれいに配置されます。


 

ユーザーインターフェイスとその実装クラスをマッピング

QtCreatorが生成したtextfinder.hは次のようになっていると思います。

cpp
namespace Ui {
class TextFinder;
}

class TextFinder : public QWidget
{
    Q_OBJECT

public:
    explicit TextFinder(QWidget *parent = 0);
    ~TextFinder();

private:
    Ui::TextFinder *ui;
};

このTextFinderクラスとユーザーインターフェイスをマッピングするため、フォームを選択してobjectNameプロパティをTextFinderに設定します。

ハンドラーの追加

最後にFindボタンが押された際のハンドラーを設定します。
ハンドラーはQtのスロットとシグナルの仕組みが使用されます。
Findボタンの右クリックメニューにスロットへ移動というのがありますので、これを選択します。

シグナルを選択で、clicked()を選択してOKボタンを押します。
これで次のようにTextFinderクラスにスロットが追加されているはずです。

cpp
namespace Ui {
class TextFinder;
}

class TextFinder : public QWidget
{
    Q_OBJECT

public:
    explicit TextFinder(QWidget *parent = 0);
    ~TextFinder();

private slots:
    void on_findButton_clicked();
    
private:
    Ui::TextFinder *ui;
};

次はTextFinderクラスの実装を行っていきます。

前へ 次へ

目次

はじめの一歩
Qt Creatorを使う