ボタンの作成

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

1. File >New File > を選択する。 Qt Quick Files> Qt Quick UI File>Choose を選択して、Button.ui.qml というUI ファイルを作成します（例）。

   注： ファイル名が大文字で始まる場合のみ、コンポーネントはComponents >My Components にリストされます。

2. 2D ビューでファイルを編集するには、Design を選択します。
3. Navigator で、Item を選択し、Properties でボタンの幅 (W) と高さ (H) を設定します。
4. Rectangle をComponents >Default Components >Basic からNavigator のコンポーネントにドラッグします。これにより、ItemがRectangleの親となるネストされたコンポーネントが作成されます。コンポーネントは親に対して相対的に配置されます。
5. Properties ビューで、長方形の外観を変更します：
   • Color フィールドで、ボタンの色を選択します。
   • Radius フィールドで、ボタンの角が丸くなるように長方形の半径を設定します。
   • Layout を選択し、 (Fill to Parent) ボタンを選択して、矩形をアイテムに固定します。
6. Navigator の Item にText コンポーネントをドラッグします。
7. Properties ビューで、Text コンポーネントのプロパティを編集します：
   • Text フィールドにButton と入力する。

     Text color フィールドでテキストの色を、Font セクションでフォント、サイズ、スタイルを選択できます。

   • Alignment フィールドで、中央のボタンを選択して、テキストをボタンの中央に揃えます。
   • Layout >Fill to Parent を選択すると、テキストがボタン領域全体に固定されます。
8. Ctrl+Sを選択してボタンを保存します。

   

便利なように、ボタンコンポーネントはプロジェクトで作成する必要があります。プロジェクト内の他のファイルを操作して、UI用のスクリーンや他のコンポーネントを作成すると、Components >My Components にボタンコンポーネントが表示されます。これを使用してボタン・インスタンスを作成し、そのプロパティを変更することで、便利なIDを割り当てたり、外観を変更したり、各ボタン・インスタンスにボタン・テキストを設定したりすることができます。

ベクターグラフィックスを使わずに美しく拡大縮小するグラフィカルなボタンを作成するには、BorderImage コンポーネントを使用します。詳しくは、スケーラブルなボタンとボーダーを作成するをご覧ください。