Wie definiert man eine "Vorlage" mit untergeordneten Platzhaltern in QML?

Question

Ich mag QML wirklich. Ich mag es, wie ich Komponenten (vergleichbar mit Klassen) und ihre Eigenschaften definieren und von irgendwoher instanziieren kann (vergleichbar mit Objekten).

Ich kann definieren, sagen wir mal, eine Schaltfläche, einige Look-and-Feel, und einen Label-Text darauf. Dies könnte zum Beispiel dieser Komponente Definition (Button.qml):

Item { 
    id: button 
    property string label 

    anchors.fill: parent 

    Rectangle { 
     anchors.fill: parent 
     radius: 10 
     color: "gray" 

     Text { 
      anchors.centerIn: parent 
      font.pixelSize: 20 
      text: button.label 
      color: "white" 
     } 
    } 
} 

und instanziiert in dieser Hauptdatei (main.qml):

Rectangle { 
    width: 300 
    height: 200 

    Button { 
     anchors.centerIn: parent 
     anchors.margins: 50 
     label: "Hello button!" 
    } 
} 

Aber ich sehe die folgende Einschränkung: Ich kann nur Definieren Sie eine Schaltflächenvorlage mit einigen Eigenschaften, nicht mit einigen Platzhalter. Alle untergeordneten Objekte, die in der Instanz definiert sind, sind mindestens standardmäßig untergeordnete Elemente, und ich möchte dieses Verhalten ändern.

Nehmen wir an, ich möchte ein Element (sagen wir ein Bild, aber ich will nicht die Definition von Button, dass es ein Bild sein wird) in der Schaltfläche platzieren. Ich stelle mir so etwas vor:

Item { 
    id: button 
    property Item contents <-- the client can set the placeholder content here 

    anchors.fill: parent 

    Rectangle { 
     anchors.fill: parent 
     radius: 10 
     color: "gray" 

     Item { 
      id: placeholder  <-- where the placeholder should be inserted 
     } 
    } 

    Component.onCompleted: { 
     // move the contents into the placeholder... 
    } 
} 

Wie kann ich das erreichen? Ich weiß nicht, ob Component.onCompleted der richtige Weg ist. Beachten Sie jedoch, dass sich in meinem Fall die Inhalte nie ändern werden (zumindest in meinem aktuellen Design der Anwendung ...).

Auch möchte ich Verankerung innerhalb des Platzhalters arbeiten. Zum Beispiel, wenn ich den Inhalt als ein Text-Element definiere, das in seinem Elternteil zentriert ist (welches zuerst die Vorlage selbst sein wird). Dann verschiebt mein Code diese Textinstanz in den Platzhalter und die übergeordneten Anker sollten dann diejenigen des Platzhalterelements sein, nicht das Vorlagenelement.

Answer 1

Ich fand eine viel schönere Antwort auf diese Frage, vorgeschlagen in einer Präsentation der Qt Developer Days 2011 "Qt Quick Best Practices and Design Patterns".

Sie verwenden default property alias ... zu alias die untergeordneten Elemente zu jeder Eigenschaft eines beliebigen Elements. Wenn Sie die untergeordneten Elemente nicht aliasieren möchten, aber der Alias-Eigenschaft einen Namen geben möchten, entfernen Sie einfach default. (Wörtliche Kinder sind pro QML Definition der Wert der Standardeigenschaft.)

Item { 
    id: button 
    default property alias contents: placeholder.children 

    anchors.fill: parent 

    Rectangle { 
     anchors.fill: parent 
     radius: 10 
     color: "gray" 

     Item { 
      id: placeholder  <-- where the placeholder should be inserted 
     } 
    } 
} 

Answer 2

Eigentlich ist die richtige Antwort von dem, was ich gehört habe, eine QML Loader zu verwenden, um zu erreichen, was Sie wollen.

[das wird gesagt; Ich habe es noch nicht wirklich versucht, aber es ist auf meiner Terminkalender-Liste und sieht ziemlich geradlinig]

Suchen Sie auch stackoverflow für andere "QML Loader" Fragen, da es eine Nummer gibt, die Ihnen den Einstieg erleichtern wird.

Answer 3

Sie können den Artikel bewegen (s) mit diesem Stück Code (wenn Sie mehrere Elemente innerhalb der Platzhalter unterstützen möchten):

property list<Item> contents 

Component.onCompleted: { 
    var contentItems = []; 
    for(var i = 0; i < contents.length; ++i) 
     contentItems.push(contents[i]); 
    placeholder.children = contentItems; 
} 

Beachten Sie, dass Sie nicht über eine Liste von Elementen zu schaffen Die Eigenschaft contents wird als einzelne Werte von der QML-Engine auch für Listeneigenschaften akzeptiert.

Answer 4

Kurz (auf die Idee zeigen):

import QtQuick 1.1 

Item { 
    width: 200 
    height: 100 

    //<-- the client can set the placeholder content here 
    property Item contents: Rectangle { 
     anchors.fill: parent 
     anchors.margins: 25 
     color: "red" 
    } 

    Rectangle { 
     id: container 

     anchors.fill: parent 
     radius: 10 
     color: "gray" 

     //<-- where the placeholder should be inserted 
    } 

    Component.onCompleted: { 
     contents.parent = container 
    } 
} 

Etwas längere Version (mit Unterstützung Inhalt Neuzuordnung):

import QtQuick 1.1 

Item { 
    width: 200 
    height: 100 

    //<-- the client can set the placeholder content here 
    property Item contents: Rectangle { 
     //anchors can be "presupplied", or set within the insertion code 
     //anchors.fill: parent 
     //anchors.margins: 25 
     color: "red" 
    } 

    Rectangle { 
     id: container 

     anchors.fill: parent 
     radius: 10 
     color: "gray" 

     //<-- where the placeholder should be inserted 
     //Item { 
     // id: placeholder 
     //} 
    } 

    //"__" means private by QML convention 
    function __insertContents() { 
     // move the contents into the placeholder... 
     contents.parent = container 
     contents.anchors.fill = container 
     contents.anchors.margins = 25 
    } 

    onContentsChanged: { 
     if (contents !== null) 
      __insertContents() 
    } 

    Component.onCompleted: { 
     __insertContents() 
    } 
} 

this helps :)

Answer 5

Necro Anrufbeantworter, falls jemand anderes hier am Ende wie ich.

In Qt5 wurde irgendwo in der Zeile die Standardeigenschaft "data" und nicht "Kinder". Dies ermöglicht das Hinzufügen anderer Objekttypen als "Objekt". z.B. Verbindungen können ebenfalls hinzugefügt werden (meine eigene Frage oben antworten)

So in QT5 sollten Sie tun:

Item { 
    id: button 
    default property alias contents: placeholder.data 

    anchors.fill: parent 

    Rectangle { 
     anchors.fill: parent 
     radius: 10 
     color: "gray" 

     Item { 
      id: placeholder  <-- where the placeholder should be inserted 
     } 
    } 
} 

Notiere die: placeholder.data statt placeholder.children Bitte beachten Sie auch, dass Sie nicht haben Verwenden Sie den Aliasnamen contents - dies kann alles sein, was Sie möchten. Ein Beispiel: