Component QML Type

QML コンポーネントの定義をカプセル化します。詳細...

Import Statement: import QtQml
In C++: QQmlComponent

プロパティ

付属シグナル

メソッド

詳細説明

コンポーネントは、再利用可能でカプセル化され、明確に定義されたインターフェースを持つQMLの型です。

コンポーネントは多くの場合、コンポーネントファイル、つまり.qml ファイルで定義されます。Component型では、QMLコンポーネントをQMLファイルとして個別に定義するのではなく、QML文書内にインラインで定義することができます。これは、QMLファイル内で小さなコンポーネントを再利用する場合や、ファイル内で他のQMLコンポーネントと論理的に属するコンポーネントを定義する場合に便利です。

例えば、Loader の複数のオブジェクトで使用される コンポーネントがあります。このコンポーネントには、Rectangle という項目が1つ含まれています:

import QtQuick

Item {
    width: 100; height: 100

    Component {
        id: redSquare

        Rectangle {
            color: "red"
            width: 10
            height: 10
        }
    }

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

Rectangle はそれ自体で自動的にレンダリングされ表示されますが、上の矩形はComponent の内部で定義されているため、そうではないことに注意してください。 コンポーネントは、あたかも別のQMLファイルで定義されているかのように、内部のQML型をカプセル化し、要求されるまで(この場合、2つのLoader オブジェクトによって)ロードされません。ComponentはItemから派生したものではないので、Itemに何かをアンカーすることはできません。

Component の定義はQMLドキュメントの定義に似ています。QML文書には、そのコンポーネントの動作やプロパティを定義するトップレベル項目が1つあり、そのトップレベル項目以外のプロパティや動作を定義することはできません。これと同じように、Component の定義には、トップレベルの項目(上の例ではRectangle )が一つあり、id(上の例ではredSquare)を除いて、この項目の外側にデータを定義することはできません。

Component タイプは、ビューにグラフィカルなコンポーネントを提供するために一般的に使用されます。例えば、ListView::delegate プロパティは、各リスト項目の表示方法を指定するためにComponent を必要とします。

Component オブジェクトは、 () を使用して動的に作成することもできます。Qt.createComponent

作成コンテキスト

コンポーネントの作成コンテキストは、コンポーネントが宣言されたコンテキストに対応します。このコンテキストは、ListView や Loader などのオブジェクトによってコンポーネントがインスタンス化されるときに、親コンテキストとして使用されます(コンテキスト階層が作成されます)。

次の例では、comp1 が MyItem.qml のルートコンテキスト内に作成され、このコンポーネントからインスタンス化されたオブジェクトは、internalSettings.color など、そのコンテキスト内の ID やプロパティにアクセスできるようになります。comp1 、別のコンテキストでListView デリゲートとして使用される場合(以下のmain.qmlのように)、作成されたコンテキストのプロパティ(外部ユーザーには非公開)にアクセスし続けることができます。

MyItem.qml
Item {
    property Component mycomponent: comp1

    QtObject {
        id: internalSettings
        property color color: "green"
    }

    Component {
        id: comp1
        Rectangle { color: internalSettings.color; width: 400; height: 50 }
    }
}
main.qml
ListView {
    width: 400; height: 400
    model: 5
    delegate: myItem.mycomponent    //will create green Rectangles

    MyItem { id: myItem }
}

作成コンテキストの寿命が、作成されたオブジェクトよりも長くなるようにすることが重要です。詳細については、「動的に作成されるオブジェクトの維持」を参照してください。

プロパティ・ドキュメント

progress : real [read-only]

0.0(何もロードされていない)から 1.0(完了)までの、コンポーネントのロードの進捗状況。


status : enumeration [read-only]

このプロパティは、コンポーネントのロード状態を保持する。状態は以下のいずれかになります:

定数説明
Component.Nullコンポーネントのデータが利用できない。
Component.Readyコンポーネントがロードされ、インスタンスの作成に使用できます。
Component.Loadingコンポーネントは現在ロード中です。
Component.Errorコンポーネントのロード中にエラーが発生した。errorString() を呼び出すと、エラーの内容を人間が読める形で表示します。

url : url [read-only]

コンポーネントの URL。これは、コンポーネントを構築するために使用されたURLです。


アタッチドシグナル ドキュメント

completed()

オブジェクトがインスタンス化された後に発行されます。これは、QMLの完全な環境が確立された後、起動時にスクリプトコードを実行するために使用することができます。

onCompleted シグナルハンドラはどのオブジェクトでも宣言できます。ハンドラの実行順序は不定です。

Rectangle {
    Component.onCompleted: console.log("Completed Running!")
    Rectangle {
        Component.onCompleted: console.log("Nested Completed Running!")
    }
}

注意: 対応するハンドラはonCompleted です。


destruction()

オブジェクトが破壊を開始するときに発行されます。これは、completed() シグナルに応答して行われた作業や、アプリケーション内の他の命令的なコードを元に戻すために使用できます。

onDestruction シグナル・ハンドラは、どのオブジェクトでも宣言できます。ハンドラの実行順序は不定です。

Rectangle {
    Component.onDestruction: console.log("Destruction Beginning!")
    Rectangle {
        Component.onDestruction: console.log("Nested Destruction Beginning!")
    }
}

注: 対応するハンドラはonDestruction です。

Qt Qmlも参照してください


メソッドのドキュメント

QtObject createObject(QtObject parent, object properties)

与えられたparentproperties を持つこのコンポーネントのオブジェクトインスタンスを作成し、返します。properties 引数はオプションです。オブジェクトの作成に失敗した場合は null を返します。

オブジェクトは、コンポーネントが作成されたコンテキストと同じコンテキストで作成されます。QMLで作成されていないコンポーネントに対してこの関数を呼び出すと、常にNULLが返されます。

親を設定せずにオブジェクトを作成したい場合は、parent の値にnull を指定してください。返されたオブジェクトを表示する場合は、有効なparent の値を指定するか、返されたオブジェクトのparent プロパティを設定する必要があります。

createObject()にparent を指定しない場合は、ガベージ・コレクタによって破棄されないように、返されるオブジェクトへの参照を保持しなければなりません。Itemの親を設定してもオブジェクトの所有権は変更されないので、これはItem::parent が後で設定されるかどうかに関係なく当てはまります。グラフィカルな親だけが変更されます。

QtQuick 1.1 の時点で、このメソッドは、作成されるオブジェクトの初期プロパティ値のマップを指定するオプションの引数properties を受け入れます。これらの値は、オブジェクトの作成が確定する前に適用されます。これは、オブジェクト生成後にプロパティ値を設定するよりも効率的で、特に大きなプロパティ値のセットが定義されている場合、オブジェクトが生成される前にプロパティバインディングを設定することもできます(Qt.binding を使用)。

properties 引数は、プロパティ値項目のマップとして指定されます。例えば、以下のコードでは、xy の初期値がそれぞれ 100 と 100 のオブジェクトが作成されます:

const component = Qt.createComponent("Button.qml");
if (component.status === Component.Ready) {
    component.createObject(parent, { x: 100, y: 100 });
}

動的に生成されたインスタンスはdestroy() メソッドで削除することができます。詳しくは「JavaScriptによる動的なQMLオブジェクトの生成」を参照してください。

incubateObject()も参照してください


string errorString()

エラーの内容を人間が読める形で返します。

文字列には各エラーのファイル名、場所、説明が含まれます。複数のエラーが存在する場合は、改行文字で区切られます。

エラーがない場合は、空の文字列が返されます。


object incubateObject(QtObject parent, object properties, enumeration mode)

このコンポーネントのインスタンスのインキュベータを作成します。インキュベーターは、新しいコンポーネントインスタンスを非同期でインスタンス化することを可能にし、UIのフリーズを引き起こしません。

parent 引数は、作成されるインスタンスが持つ親を指定します。このパラメータを省略するかNULLを渡すと、親を持たないオブジェクトが作成されます。この場合、ガベージコレクタによって破棄されないように、作成されたオブジェクトへの参照を保持する必要があります。

properties 引数は、作成されたオブジェクトの構築時に設定されるプロパティ値項目のマップとして指定されます。mode には Qt.Synchronous または Qt.Asynchronous を指定し、インスタンスが同期的に作成されるか非同期的に作成されるかを制御します。デフォルトは非同期です。状況によっては、Qt.Synchronousが指定されていても、インキュベーターはオブジェクトを非同期で作成することがあります。これは、incubateObject() を呼び出しているコンポーネント自身が非同期で作成されている場合に起こります。

3つの引数はすべてオプションです。

成功した場合、このメソッドはインキュベータを返します。インキュベーターには以下のプロパティがあります:

  • status - インキュベータのステータス。有効な値は、Component.Ready、Component.Loading、および Component.Errorです。
  • object - 作成されたオブジェクトのインスタンス。インキュベーターがReadyステータスになったときのみ使用可能です。
  • onStatusChanged - ステータスが変更されたときに呼び出されるコールバック関数を指定します。ステータスはコールバックのパラメータとして渡されます。
  • forceCompletion() - 同期的にインキュベーションを完了させるために呼び出します。

次の例は、インキュベータの使用方法を示しています:

const component = Qt.createComponent("Button.qml");

const incubator = component.incubateObject(parent, { x: 10, y: 10 });
if (incubator.status !== Component.Ready) {
    incubator.onStatusChanged = function(status) {
        if (status === Component.Ready) {
            print("Object", incubator.object, "is now ready!");
        }
    };
} else {
    print("Object", incubator.object, "is ready immediately!");
}

動的に生成されたインスタンスはdestroy() メソッドで削除することができます。詳しくはDynamic QML Object Creation from JavaScriptを参照してください。

createObject()も参照してください


©2024 The Qt Company Ltd. 本ドキュメントに含まれる文書の著作権は、それぞれの所有者に帰属します。 本書で提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の 商標です。その他すべての商標は、それぞれの所有者に帰属します。