ボタンを作成する

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

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

   注: ファイル名が大文字で始まる場合のみ、コンポーネントが 「Components 」>「My Components 」に一覧表示されます。

2. 「Design 」を選択して、「2D 」ビューでファイルを編集します。
3. Navigator で、Item を選択し、Properties でボタンの幅 (W) と高さ (H) を設定します。
4. 「Components 」>「Default Components 」>「Basic 」から「Rectangle 」を、「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 コンポーネントを使用します。詳細については、「スケーラブルなボタンとボーダーの作成」を参照してください。