スケーラブルなボタンと枠線の作成

BorderImage コンポーネントを使用すると、PNGファイルなどの画像を枠線や背景として表示できます。

2つの枠線画像と適切なグラフィックを使用して、ボタンがクリックされたときの外観を変更できます。ステートを使用することで、マウスボタンが押されているかどうかに応じて、どの画像を表示するかを決定できます。さらに画像やステートを追加して、ホバーなどの他のマウスイベントに応じてボタンの外観を変更することも可能です。

Text コンポーネントを使用して、ボタンのテキストを追加します。また、ステートを使用して、ボタンのテキストの色やフォントサイズを変更することもできます。たとえば、ボタンのテキストを拡大または縮小することができます。

領域全体をカバーし、マウスイベントに反応する「Mouse Area」コンポーネントを追加します。

ボタンコンポーネントを作成する

ボタンコンポーネントを作成するには、[File ] > [New File ] > Qt Quick Files > Qt Quick UI File >

Choose を選択し、（例として）Button.ui.qml という名前のUI ファイルを作成します。

ボタンコンポーネントを作成する

ボタンコンポーネントを作成するには：

1. 「2D 」ビューで「Design 」を選択し、UI ファイルを編集します。
2. 「Assets 」>「 」を選択し、使用したい画像ファイルをプロジェクトフォルダにコピーします。
3. 「Navigator 」でルートコンポーネントを選択し、「Properties 」ビューでボタンの幅（W ）と高さ（H ）を、使用する予定の画像のサイズに合わせて設定します。これにより、ボタンコンポーネントの初期サイズが指定されます。
4. Components >Default Components >Basic からBorder Image コンポーネントを 2 つ、Navigator 内のルートコンポーネントにドラッグします。
5. Text コンポーネントをルートコンポーネントにドラッグします。
6. Navigator でルートコンポーネントを選択し、コンテキストメニューから「Add Mouse Area 」を選択して、マウスエリアを追加します。
7. 境界画像を選択し、そのプロパティの値を編集します。
   1. 「Id 」フィールドに、境界線の画像のIDを入力します。この例では、ID「inactiveButton」を使用します。
   2. 「Source 」フィールドで、境界線の画像ファイルを選択します。例：inactive_button.png 。
   3. 「Layout 」タブで、「 (Fill to Parent)」ボタンを選択すると、画像が常に親コンポーネントと同じサイズになります。これにより、画像サイズがコンポーネントのサイズに紐付けられるため、ボタンコンポーネントはスケーラブルになります。
8. もう一方の境界線画像を選択し、同様にプロパティの値を編集します。
   1. 「Id 」フィールドに「activeButton」と入力します。
   2. 「Source 」フィールドで、ボタンがクリックされた際の画像ファイルを選択します。例：active_button.png 。
   3. [Layout ]タブで、 (Fill to Parent) ボタンを選択します。
9. 「Properties 」でテキストコンポーネントを選択し、フォントサイズと色を指定します：
   1. 「Color 」フィールドで、カラーピッカーを使用してフォントの色を選択するか、フィールドに値を入力します。
   2. 「Font 」グループの「Size 」フィールドに、フォントサイズを入力します。
   3. [Layout ]タブで、[ ]（Vertical Center ）および[ ]（Horizontal Center ）ボタンを選択し、親コンポーネントから縦方向および横方向の中央揃えを継承します。これにより、コンポーネントのサイズが変更されても、ボタンのラベルが中央に配置されるようになります。

ステートを使用してコンポーネントのプロパティ値を変更する

1. 「States 」ビューで、「 」を2回選択し、2つの新しい状態を作成します。

   

2. 「State1 」を選択します。
3. 状態名を「active」に変更します。
4. 「 」を選択し、次に「Set when Condition 」を選択して、その状態をいつ適用するかを決定します。
5. 「Binding Editor 」で、「mouseArea 」コンポーネントと「pressed 」信号を選択し、マウスボタンが押されたときに状態が適用されるように指定します。

   

6. Navigator でテキストコンポーネントを選択し、ボタンが押されたときにテキストサイズが拡大されるように指定します。
7. Properties で、Advanced セクションを選択し、Scale プロパティの値を大きくします。
8. Navigator でinactiveButtonを選択し、Properties 内のVisibility プロパティの値を変更して、アクティブ状態では非表示になるようにします。
9. State2 を選択します。
10. 状態名を「inactive」に変更します。
11. 状態の when 条件を!mouseArea.pressed に設定し、マウスボタンが押されていないときにその状態が適用されるように指定します。

    

12. Ctrl+Sを選択してボタンを保存します。
13. 上部のツールバーにある「Live Preview 」ボタンを選択し、ボタンを選択したときの動作を確認します。プレビューウィンドウの境界線をドラッグして、コンポーネントのサイズを変更したときに何が起こるかを確認します。

ボタンコンポーネントを実際に使用するには、プロジェクト内で作成する必要があります。 プロジェクト内の他のファイルで作業して、UI 用の画面やその他のコンポーネントを作成すると、ボタンコンポーネントが [Components ] > [My Components] に表示されます。これを [2D ] または [Navigator ] ビューにドラッグしてボタンインスタンスを作成し、プロパティの値を編集して、例えば、各ボタンインスタンスに適切な ID を割り当てたり、外観を変更したり、ボタンテキストを設定したりすることができます。

画面上のボタンの配置に関する詳細については、「レイアウトのスケーラビリティを確保する」を参照してください。