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を定義する必要があります。これにより、デザイン側と開発側の双方が、互いの作業を上書きするリスクなしに反復作業を行うことが可能になります。