When lay out your Qt GUIs is quite tricky task to place every widget in right position on your forms.Qt デザイナーで、全てのGUIをフォーム上の正しい位置に配置します。 幸いなことに、Qt はウィジェットの位置決めのプロセスを単純化するレイアウトマネージャのセットを提供しており、どんな種類のレイアウトでも簡単に作成できるようになります。 フォームにウィジェットをレイアウトするには、すべてをコードで作成することもできますし、Qt Designerを使ってレイアウトを作成することもできます。 このチュートリアルでは、Qt のレイアウトを Qt デザイナーで使用して、アプリケーションの複雑な GUI を構築する方法を学びます。
さらに、知識を強化するために、まとまったレイアウトのいくつかのウィジェットを使用してダイアログの例を作り、実際のアプリケーションで作るように、すべてをまとめて完全に機能するダイアログにまとめます。
Using Layouts With Qt Designer
Qt Designer は、デスクトップアプリケーション用のグラフィカルユーザーインターフェイス (GUI) を設計および作成するための Qt ツールです。 Qt デザイナーを使用すると、ウィンドウ、ダイアログ、およびフォームを作成することができます。
Qt Designer のメイン インターフェイスは次のようになります –
Qt Designer – Main Interface
Qt Designer には、空のフォームにウィジェットをドラッグして任意の種類の GUI を作成できる明確でユーザー フレンドリーなインターフェイスがあります。 フォームにすべてのウィジェットを配置した後、それらを首尾一貫したレイアウトで配置する必要があります。 これにより、フォームがプレビューされるとき、またはアプリケーションで使用されるときに、すべてのウィジェットが適切に表示され、サイズが変更されるようになります。
Qt のレイアウトマネージャーは、利用できるスペースを有効に活用するために、子ウィジェットを自動的に配置する構造化されたコンテナーです。 レイアウト マネージャー内にウィジェットを配置すると、定義されたルールに従って自動的にレイアウトされます。 Qt Designerの最も便利な機能の1つは、レイアウトマネージャの階層をドラッグ＆ドロップして、ウィジェットをクリーンで機能的なインターフェイスに配置する機能です。
Qt デザイナーでは、既存のウィジェットのグループにレイアウトを適用して、レイアウト オブジェクトを作成できます。 レイアウトをフォームにドラッグし、次にウィジェットをレイアウトにドラッグすることは可能ですが、これは少し手こずるかもしれません。 代わりに、必要なすべてのウィジェットやスペーサーをフォームにドラッグし、関連するウィジェットやスペーサーを選択して、それらにレイアウトを適用するのがベスト・プラクティスです。
- ウィジェットをフォームにドラッグ アンド ドロップし、希望の位置付近に配置する
- 特定のレイアウトで管理するウィジェットを選択し、
Ctrlキーを押しながらクリックする - 適切なレイアウト (horizontal, vertical, grid, or form) を Qt Designer ツールバー、メインメニューで適用するQtDesigner.index.txt>を使用する。 またはフォームのコンテキストメニュー
サンプルに入る前に。
- Use layout options on the main toolbar
- Use layout options on the main menu
- Use layout options on the form’s context menu
Qt Designer のレイアウト作成で最もわかりやすい方法は、メインツールバーのレイアウトセクションを使ってレイアウトを作成することです。 このセクションは次のようになります。 –
Qt Designer – Layout toolbar
左から右へ、次のボタンがあります。 –
- Lay Out Horizontally 選択したウィジェットを隣り合った水平レイアウトに配置します（キーコンビネーション、
Ctrl+1）。 このオプションは標準のQHBoxLayoutオブジェクト - Lay Out Vertically 選択されたウィジェットを縦に並べて、1つずつ下に配置します（キーの組み合わせ、
Ctrl+2）。 このオプションは、標準のQVBoxLayoutオブジェクト - Lay Out Horizontally in Splitterを使用して、ウィジェットを水平に配置します (キーの組み合わせ,
Ctrl+3) - Lay Out Vertically in Splitterは、スプリッタを使用してウィジェットを垂直に配置します (キーの組み合わせ、
Ctrl+4) - グリッドでレイアウトはテーブル風のグリッド（行と列）に沿ってウィジェットを配置します。 デフォルトでは、各ウィジェットはグリッドの1つのセルを占有しますが、この動作を変更して、ウィジェットが複数のセルにまたがるようにすることができます(Key combination,
Ctrl+5)。 このオプションは、標準のQGridLayoutオブジェクト - Lay Out in a Form Layoutを使用して、選択したウィジェットを2列のレイアウトに配置します。 左側の列は通常、何らかの情報を求めるラベルで、右側の列にはその情報を入力、編集、または表示するウィジェットが含まれます（キーの組み合わせ、
Ctrl+6） - Break Layoutこのキーにより、既存のレイアウトにブレーキをかけることができます。 一度レイアウトに配置されたウィジェットは、レイアウトによって形状が制御されるため、個別に移動したりサイズを変更したりすることはできません。 個々のウィジェットを変更するには、レイアウトを解除して後でやり直す必要があります (キーの組み合わせ
Ctrl+0) - Adjust Size 含まれるウィジェットを収容するためにレイアウトのサイズを調整し、それぞれが表示されるのに十分なスペースを確保します (キーの組み合わせ
Ctrl+J)
を使用します。
これらの同じレイアウト関連のオプションは、Qt Designer のメインメニュー Formとフォームのコンテキストメニューから利用することも可能です。 ので、お好きな方をお選びください。
さて、理論を理解したところで、これらのレイアウトを実践してみましょう。 次のいくつかのセクションでは、Qt デザイナーを使用して、フォーム上のウィジェットをレイアウトし、デスクトップアプリケーション用の美しくエレガントな GUI を構築していきます。 しかし、Qt が提供するさまざまなレイアウトマネージャーを試す前に、まず、このチュートリアルを進めていく中でレイアウトを視覚化するためのカスタムウィジェットを作成するつもりです。
layout-labels.ui
先に進み、Qt デザイナーを起動し、次のステップを実行します。
layout-labels.uiとして保存します。Widget Boxでラベルウィジェットを探し、フォームにドラッグします。Property Editorでtextプロパティを0に設定します。Text Editダイアログを開いてテキスト色を白に設定します。 フォントサイズを20ポイントに設定し、テキストを両端揃えにします。 OK を押して変更を適用します。Property Editorに移動し、autoFillBackgroundプロパティをチェックボックスで選択してTrueに設定します。paletteプロパティを調べてEdit Paletteダイアログを開いてください。 Quick オプションを使用して、色を赤に設定します。迷ったら、次のスクリーンキャストを参照して、実際の手順を確認してください。
この例を完成させるには、すべての手順を繰り返して、それぞれのテキストを 1、2、3 に設定し、色を緑、黄、青に設定した 3 つのラベルを追加します。 このようなフォームが完成します。
Qt Designer – Form with colored labels
上のスクリーンショットは、次のセクションで使用する初期フォームを示します。 これは、4 つのラベル オブジェクトが配置されたクリーンなフォームです。
水平レイアウト、QHBoxLayout
水平レイアウトマネージャ (QHBoxLayout) を使用して、ウィジェットを一列に並べることができます。 この種のレイアウトをコードで作成するには、QHBoxLayout クラスをインスタンス化してから、レイアウト オブジェクトにウィジェットを追加する必要があります。
layout-labels.ui ファイルを開いた状態で、まずすべてのラベルを選択します。 これを行うには、Ctrlキーを押しながら各ウィジェットを順番にクリックするか、フォーム内でマウスポインターをクリック＆ドラッグしてウィジェットを選択することも可能です。
一旦ウィジェットを選択したら、Qt デザイナーのメインツールバーの Lay Out Horizontally ボタンを選択して、それらを水平レイアウトに配置します。 また、下に表示されるコンテキストメニューからLay out->Lay Out Horizontallyオプションを使用するか、Ctrl+1を押すこともできます。 次のスクリーンキャストは、これらのステップをガイドします –
レイアウトが誤っている場合、すべてを簡単に取り消してレイアウトをやり直すことができます。 元に戻すには、Ctrl+zを押すか、Qt Designer のメインメニューバーからEditメニューを使用することができます。 それができない、あるいはうまくいかない場合は、Qt DesignerのメインツールバーのBreak Layoutボタンを使ってレイアウトを解除することができます。
垂直レイアウト、QVBoxLayout
垂直レイアウト (QVBoxLayout) を使用して、ウィジェットを1列の上に1つずつ配置することができます。
元の layout-labels.ui ファイルで開始すると、最初のステップは、垂直方向のレイアウトに含める必要があるウィジェットを選択することです。 その後、メイン ツールバーの Lay Out Vertically ボタンをクリックするか、コンテキスト メニューを使用するか、または Ctrl+2 を押すことができます。 次のスクリーンキャストは、これらの手順を説明するものです。
スクリーンキャストをよく見ると、レイアウト オブジェクトがフォーム上のラベルを囲む薄い赤いフレームで示されていることがわかります。 この赤い枠は、プレビューや実行時には表示されず、フォームを設計するときに使用できるガイドにすぎません。
グリッドレイアウト、QGridLayout
時には、同じレイアウト内で水平と垂直の両方でウィジェットをレイアウトする必要があります。 これを行うには、グリッド レイアウト マネージャ (QGridLayout) を使用します。 グリッドレイアウトマネージャは、ウィジェットを正方形または長方形のグリッドにレイアウトし、すべてのウィジェットが垂直方向と水平方向に隣接するように整列させます。 このようなレイアウトは、ある程度の構造を維持しながらも、フォーム上のウィジェットの配置をより自由にすることができます。 この配置は、特に、隣接する行または列の配置を気にする場合、水平および垂直のレイアウトの入れ子配置よりも適しています。
他のレイアウトと同じ方法で、Qt Designer でグリッド レイアウトを構築できます。 最初のステップは、グリッド・レイアウト・マネージャを使用してレイアウトしたいウィジェットのグループを選択することです。 その後、ツールバー、コンテキストメニュー、または Ctrl+5 を押してレイアウトを設定することができます。 次のスクリーンキャストをご覧ください。
このケースでは、2 x 2 のグリッド レイアウトを使用して、フォーム上のラベルを配置しています。 この種のレイアウトを使用するには、上記のスクリーンキャストに示すように、まずウィジェットをフォーム上の行と列に配置する必要があることに注意してください。 Qt Designer は非常に賢く、最初に手で作成したものとできるだけ同じようなデザインを維持しようとします。
フォームレイアウト、QFormLayout
QGridLayoutは入力とラベルが2列になっているフォームのレイアウトに使うことができますが、Qtはこの目的のために特に設計されたレイアウト（QFormLayout）も提供します。 このタイプのレイアウトは、構造化されたデータ入力やデータベースアプリケーションを作成するときに理想的です。 左の列は、一般的に、いくつかの情報を求めるラベルを保持します。 右の列は、行編集 (QLineEdit)、スピン ボックス (QSpinBox)、日付編集 (QDateEdit)、コンボ ボックス (QComboBox) などの入力ウィジェットを保持します。
QGridLayout よりこのレイアウトを使う利点は、2 列しか必要ないときに作業が簡単になることです。 次のスクリーンキャストはそれを実際に示している –
この例では、まず、4 つの新しいラベルを追加します。 これらのラベルは、2 列目に入力または編集する必要があるデータに関する情報を保持します。 この場合、2 列目はテスト用のカラー ラベルを保持しますが、通常、この列は行編集、スピン ボックス、コンボ ボックスなどの入力ウィジェットを配置するために使用します。
スプリッタ レイアウト
スプリッタは、サイズ変更可能な 2 つのパネルでウィジェットを水平または垂直に配置するコンテナ オブジェクトです。 この種のレイアウトを使用すると、使用される総スペースを一定に保ちながら、フォーム上で各パネルが占有するスペースの量を自由に調整することができます。 Qt では、スプリッタレイアウトは QSplitter を使って管理されます。
スプリッターは技術的にはコンテナウィジェット（レイアウトではない）ですが、Qt デザイナーはそれらを既存のウィジェットに適用できるレイアウトとして扱います。 ウィジェットのグループをスプリッターに配置するには、最初にそれらを通常通り選択し、次に Qt Designer の適切なツールバーボタン、キーボードショートカット、またはコンテキストメニューオプションを使用してスプリッターを適用してください。 分割の動作を確認するには、フォーム プレビューを起動する必要があることに注意してください。 Ctrl+Rを押すと、フォームプレビューを起動できます。 その後、ラベルに垂直方向のスプリッターを適用します。
Qt Designer で他のレイアウトを構築する
Qt Designer のレイアウトでできることは、他にもいくつかあります。 たとえば、既存のレイアウトに新しいウィジェットを追加したり、ネストされたレイアウトを使用して複雑な GUI でウィジェットを配置したりする必要があるとします。 以下のいくつかのセクションでは、これらのタスクのいくつかを達成する方法を説明します。
既存のレイアウトにオブジェクトを挿入する
オブジェクトは、現在の位置からドラッグして、レイアウト内の必要な位置にドロップすると、既存のレイアウトに挿入することができます。 オブジェクトがレイアウト上にドラッグされると、青いカーソルが表示され、オブジェクトが配置される場所が示されます。
次のスクリーンキャストでは、3 つのラベルを垂直レイアウトに配置していますが、青いラベルをゲームから除外していることに気づきました。 これを行うには、ウィジェットをレイアウト内の新しい位置にドラッグ アンド ドロップするだけです。
Nesting Layouts to Build Complex GUIs
Qt Designer を使用して、レイアウトマネージャーを別のものの中に入れ子にすることもできます。 内側のレイアウトは、その後、包含するレイアウトの子になります。 これを行うことにより、非常に複雑でありながらよく構造化されたユーザー インターフェイスを繰り返し作成することができます。 例えば、下部に水平に並んだボタンと、フォーム上に垂直に並んだ他のウィジェットを持つダイアログを作成するには、ボタンに水平レイアウトを、残りのウィジェットに垂直レイアウトを使用し、これらのレイアウトを垂直レイアウトで包みます。
色つきラベルの例に戻ると、次のスクリーンキャストは、Qt Designer でネストされたレイアウトを配置するプロセスを示しています。 次に、これらのレイアウトの両方を 3 番目のレイアウトに入れ子にして、今度は垂直のレイアウトにします。
子レイアウトを選択するとき、Shift キーを押しながらクリックすると、その親レイアウトを選択することができます。
Setting a Top Level or Main Layout
フォームを構築するときに行う必要のある最後のステップは、すべてのレイアウトとウィジェットを 1 つのメイン レイアウトまたはトップ レベル レイアウトに結合することです。 このレイアウトは、他のすべてのレイアウトとウィジェットの階層の最上位に位置します。
メイン レイアウトを設定するには、フォーム上のウィジェットまたはレイアウトを含まない任意の場所を右クリックします。 次に、Lay Out Horizontally を選択するか、次のスクリーンキャストのように Lay Out in a Grid を選択することもできます –
この例では、トップレベルのレイアウトとして 3 つの異なるレイアウトをそれぞれ順番に使用します。 まず水平レイアウトを使用し、次にレイアウトを崩して垂直レイアウトを使用します。 最後にグリッド レイアウトを設定します。 どのトップレベル レイアウトを選択するかは、アプリの特定の要件に依存します。
トップレベル レイアウトは、オブジェクト インスペクターで別のオブジェクトとして表示されないことに注意することが重要です。 そのプロパティは、メイン フォームのウィジェット プロパティの下に表示されます。 また、フォームにレイアウトがない場合、そのアイコンはオブジェクトインスペクタに赤い丸で表示されることにも注意してください。 メインレイアウトが適切に設定されているかどうかを確認する別の方法は、フォームのサイズを変更してみることです。
より複雑なアプリケーションを構築するようになると、たとえば QGroupBox、QTabWidget、QToolBox などの他のコンテナ ウィジェットもトップレベルのレイアウトを設定しなければならないことに気づくでしょう。 これを行うには、ここで見たのと同じ手順を実行できますが、今回はコンテナウィジェットを右クリックする必要があります。
Laying Out a Dialog With Qt Designer
Qt デザイナーでのレイアウトの使用方法の最後の、より完全な例として、今度はデータベースアプリケーションのいくつかの情報を紹介するダイアログを作成します。 例えば、ポイコテ社の人事管理ソフトを作成しているとします。 現在、従業員に関するいくつかのデータを紹介するためのフォームを作成しています。 ダイアログは、次のデータを導入するためのユーザーフレンドリーなGUIをユーザーに提示する必要があります：
- 従業員名
- 入社日
- 部署
- 役職
- 年収
- 仕事内容
このフォームをレイアウトする最善の方法はなんでしょう？ 多くの選択肢があり、好みと慣れの問題が大きいです。 しかしここでは、QFormLayoutを使って入力フィールドを2列に並べ、左側にラベル、右側に入力ボックスを置いています。
Qt デザイナーの Dialog with Buttons Bottom テンプレートを使用して、ベースとなるダイアログを作成します。 次に、いくつかのラベルと、行編集、日付編集、テキスト編集、およびコンボボックスを含むいくつかの入力ウィジェットを追加します。 次に、これらすべてのウィジェットをフォーム レイアウトに配置し、最後にフォームのトップレベルまたはメイン レイアウトを定義します。
完成したダイアログ .ui ファイルは、ここからダウンロードできます。 その最もわかりやすく便利な機能の 1 つは、ウィジェットをさまざまな種類のレイアウトに配置する機能です。 Qt デザイナーで効果的にレイアウトを作成する方法を学ぶことは、特に複雑な GUI を作成する際に、生産性を急上昇させます。
このチュートリアルでは、Qt デザイナーでカスタムレイアウトを作成するプロセスをガイドしました。 GUI をレイアウトする際に、Qt Designer を最大限に活用する方法を知っていただきました。