カスタムコンポーネントの作成

プロジェクトウィザードのテンプレートを使用してカスタムコンポーネントやコントロールを作成するか、コンポーネントのインスタンスを別のファイルに移動して、インスタンスを作成できる新しいコンポーネントに変換することができます。その後、他のコンポーネント内でその新しいコンポーネントのインスタンスを使用できます。

カスタムコンポーネントは、Components >My Components に保存されます。カスタムコンポーネントのインスタンスを作成するには、Components から、2D またはNavigator ビューにドラッグします。

コンポーネントをゼロから作成する

ウィザードテンプレートを使用してカスタムコンポーネントを作成するには：

1. 「File 」 > 「New File 」 > Qt Quick Files > Qt Quick UI File > 「Choose 」を選択して、新しい「.ui.qml 」ファイルを作成します。

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

2. 「Design 」を選択すると、そのファイルが「2D 」ビューで開かれます。
3. 「Components 」から「Navigator 」または「2D 」ビューにコンポーネントをドラッグします。
4. Properties ビューでコンポーネントのプロパティを編集します。利用可能なプロパティはコンポーネントのタイプによって異なります。Connections ビューのProperties タブで、コンポーネントのプロパティを追加できます。
5. Qt Quick Designer でデフォルトではサポートされていない方法でコンポーネントインスタンスの外観や動作を変更するには、Connections ビューの [Properties ] タブでカスタムプロパティを定義できます。

以下のセクションでは、2D ビューを使用して2Dコンテンツを編集する方法の詳細と、基本コンポーネントのインスタンスを使用してUIコントロールを作成する方法の例について説明します。

• 2Dビュー
• ボタンの作成
• スケーラブルなボタンとボーダーの作成

命名規則

UI 内のコンポーネントを整理するために、命名規則を確立してください。コンポーネントには正確な名前を付け、適切な ID を割り当ててください。特に、デザインツールからエクスポートしたコンポーネントのデフォルト名を確認・修正し、確立した命名規則に従った、信頼性が高く、一目で意味がわかる名前を作成してください。

たとえば、ボタンのシンボルには「myButton_symbol」というIDを割り当て、各レイヤーにはこのIDを接頭辞として使用し、その後に状態名を付加することで、「myButton_symbol_default」のようなIDを作成できます。プロジェクトの後半でマウスホバー領域を追加する準備として、それらにも「myButton_symbol_hotspot」のような同様のIDを使用することができます。 画面内でそのボタンをインスタンスとして使用する際は、各インスタンスにその画面に関連付けられた一意のIDを割り当てます。例えば、「myButton_myMenu_home」、「myButton_myMenu_profile」、「myButton_myMenu_settings」といった具合です。

コンポーネントのインスタンスをカスタムコンポーネントに変換する

再利用可能なコンポーネントを作成する別の方法として、コンポーネントインスタンスを個別のコンポーネントファイル（.ui.qml ）に移動して、カスタムコンポーネントに変換する方法があります。「Navigator 」または「2D 」ビューでコンポーネントインスタンスを右クリックし、コンテキストメニューから「Create Component 」を選択します。

新しいコンポーネントに名前を付け、プロパティを新しいコンポーネントに設定するか、元のコンポーネントに設定するかを選択します。

「OK 」を選択すると、新しいコンポーネント ファイルが作成され、そのコンポーネントのインスタンスが現在のコンポーネント ファイルのコードに追加されます。2D ビューでの UI の表示は変わりません。

コンポーネントのすべてのインスタンスに対して変更したいプロパティを編集するために新しいコンポーネントファイルを開くには、コンポーネントを右クリックし、コンテキストメニューから [Go into Component ] を選択します。ベースコンポーネントを開くその他の方法については、「コンポーネント内での移動」を参照してください。

カスタムコンポーネントは、[Components ] > [My Components] に一覧表示され、それらのインスタンスを使用してさらにコンポーネントを構築できます。

テンプレートとのファイルのマージ

CSS スタイルシートを使用する場合と同様の方法で、既存の 2 つ目のコンポーネントファイルを使用して、現在のコンポーネントファイルをそのファイルとマージすることができます。

現在のファイルをテンプレートとマージするには、「Navigator 」または「2D 」ビューでコンポーネントを右クリックし、コンテキストメニューから「Merge with Template 」を選択します。

[Template ] フィールドで、テンプレートとして使用するファイルを選択します。