JavaScript で動的な QML オブジェクトを作成する方法

1. オブジェクトを動的に作成する

JavaScript からオブジェクトを動的に作成する方法は 2 つあります。

Qt.createComponent()を呼び出してコンポーネントオブジェクトを動的に作成します。
Qt.createQmlObject()を使用して QML 文字列からオブジェクトを作成します。

動的に作成されたオブジェクトは他のオブジェクトと同じように使用できますが、QML では ID がありません。

1.1. コンポーネントを動的に作成する

createObject()メソッドを呼び出してコンポーネントのインスタンスを作成できます。この関数は次の 2 つのパラメータを受け入れることができます。

1 つ目は、新しいオブジェクトの親オブジェクトです。親オブジェクトは、グラフィカルオブジェクト (つまり、Item 型) または非グラフィカルオブジェクト (つまり、QtObject 型または C++ QObject 型) のいずれかになります。グラフィックスの親を持つグラフィックスオブジェクトのみがQt Quickビジュアルキャンバスにレンダリングされます。後で親を設定する場合は、この関数に null を安全に渡すことができます。
2 番目はオプションであり、オブジェクトのプロパティの初期値を定義するプロパティと値のペアのマップです。このパラメータで指定されたプロパティ値は、オブジェクトの作成が完了する前にオブジェクトに適用され、他のプロパティのバインドを有効にするために特定のプロパティを初期化する必要がある場合に発生する可能性があるバインドエラーを回避します。また、オブジェクトの作成後にプロパティ値とバインディングを定義する場合と比較すると、パフォーマンス上の利点は小さくなります。
例。

Sprite.qml シンプルな QML コンポーネントを定義します。

QtQuick 2.0をインポートする
 
長方形 { 幅: 80; 高さ: 50; 色: "赤" }

main.qml は、Sprite オブジェクトを作成する componentCreation.js JavaScript ファイルをインポートします。

QtQuick 2.0をインポートする
「componentCreation.js」をMyScriptとしてインポートします
 
矩形 
{
    id: アプリウィンドウ
    幅: 300; 高さ: 300
 
    Component.onCompleted: MyScript.createSpriteObjects();
}

コンポーネント作成.js

var コンポーネント;
var スプライト;
 
関数createSpriteObjects() 
{
    コンポーネント = Qt.createComponent("Sprite.qml");
    (コンポーネントのステータス == コンポーネントの準備完了)
        作成を完了します。
    それ以外
        コンポーネントのステータスが変更されました。接続(作成を完了)。
}
 
関数finishCreation() 
{
    (コンポーネントのステータス == コンポーネントの準備完了) 
    {
        スプライト = component.createObject(appWindow, {x: 100, y: 100});
        (スプライト == null)の場合 
        {
            console.log("オブジェクトの作成中にエラーが発生しました");
        }
    } 
    そうでない場合 (component.status == Component.Error) 
    {
        console.log("コンポーネントの読み込みエラー:", component.errorString());
    }
}

相対パスを持つファイルを使用する場合、パスはQt.createComponent()を実行するファイルに対して相対的である必要があります。

bateObject()関数を使用して、ブロックせずにコンポーネントをインスタンス化することもできます。

1.2. QML文字列からオブジェクトを作成する

QML オブジェクトは、次の例に示すように、Qt.createQmlObject() 関数を使用して QML 文字列から作成できます。

定数 newObject = Qt.createQmlObject(`
    QtQuick 2.0をインポートする
    矩形 
    {
        色: 「赤」
        幅: 20
        高さ: 20
    }
    `、
    親アイテム、
    「myDynamicSnippet」
);

最初の引数は作成する QML 文字列です。
2 番目の引数は、新しいオブジェクトの親オブジェクトです。コンポーネントの場合と同じ親引数のセマンティクスがcreateQmlObject()に適用されます。
3 番目の引数は、新しいオブジェクトに関連付けられたファイルパスです。これはエラー報告に使用されます。

QML 文字列がファイルインポートへの相対パスを使用する場合、パスは親オブジェクトを定義するファイル (メソッドの 2 番目の引数) を基準にする必要があります。

静的 QML アプリケーションを構築する場合、QML ファイルがスキャンされ、インポート依存関係が検出されます。この方法では、必要なすべてのプラグインとリソースがコンパイル時に解決されます。ただし、これは明示的なインポートステートメント (QML ファイルの先頭にあるもの) のみを考慮し、文字列リテラルに含まれるインポートステートメントは考慮しません。静的ビルドをサポートするには、ユーザーは、 Qt.createQmlObject()を使用する QML ファイルに、ファイルの先頭に必要なすべてのインポート (文字列リテラル内を含む) が明示的に含まれていることを確認する必要があります。

2. オブジェクトを動的に削除する

多くのユーザーインターフェイスでは、視覚オブジェクトの不透明度を 0 に設定するか、視覚オブジェクトを削除するのではなく画面外に移動するだけで十分です。ただし、動的に作成されたオブジェクトが多数ある場合は、未使用のオブジェクトを削除するとパフォーマンスが大幅に向上する可能性があります。

注意:便利な QML オブジェクトファクトリ (Loader や Repeater など) によって動的に作成されたオブジェクトは、手動で削除しないでください。さらに、自分で動的に作成していないオブジェクトを削除しないようにする必要があります。

アイテムはdestroy()メソッドを使用して削除できます。このメソッドには、オブジェクトが破棄されるまでのおおよその遅延時間 (ミリ秒単位) を指定するオプションのパラメーター (デフォルトは 0) があります。

例。 application.qml 、 SelfDestroyingRect.qmlコンポーネントのインスタンスを 5 つ作成します。各インスタンスはNumberAnimationを実行し、アニメーションが完了すると、ルートオブジェクトでdestroy()呼び出して自身を破棄します。

アプリケーション.qml

QtQuick 2.0をインポートする
 
アイテム 
{
    id: コンテナ
    幅: 500; 高さ: 100
 
    コンポーネント.onCompleted: 
    {
        var コンポーネント = Qt.createComponent("SelfDestroyingRect.qml");
        (var i=0; i<5; i++) の場合 
        {
            var オブジェクト = component.createObject(コンテナー);
            オブジェクト.x = (オブジェクト.幅 + 10) * i;
        }
    }
}

自己破壊矩形.qml

QtQuick 2.0をインポートする
 
矩形 
{
    id: 長方形
    幅: 80; 高さ: 80
    色: 「赤」
 
    不透明度に関する NumberAnimation 
    {
        0 まで
        期間: 1000
 
        実行中の変更: 
        {
            if (!実行中) 
            {
                console.log("破棄しています...")
                rectを破棄します。
            }
        }
    }
}

あるいは、 application.qml object.destroy()を呼び出して、作成されたオブジェクトを破棄することもできます。

注意:このオブジェクト内のオブジェクトに対して destroy() を呼び出すのは安全です。オブジェクトは、destroy() が呼び出された瞬間に破棄されるのではなく、スクリプトブロックの終了と次のフレームの間のいずれかの時点でクリーンアップされます (ゼロ以外の遅延が指定されていない限り)。

また、SelfDestroyingRect インスタンスが次のように静的に作成される場合も注意してください。

アイテム 
{
    自己破壊矩形 
    {
        // ...
    }
}

オブジェクトは動的に作成された場合にのみ動的に破棄できるため、エラーが発生します。

Qt.createQmlObject() で作成されたオブジェクトは、同様に destroy() を使用して破棄できます。

定数 newObject = Qt.createQmlObject(`
    QtQuick 2.0をインポートする
    矩形 
    {
        色: 「赤」
        幅: 20
        高さ: 20
    }
    `、
    親アイテム、
    「myDynamicSnippet」
);
新しいオブジェクトを破棄します(1000);

これで、 JavaScriptで動的な QML オブジェクトを作成する方法についての記事は終わりです。JavaScript で動的な QML オブジェクトを作成する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: