Loader QML Type

URLまたはコンポーネントからのサブツリーの動的ロードを許可します。詳細...

Import Statement: import QtQuick
Inherits:

Item

プロパティ

信号

方法

  • object setSource(url source, object properties)

詳細説明

Loader は、QML コンポーネントを動的にロードするために使用されます。

Loaderは、QMLファイル(source プロパティを使用)またはComponent オブジェクト(sourceComponent プロパティを使用)をロードすることができます。例えば、コンポーネントをオンデマンドで作成する場合や、パフォーマンス上の理由からコンポーネントを不必要に作成しない場合などです。

ここでは、MouseArea がクリックされたときに、コンポーネントとして "Page1.qml" をロードする Loader を示します:

import QtQuick

Item {
    width: 200; height: 200

    Loader { id: pageLoader }

    MouseArea {
        anchors.fill: parent
        onClicked: pageLoader.source = "Page1.qml"
    }
}

ロードされたオブジェクトは、item プロパティを使ってアクセスできます。

source またはsourceComponent が変更されると、以前にインスタンス化されたアイテムは破棄されます。source を空文字列に設定するか、sourceComponentundefined に設定すると、現在ロードされているオブジェクトが破棄され、リソースが解放され、Loader が空になります。

ローダーのサイズ設定動作

ビジュアル・タイプのロードに使用される場合、Loader は以下のサイジング・ルールを適用します:

  • Loader に明示的なサイズが指定されていない場合、コンポーネントがロードされると、Loader は自動的にロードされたアイテムのサイズにリサイズされます。
  • Loader に明示的なサイズが指定されていない場合、コンポーネントがロードされると、Loader は自動的にロードされたアイテムのサイズにリサイズされます。Loader のサイズが、width、height の設定またはアンカーリングによって明示的に指定されている場合、ロードされたアイテムは Loader のサイズにリサイズされます。

どちらのシナリオでも、アイテムとローダーのサイズは同じです。これにより、ローダーへのアンカーは、ロードされたアイテムへのアンカーと同等であることが保証されます。

sizeloader.qmlsizeitem.qml
import QtQuick

Item {
  width: 200; height: 200

  Loader {
    // Explicitly set the size of the
    // Loader to the parent item's size
    anchors.fill: parent
    sourceComponent: rect
  }

  Component {
    id: rect
    Rectangle {
      width: 50
      height: 50
      color: "red"
      }
  }
}
import QtQuick

Item {
  width: 200; height: 200

  Loader {
    // position the Loader in the center
    // of the parent
    anchors.centerIn: parent
    sourceComponent: rect
  }

  Component {
      id: rect
      Rectangle {
          width: 50
          height: 50
          color: "red"
      }
  }
}
赤い矩形は、ルートアイテムのサイズに合わせられます。赤い長方形は、ルートアイテムの中央に配置され、50x50になります。

ソースコンポーネントがItemタイプでない場合、Loaderは特別なサイズルールを適用しません。

ロードされたオブジェクトからのシグナルの受信

ロードされたオブジェクトから発せられるシグナルは、Connections タイプを使用して受信できます。例えば、次のapplication.qml は、MyItem.qml をロードし、Connections オブジェクトを通して、ロードされたアイテムからmessage シグナルを受け取ることができます:

application.qmlMyItem.qml
import QtQuick

Item {
    width: 100; height: 100

    Loader {
       id: myLoader
       source: "MyItem.qml"
    }

    Connections {
        target: myLoader.item
        function onMessage(msg) { console.log(msg) }
    }
}
import QtQuick

Rectangle {
   id: myItem
   signal message(string msg)

   width: 100; height: 100

   MouseArea {
       anchors.fill: parent
       onClicked: myItem.message("clicked!")
   }
}

また、MyItem.qml はローダーのスコープ内でロードされるため、ローダーまたはその親Item で定義された関数を直接呼び出すこともできます。

フォーカスとキーイベント

ローダーはフォーカススコープです。その子オブジェクトがアクティブフォーカスを得るには、focus プロパティがtrue に設定されていなければなりません。(詳細は、 Qt Quick の「 キーボード・フォーカス」を参照してください) ロードされたアイテムで受信したキーイベントも、ローダーに伝搬されないように、accepted に設定する必要があります。

例えば、次のapplication.qml は、MouseArea がクリックされると、KeyReader.qml をロードします。動的にロードされたオブジェクトのItem と同様に、Loader のfocus プロパティがtrue に設定されていることに注意してください:

application.qmlキーリーダー.qml
import QtQuick

Rectangle {
    width: 200; height: 200

    Loader {
        id: loader
        focus: true
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            loader.source = "KeyReader.qml"
        }
    }

    Keys.onPressed: (event)=> {
        console.log("Captured:",
                    event.text);
    }
}
import QtQuick

Item {
    Item {
        focus: true
        Keys.onPressed: (event)=> {
            console.log("KeyReader captured:",
                        event.text);
            event.accepted = true;
        }
    }
}

KeyReader.qml がロードされると、キー・イベントを受け入れ、event.acceptedtrue に設定します。これにより、イベントが親Rectangle に伝搬されなくなります。

QtQuick 2.0 以降、ローダーは非ビジュアル・コンポーネントをロードすることもできます。

ビューデリゲート内でのローダーの使用

デリゲートのロードパフォーマンスを向上させるために、ビューデリゲート内でローダーを使用したい場合があります。これはほとんどの場合うまくいきますが、コンポーネントのcreation context に関する注意すべき重要な問題があります。

次の例では、ListView によってdelegateComponent のコンテキストに挿入されたindex コンテキストプロパティは、Text からアクセスできなくなります。Loader は、myComponent の作成コンテキストをインスタンス化時の親コンテキストとして使用し、index は、そのコンテキストチェーン内の何も参照しないからです。

Item {
    width: 400
    height: 400

    Component {
        id: myComponent
        Text { text: index }    //fails
    }

    ListView {
        anchors.fill: parent
        model: 5
        delegate: Component {
            id: delegateComponent
            Loader {
                sourceComponent: myComponent
            }
        }
    }
}

このような場合、コンポーネントをインラインに移動するか、別のファイルに移動することができます、

        delegate: Component {
            Loader {
                sourceComponent: Component {
                    Text { text: index }    //okay
                }
            }
        }

別のファイルに移動させる、

        delegate: Component {
            Loader {
                source: "MyComponent.qml" //okay
            }
        }

または、ローダーのプロパティとして必要な情報を明示的に設定します(ローダーは自分自身をロードするコンポーネントのコンテキストオブジェクトとして設定するため、これは機能します)。

Item {
    width: 400
    height: 400

    Component {
        id: myComponent
        Text { text: modelIndex }    //okay
    }

    ListView {
        anchors.fill: parent
        model: 5
        delegate: Component {
            Loader {
                property int modelIndex: index
                sourceComponent: myComponent
            }
        }
    }
}

Dynamic Object Creationも参照してください

プロパティ ドキュメント

active : bool

このプロパティは、Loader が現在アクティブである場合にtrue になります。このプロパティのデフォルト値はtrue です。

Loader が非アクティブの場合、source またはsourceComponent を変更しても、Loader がアクティブになるまでアイテムはインスタンス化されません。

この値を非アクティブに設定すると、ローダーによってロードされたitem は解放されますが、sourcesourceComponent には影響しません。

非アクティブなローダーのstatus は、常にNull である。

source およびsourceComponentも参照のこと


asynchronous : bool

このプロパティは、コンポーネントが非同期にインスタンス化されるかどうかを保持します。デフォルトはfalse です。

source プロパティと併用すると、ロードとコンパイルもバックグラウンド・スレッドで実行されます。

非同期にロードすることで、コンポーネントによって宣言されたオブジェクトが複数のフレームにわたって作成され、アニメーションの不具合が発生する可能性が低くなります。非同期にロードする場合、ステータスはLoader.Loadingに変わります。コンポーネント全体が作成されると、item 、ステータスがLoader.Readyに変わります。

非同期ロードの進行中にこのプロパティの値をfalse に変更すると、直ちに同期的に完了します。これにより、非同期ロードを開始し、非同期ロードが完了する前にローダーのコンテンツにアクセスする必要がある場合に、強制的に完了させることができます。

アイテムが徐々にロードされるのを見ないようにするには、visible を適切に設定します。

Loader {
    source: "mycomponent.qml"
    asynchronous: true
    visible: status == Loader.Ready
}

このプロパティは、オブジェクトのインスタンス生成にのみ影響することに注意してください。


item : QtObject [read-only]

このプロパティは、現在ロードされているトップレベルのオブジェクトを保持します。

QtQuick 2.0 以降、Loader は任意のオブジェクト・タイプをロードできます。


progress : real [read-only]

このプロパティは、ネットワークからのQMLデータのロードの進捗状況を0.0(何もロードされていない)から1.0(完了)まで保持します。ほとんどのQMLファイルは非常に小さいので、この値は0から1へと急速に変化します。

statusも参照してください


source : url

このプロパティは、インスタンス化するQMLコンポーネントのURLを保持します。

QtQuick 2.0 以降、Loader はどのようなタイプのオブジェクトでもロードすることができます。

現在ロードされているオブジェクトをアンロードするには、このプロパティに空文字列を 設定するか、sourceComponentundefined を設定します。source に新しい URL を設定すると、前の URL で作成されたアイテムもアンロードされます。

sourceComponentstatusprogressも参照してください


sourceComponent : Component

このプロパティは、インスタンス化するComponent を保持します。

Item {
    Component {
        id: redSquare
        Rectangle { color: "red"; width: 10; height: 10 }
    }

    Loader { sourceComponent: redSquare }
    Loader { sourceComponent: redSquare; x: 10 }
}

現在ロードされているオブジェクトをアンロードするには、このプロパティをundefined に設定します。

QtQuick 2.0 以降、Loader はあらゆるタイプのオブジェクトをロードできます。

source およびprogressも参照して ください。


status : enumeration [read-only]

このプロパティは、QML のロード状態を保持します。次のいずれかになります:

  • Loader.Null - ローダーが非アクティブ、またはQMLソースが設定されていない。
  • Loader.Ready - QMLソースがロードされました。
  • Loader.Loading - QMLソースが現在ロードされています。
  • Loader.Error - QML ソースの読み込み中にエラーが発生しました。

このステータスを使用して、最新情報を提供したり、何らかの方法でステータスの変化に対応したりします。例えば、以下のようなことが可能です:

  • 状態変更をトリガーする:
    State { name: 'loaded'; when: loader.status == Loader.Ready }
  • onStatusChanged シグナルハンドラを実装する:
    Loader {
        id: loader
        onStatusChanged: if (loader.status == Loader.Ready) console.log('Loaded')
    }
  • ステータス値にバインドする:
    Text { text: loader.status == Loader.Ready ? 'Loaded' : 'Not loaded' }

ソースがローカル・ファイルの場合、ステータスは最初はReady(またはError)であることに注意。この場合、onStatusChanged シグナルは発生しませんが、onLoaded シグナルは起動されます。

progressも参照してください


シグナル・ドキュメント

loaded()

このシグナルは、statusLoader.Ready になったとき、または初期ロードに成功したときに発せられる。

注: 対応するハンドラはonLoaded


メソッド・ドキュメント

object setSource(url source, object properties)

与えられたproperties を持つ、与えられたsource コンポーネントのオブジェクトインスタンスを作成します。properties 引数は省略可能です。このインスタンスは、ロードとインスタンス化が完了すると、item プロパティからアクセスできるようになります。

この関数が呼ばれた時点でactive プロパティがfalse の場合、与えられたsource コンポーネントはロードされませんが、source と初期properties はキャッシュされます。ローダーがactive になると、source コンポーネントのインスタンスが、初期properties が設定された状態で作成される。

この方法でコンポーネントのインスタンスの初期プロパティ値を設定しても、関連するBehaviorはトリガされません

この関数を呼び出した後、ローダーactive を設定する前にsource またはsourceComponent を変更すると、キャッシュされたproperties はクリアされることに注意。

// ExampleComponent.qml
import QtQuick 2.0
Rectangle {
    id: rect
    color: "red"
    width: 10
    height: 10

    Behavior on color {
        NumberAnimation {
            target: rect
            property: "width"
            to: (rect.width + 20)
            duration: 0
        }
    }
}
// example.qml
import QtQuick 2.0
Item {
    Loader {
        id: squareLoader
        onLoaded: console.log(squareLoader.item.width);
        // prints [10], not [30]
    }

    Component.onCompleted: {
        squareLoader.setSource("ExampleComponent.qml",
                             { "color": "blue" });
        // will trigger the onLoaded code when complete.
    }
}

source およびactiveも参照のこと


© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.