So erstellen Sie dynamische QML-Objekte in JavaScript

1. Objekte dynamisch erstellen

Es gibt zwei Möglichkeiten, Objekte dynamisch aus JavaScript zu erstellen:

• Rufen Sie Qt.createComponent() auf, um dynamisch ein Komponentenobjekt zu erstellen
• Erstellen Sie mit Qt.createQmlObject() ein Objekt aus einer QML-Zeichenfolge
  

Obwohl dynamisch erstellte Objekte wie andere Objekte verwendet werden können, haben sie in QML keine IDs.

1.1. Komponenten dynamisch erstellen

Sie können die Methode createObject() aufrufen, um eine Instanz der Komponente zu erstellen. Diese Funktion kann zwei Parameter akzeptieren:

Das erste ist das übergeordnete Objekt des neuen Objekts. Das übergeordnete Objekt kann ein grafisches Objekt (d. h. vom Typ „Item“) oder ein nicht grafisches Objekt (d. h. vom Typ „QtObject“ oder „C++ QObject“) sein. Nur Grafikobjekte mit einem übergeordneten Grafikelement werden auf Qt Quick gerendert. Wenn Sie das übergeordnete Element später festlegen möchten, können Sie dieser Funktion problemlos null übergeben.
Die zweite ist optional und ist eine Zuordnung von Eigenschafts-Wert-Paaren, die die Anfangswerte aller Eigenschaften des Objekts definiert. Der durch diesen Parameter angegebene Eigenschaftswert wird auf das Objekt angewendet, bevor die Objekterstellung abgeschlossen ist. Dadurch werden Bindungsfehler vermieden, die auftreten können, wenn bestimmte Eigenschaften initialisiert werden müssen, um die Bindung anderer Eigenschaften zu ermöglichen. Außerdem ist der Leistungsvorteil im Vergleich zum Definieren von Eigenschaftswerten und Bindungen nach der Objekterstellung gering.
Beispiel.

Sprite.qml Es definiert eine einfache QML-Komponente:

QtQuick 2.0 importieren
 
Rechteck { Breite: 80; Höhe: 50; Farbe: "rot" }

main.qml importiert eine JavaScript-Datei componentCreation.js, die das Sprite-Objekt erstellt:

QtQuick 2.0 importieren
importiere "componentCreation.js" als MyScript
 
Rechteck 
{
    ID: App-Fenster
    Breite: 300; Höhe: 300
 
    Komponente.beiAbgeschlossen: MyScript.createSpriteObjects();
}

componentCreation.js

var-Komponente;
var-Sprite;
 
Funktion createSpriteObjects() 
{
    Komponente = Qt.createComponent("Sprite.qml");
    wenn (Komponente.status == Komponente.Bereit)
        Erstellung beenden();
    anders
        Komponente.statusGeändert.Verbinden(Erstellung beenden);
}
 
Funktion finishCreation() 
{
    wenn (Komponente.status == Komponente.Bereit) 
    {
        sprite = Komponente.ErstellenObjekt(Anwendungsfenster, {x: 100, y: 100});
        wenn (Sprite == null) 
        {
            console.log("Fehler beim Erstellen des Objekts");
        }
    } 
    sonst wenn (Komponente.status == Komponente.Fehler) 
    {
        console.log("Fehler beim Laden der Komponente:", component.errorString());
    }
}

Bei Verwendung von Dateien mit relativen Pfaden sollten die Pfade relativ zur Datei sein, die Qt.createComponent() ausführt.

Darüber hinaus ist es möglich, Komponenten ohne Blockierung über die Funktion bateObject() zu instanziieren.

1.2. Objekte aus QML-Strings erstellen

QML-Objekte können aus einem QML-String mit der Funktion Qt.createQmlObject() erstellt werden, wie im folgenden Beispiel gezeigt:

const neuesObjekt = Qt.createQmlObject(`
    QtQuick 2.0 importieren
    Rechteck 
    {
        Farbe: "rot"
        Breite: 20
        Höhe: 20
    }
    `,
    übergeordnetesElement,
    „meinDynamicSnippet“
);

• Das erste Argument ist die zu erstellende QML-Zeichenfolge.
• Das zweite Argument ist das übergeordnete Objekt des neuen Objekts. Für createQmlObject() gilt die gleiche Semantik des übergeordneten Arguments wie für Komponenten.
• Das dritte Argument ist der mit dem neuen Objekt verknüpfte Dateipfad; dieser wird für die Fehlerberichterstattung verwendet.

Wenn die QML-Zeichenfolge einen relativen Pfad zum Dateiimport verwendet, sollte der Pfad relativ zur Datei sein, die das übergeordnete Objekt definiert (das zweite Argument der Methode).

Beim Erstellen einer statischen QML-Anwendung werden die QML-Dateien gescannt, um Importabhängigkeiten zu erkennen. Auf diese Weise werden alle erforderlichen Plugins und Ressourcen zur Kompilierungszeit aufgelöst. Dabei werden jedoch nur explizite Importanweisungen (die am Anfang einer QML-Datei stehen) berücksichtigt, nicht Importanweisungen, die in Zeichenfolgenliteralen enthalten sind. Um statische Builds zu unterstützen, müssen Benutzer sicherstellen, dass QML-Dateien, die Qt.createQmlObject() verwenden, alle erforderlichen Importe explizit am Anfang der Datei einschließen (auch in Zeichenfolgenliteralen).

2. Objekte dynamisch löschen

In vielen Benutzeroberflächen reicht es aus, die Deckkraft eines visuellen Objekts auf 0 zu setzen oder das visuelle Objekt vom Bildschirm zu verschieben, anstatt es zu entfernen. Wenn jedoch eine große Anzahl dynamisch erstellter Objekte vorhanden ist, kann das Löschen nicht verwendeter Objekte wertvolle Leistungsvorteile bringen.

Bitte beachten Sie: Von praktischen QML-Objektfabriken dynamisch erstellte Objekte (wie Loader und Repeater) sollten niemals manuell gelöscht werden. Darüber hinaus sollten Sie das Löschen von Objekten vermeiden, die Sie nicht selbst dynamisch erstellt haben.

Elemente können mit destroy() gelöscht werden. Diese Methode hat einen optionalen Parameter (Standardwert: 0), der die ungefähre Verzögerung (in Millisekunden) angibt, bevor das Objekt zerstört wird.

Beispiel. application.qml erstellt fünf Instanzen der Komponente SelfDestroyingRect.qml . Jede Instanz führt eine NumberAnimation aus und zerstört sich nach Abschluss der Animation selbst, indem sie destroy() für ihr Stammobjekt aufruft:

anwendung.qml

QtQuick 2.0 importieren
 
Artikel 
{
    ID: Container
    Breite: 500; Höhe: 100
 
    Komponente.beiAbgeschlossen: 
    {
        var Komponente = Qt.createComponent("SelfDestroyingRect.qml");
        für (var i=0; i<5; i++) 
        {
            var Objekt = Komponente.createObject(Container);
            Objekt.x = (Objekt.Breite + 10) * i;
        }
    }
}

SelfDestroyingRect.qml

QtQuick 2.0 importieren
 
Rechteck 
{
    ID: rechteckig
    Breite: 80; Höhe: 80
    Farbe: "rot"
 
    NumberAnimation bei Deckkraft 
    {
        bis: 0
        Dauer: 1000
 
        bei Ausführungsänderung: 
        {
            wenn (!läuft) 
            {
                console.log("Zerstören...")
                rechteck.destroy();
            }
        }
    }
}
 

Alternativ kann application.qml das erstellte Objekt durch den Aufruf von object.destroy() zerstören.

Bitte beachten Sie: Es ist sicher, destroy() für Objekte innerhalb dieses Objekts aufzurufen. Das Objekt wird nicht sofort zerstört, wenn destroy() aufgerufen wird, sondern es wird irgendwann zwischen dem Ende des Skriptblocks und dem nächsten Frame bereinigt (es sei denn, es ist eine Verzögerung ungleich Null angegeben).

Beachten Sie auch, dass die SelfDestroyingRect-Instanz statisch wie folgt erstellt wird:

Artikel 
{
    Selbstzerstörendes Rechteck 
    {
        // ...
    }
}

Dies führt zu Fehlern, da ein Objekt nur dann dynamisch zerstört werden kann, wenn es dynamisch erstellt wurde.

Mit Qt.createQmlObject() erstellte Objekte können auf ähnliche Weise mit destroy() zerstört werden:

const neuesObjekt = Qt.createQmlObject(`
    QtQuick 2.0 importieren
    Rechteck 
    {
        Farbe: "rot"
        Breite: 20
        Höhe: 20
    }
    `,
    übergeordnetesElement,
    „meinDynamicSnippet“
);
neuesObjekt.zerstören(1000);

Dies ist das Ende dieses Artikels zum Erstellen dynamischer QML-Objekte in JavaScript . Weitere Informationen zum Erstellen dynamischer QML-Objekte in JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!