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

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

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

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

ウィザード・テンプレートを使用してカスタム・コンポーネントを作成するには、次の手順に従います：

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

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

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

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

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

命名規則

UIのコンポーネントを整理しておくために、命名規則を確立しましょう。コンポーネントには正確な名前を付け、適切なIDを付けましょう。特に、デザイン・ツールからエクスポートしたコンポーネントのデフォルト名をチェックして修正し、確立した命名規則に従った、信頼性が高くわかりやすい名前を作成してください。

例えば、ボタンシンボルはmyButton_symbolというIDを持ち、異なるレイヤーはそれをプレフィックスとして、ステートを付加することで、myButton_symbol_defaultのようなIDを生成するかもしれません。プロジェクトの後半でマウスエリアを追加するために、myButton_symbol_hotspotのようなIDを使うこともできます。ボタンを画面内のインスタンスとして使用する場合は、これらのインスタンスのそれぞれに、その画面に関連する一意のIDを与えることになる。例えば、myButton_myMenu_home、myButton_myMenu_profile、myButton_myMenu_settingsです。

コンポーネント・インスタンスをカスタム・コンポーネントにする

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

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

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

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

カスタム コンポーネントは、Components >My Components にリストされており、それらのインスタンスを使用して、さらに多くのコンポーネントを構築することができます。

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

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

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

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