ウィジェットベースの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: 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 リソースエディタを使用して作成および管理されます。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] を選択します。