『xml-ph-0000@deepl.internal』のクイックスタートQt Widgets Designer

Qt Widgets Designer のクイックスタートには、4つの基本的な手順があります：

1. フォームとオブジェクトを選択する
2. フォーム上にオブジェクトを配置する
3. 信号をスロットに接続する
4. フォームをプレビューする

赤（Red）、緑（Green）、青（Blue）のRGB値を操作するために必要なコントロールを備えた小さなウィジェット（上のスクリーンショットを参照）を設計したいと仮定しましょう。これは、画像編集プログラムの至る所で見られるタイプのウィジェットです。

フォームの選択 まず、「新しいフォーム」ダイアログから「ウィジェット」を選択します。

フォームへのウィジェットの配置 3つのラベル、3つのスピンボックス、3つの縦型スライダーをフォーム上にドラッグして配置します。ラベルのデフォルトのテキストを変更するには、ラベルをダブルクリックするだけです。配置は、希望するレイアウトに合わせて自由に調整できます。

プログラム上でこれらを正確にこの配置通りに配置するには、これらのウィジェットをレイアウトに配置する必要があります。ここでは3つずつグループにして配置します。「RED」というラベルを選択します。次に、Ctrlキーを押したまま、対応するスピンボックスとスライダーを選択します。「フォーム」メニューから「グリッドにレイアウト」を選択します。

残りの2つのラベルについても、それぞれ対応するスピンボックスやスライダーとともに、この手順を繰り返します。

次のステップは、3つのレイアウトすべてを1つのメインレイアウトに統合することです。メインレイアウトとは、最上位ウィジェット（この場合はQWidget ）のレイアウトのことです。最上位ウィジェットにレイアウトを設定しておくことが重要です。そうしないと、ウィンドウのサイズを変更しても、ウィンドウ上のウィジェットのサイズが変更されません。 レイアウトを設定するには、3つの個別のレイアウトの外側にあるフォーム上の任意の場所を右クリックし、「水平に配置」を選択します。あるいは、「グリッドに配置」を選択することもできます。どちらの場合でも、同じ配置になります（下図参照）。

スライダーをクリックして特定の値までドラッグすると、スピンボックスにスライダーの位置が表示されるようにしたい場合、この動作を実現するには、スライダーのvalueChanged() シグナルをスピンボックスのsetValue() スロットに接続する必要があります。 また、逆方向の接続も行う必要があります。例えば、スピンボックスのvalueChanged()シグナルをスライダーのsetValue()スロットに接続します。

これを行うには、F4キーを押すか、[編集]メニューから[シグナル/スロットの編集]を選択して、[シグナル/スロットの編集]モードに切り替える必要があります。

シグナルとスロットの接続 スライダーをクリックし、カーソルをスピンボックスの方へドラッグします。下図に示す「接続の設定」ダイアログが表示されます。適切なシグナルとスロットを選択し、「OK」をクリックしてください。

この手順を（逆の順序で）繰り返します。スピンボックスをクリックし、カーソルをスライダーの方へドラッグして、スピンボックスの「valueChanged()」シグナルをスライダーの「setValue()」スロットに接続します。

正しいシグナルとスロットを選択する際は、以下のスクリーンショットを参考にしてください。

RGB コントローラの「RED」コンポーネントのオブジェクトの接続が完了しましたので、「GREEN」および「BLUE」コンポーネントについても同様に接続を行ってください。

RGB 値は 0 から 255 の範囲であるため、スピンボックスとスライダーをその特定の範囲に制限する必要があります。

ウィジェットのプロパティの設定 最初のスピンボックスをクリックします。プロパティエディタ内に、QSpinBox のプロパティが表示されます。「maximum 」プロパティに「255」と入力します。次に、最初の縦型スライダーをクリックすると、QAbstractSlider のプロパティが表示されます。「maximum 」プロパティにも「255」と入力します。残りのスピンボックスとスライダーについても、この手順を繰り返します。

それでは、フォームをプレビューして、アプリケーション上でどのように表示されるかを確認しましょう。Ctrl + Rキーを押すか、[Form] メニューから[Preview]を選択してください。 スライダーをドラッグしてみてください。スピンボックスの値もそれに連動して変化します（その逆も同様です）。また、サイズを変更して、子ウィジェットの管理に使用されているレイアウトが、ウィンドウサイズの変更にどのように対応するかを確認することもできます。