UIコンポーネントの使用

手順：UIコンポーネントの使用

コンポーネントは、1つのファイル（ファイル拡張子はui.qml または.qml ）内で指定されます。たとえば、ButtonコンポーネントはButton.ui.qml で定義されます。通常、コンポーネントの外観はUIファイル（ui.qml ）で定義されます。コンポーネントファイルを作成するには、ウィザードテンプレートを使用するか、コンポーネントインスタンスを個別のコンポーネントファイルに移動します。

「Component 」ビューには、利用可能なコンポーネントが一覧表示されます。

Components には、プロジェクトにインポートしたQtモジュールからのQmlタイプが表示されます。これらのモジュールには、基本的な図形やUIコントロールなどの視覚的コンポーネントが含まれており、プロジェクトに機能を追加します。

UI コントロールには、macOS、Windows、Android、iOS などの特定のオペレーティングシステムのような外観や操作感を適用することができます。

一部のモジュールには、目に見えるコンポーネントが含まれていません。たとえば、「Qt.Multimedia 」モジュールは、UI へのオーディオおよびビデオファイルのサポートを追加します。

独自のコンポーネントの作成に関する詳細については、「カスタムコンポーネントの作成」を参照してください。

コンポーネント ID

各コンポーネントおよびコンポーネントの各インスタンスには、それを一意に識別し、他のコンポーネントのプロパティをそれにバインドできるようにするIDがあります。ID は一意である必要があり、小文字またはアンダースコアで始まり、文字、数字、およびアンダースコアのみを含めることができます。

詳細については、「id 属性」を参照してください。

コンポーネントの効率的な使用

コンポーネントにはパフォーマンス上のコストが伴います。コンポーネントを効率的かつ経済的に使用するには、以下の点に注意してください。

• リソースを、UIのニーズに合わせて手軽に再組み合わせできる再利用可能なコンポーネントにパッケージ化し、デザインをコンポーネント化してください。
• 必要な最小限のコンポーネントのみを使用してください。コンポーネントの数を最小限に抑えるには、エイリアスプロパティや 状態（state）を使用して、コンポーネントインスタンス間の差異を表現してください。コンポーネントを複製するのではなく再利用することを推奨します。そうすることで、コンポーネントが完全に新しいコンポーネントタイプとして処理される必要がなくなります。これにより、読み込み時間やコンパイル時間が短縮されるほか、バイナリのサイズも削減されます。
• データ駆動型のコンテンツは、関連するコンポーネントのパブリックプロパティ（エイリアスプロパティ）としてエクスポートする必要があります。たとえば、スピードメーターには、UIがバインドされる速度を表すint またはreal プロパティが必要です。
• UIとアプリケーションロジックを分離してください。デザイナーはUIファイル（.ui.qml ）を、開発者は対応する実装ファイル（.qml ）をそれぞれ担当し、プログラムによる動作やJavaScriptを定義する必要があります。これにより、デザイン側と開発側の双方から反復作業を行うことが可能になり、互いの作業を上書きしてしまうリスクを回避できます。