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

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

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

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

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

ボタンコンポーネントの作成

ボタンコンポーネントを作成するには、File >New File > を選択します。 Qt Quick Files> Qt Quick UI File>

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

ボタン・コンポーネントの作成

ボタンコンポーネントを構築するには

1. 2D ビューで UI ファイルを編集するには、Design を選択します。
2. Assets > を選択して、使用する画像ファイルをプロジェクトフォルダにコピーします。
3. Navigator で、ルートコンポーネントを選択し、Properties ビューでボタンの幅 (W) と高さ (H) を、使用する予定の画像のサイズに合わせて設定します。これで、ボタン・コンポーネントの初期サイズが指定されます。
4. Components >Default Components >Basic からNavigator のルート・コンポーネントにBorder Image コンポーネントを2つドラッグします。
5. Text コンポーネントをルート・コンポーネントにドラッグします。
6. Navigator でルートコンポーネントを選択し、コンテキストメニューからAdd Mouse Area を選択してマウスエリアを追加します。
7. ボーダー画像を選択して、そのプロパティの値を編集します：
   1. Id フィールドに、ボーダー画像の ID を入力します。この例では、IDinactiveButtonを使います。
   2. Source フィールドで、ボーダー画像の画像ファイルを選択します。例えば、inactive_button.png 。
   3. Layout タブで、 (Fill to Parent) ボタンを選択して、画像を常に親と同じサイズにします。これにより、画像サイズがコンポーネント・サイズにバインドされるため、ボタン・コンポーネントがスケーラブルになります。
8. もう1つのボーダー画像を選択して、そのプロパティの値を同様に編集します：
   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 で text コンポーネントを選択し、ボタンが押し下げられたときにテキスト・サイズが拡大されるように指定する。
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 を割り当てたり、外観を変更したり、各ボタン・インスタンスにボタン・テキストを設定したりすることができます。

画面上のボタンの位置については、Make layouts scalableを参照してください。