QMLの基礎 - QMLファイルのインクルード

概要

最も簡単な方法

MyText.qmlファイルにコンポーネントが記述されているとする。

MyText.qmlファイルがmain.qmlファイルと同階層にある場合、以下のように記述することにより、コンポーネントを直接読み込むことができる。
この時、読み込まれるQMLファイル名は、大文字で始まる必要がある。

 // MyText.qml
 
 Text {
    text:"Hello, Scooby Doo!";
 }

 // main.qml
 
 Rectangle {
    id: root
 
    MyText {
       text: "This is my custom text element"
    }
 }

MyText.qmlがMyComponentsサブディレクトリに存在する場合、例えば、サブディレクトリに存在する全てのカスタムコンポーネントをグループ化するためには、
まず、MyComponentsサブディレクトリをインポートする必要がある。

上記と同様に、読み込まれるQMLファイル名は、大文字で始まる必要がある。

 // main.qml
 
 import "MyComponents"
 
 Rectangle {
    id: root
 
    MyText {
       text: "This is my custom text element"
    }
 }

Loaderを使用する方法よりも、上記の方法が最も簡単である。

Loaderを使用する方法

例えば、以下のようなプロジェクトディレクトリの構造があるとする。

プロジェクトディレクトリ
↪  qmlディレクトリ
　  ↪  main.qml
　  ↪  mytext.qml

 // mytext.qml
 
 Text {
    text:"Hello, Scooby Doo!";
 }

この時、main.qmlファイルにおいて、以下のようにmytext.qmlファイルを読み込む必要がある。

 // main.qml
 
 Rectangle {
 
    // ...略
 
    Loader {
       source:"mytext.qml";
    }
 
    // ...略
 }