ウィジェットベースのUIをデザインする

どのようにウィジェットベースの UI をデザインする

Qt Creator は、統合されたQt Widgets Designer で、すべての.ui ファイルを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 アカデミーを受講してください：Getting Started withQt Creatorコースを受講してください。

コードエディタの統合

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

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

画像リソースの管理

スタンドアロンのQt Widgets Designer では、画像リソースは組み込みのResource Editor を使用して作成されます。Qt Creator では、.ui ファイルは通常プロジェクトの一部で、複数のリソースファイル（.qrc ）を持つことがあります。こ れ ら の作成お よ び管理は、Qt Creator Resource Editor を使用 し ます。Qt Widgets DesignerResource Editor は非アクティブ化され、イメージ・リソースはQt Widgets DesignerResource 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 を選択します。