ウィジェットベースのUIの設計

手順：ウィジェットベースのUIの設計

Qt Creator を選択すると、すべての.ui ファイルが、統合されたQt Widgets DesignerでDesign モードで自動的に開きます。

Qt Widgets Designer がデザインモードで開かれている" src="images/qtcreator-formedit.png" title="Qt Widgets Designer がデザインモードで開かれている"/>

Qt Widgets Designerで作成されたウィジェットやフォームは、Qtのシグナルとスロットの仕組みを利用して、プログラムコードとシームレスに統合されます。これにより、グラフィカル要素に動作を簡単に割り当てることができます。Qt Widgets Designerで設定されたすべてのプロパティは、コード内で動的に変更可能です。さらに、ウィジェットの昇格やカスタムプラグインなどの機能により、Qt Widgets Designerで独自のウィジェットを使用することができます。

Qt Widgets Designerの詳細については、『Qt Widgets Designerマニュアル』を参照してください。

一般的に、統合されたQt Widgets Designerは、スタンドアロンのQt Widgets Designerと同じ機能を備えています。以下のセクションでは、その違いについて説明します。

組み込みのQt Widgets Designerを使用して、Qt Widgets をベースとした小規模なアプリケーションを作成する方法については、「Qt Academy：Qt Creator 入門」コースを受講してください。

コードエディタの統合

フォーム（Design モード）とコード（Edit モード）を切り替えるには、Shift+F4キーを押します。

Qt Creator を使用して、スロット関数のスタブ実装を作成できます。Design モードで、ウィジェットを右クリックしてコンテキストメニューを開き、「Go to Slot 」を選択します。リストからシグナルを選択すると、既存のスロット関数に移動するか、新しいスロット関数を作成できます。

画像リソースの管理

スタンドアロンのQt Widgets Designerでは、組み込みのResource Editor を使用して画像リソースを作成します。Qt Creator では、.ui ファイルは通常プロジェクトの一部であり、プロジェクトには複数のリソースファイルが含まれる場合があります（.qrc ）。これらは、Qt Creator リソースエディタを使用して作成および管理されます。Qt Widgets Designer（Resource Editor ）は無効化され、画像リソースはQt Widgets Designer（Resource Browser ）に表示されます。

コードエディタからリソースファイルを開くには、コンテキストメニューから「Follow Symbol Under Cursor 」を選択するか、文字列リテラルにカーソルを合わせた状態でF2キーを押します。

Qt Widgets Designer の設定を行う

Qt Widgets Designer 内のビューは、画面上の新しい位置にドラッグアンドドロップして配置できます。

Qt Widgets Designer の設定を行うには、[Preferences ] > [Designer] に移動します。

• Embedded Design などで、スタイル、フォント、画面解像度などを決定する組み込みデバイスプロファイルを指定します。
• Forms でのグリッドおよびフォームのプレビューに関する設定を指定します。
• Template Paths で、テンプレートを保存するための追加のフォルダを指定します。

設定をプレビューするには、Tools > 「Form Editor 」 > 「Preview 」を選択するか、Alt+Shift+R キーを押します。

デバイスプロファイルを使用したフォームのプレビュー

デバイスプロファイルとは、モバイルデバイスを記述する一連の設定ファイルのことです。これには、フォームを囲み、ボタン付きのモバイルデバイスを表す境界画像が含まれています。

デバイスプロファイルを使用してフォームをプレビューするには、[Tools ] > [Form Editor ] > [Preview In] の順に選択し、デバイスプロファイルを選択します。

デバイスプロファイルの追加

デバイスプロファイルを追加するには：

1. Preferences >Designer に移動します。

   

2. Embedded Design で、[ ] (Add a profile) を選択し、[Add Profile ] ダイアログを開きます。

   

3. Name で、デバイスの名前を入力します。この名前は、Preview In のオプションとして表示されます。
4. 「Family 」で、使用するフォントを選択します。
5. 「Point Size 」で、フォントサイズを選択します。
6. 「Style 」で、あらかじめ定義されたスタイルのいずれかを選択します。
7. Device DPI で、あらかじめ定義されたDPI値のいずれかを選択するか、User defined を選択してカスタム値を指定します。
8. 「OK 」を選択して、デバイスプロファイルをリストに追加します。

.qdp ファイルからデバイスプロファイルをインポートするには、[Open] を選択します。.qdp ファイルとして保存するには、[Save] を選択します。