Nesting Loaders in QML

Question

I'm trying to write my QML components in a modular fashion to be able to change the graphics on the fly but I'm struggling to nest them more than on a single level, here is an example:

import QtQuick 2.0
import QtGraphicalEffects 1.0

WindowFrame {
    id: this_item

    property Component body //this wont load the component
    property alias footer: footer_loader.sourceComponent //this gives an error -> Invalid alias reference. Unable to find id "footer_loader"

    property int footer_height: 70

    body: Item {
        id: body_component

        Loader {
            id: body_loader
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
            height: parent.height-this_item.footer_height
            sourceComponent: this_item.body
        }

        Item {
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            height: this_item.footer_height
            z: 2

            Rectangle {
                anchors.fill: parent
                color: Qt.rgba(0, 0, 0.5, 1)

                layer.enabled: true
                layer.effect: DropShadow {
                    transparentBorder: true
                    horizontalOffset: 0
                    verticalOffset: -8
                    radius: 8.0
                    samples: 17
                    color: Qt.rgba(0, 0, 0, 0.5)
                }
            }

            Loader {
                id: footer_loader
                anchors.fill: parent
            }
        }
    }
}

The goal is to build components with pre-defined spaces (like cards for example) and then load other elements inside these and did not found anything else other than using a loader, how sould it be done? is there a better approach to this?

Answer 1

YOu have to create Component Type Objects, not Item type

import QtQuick 2.0
import QtGraphicalEffects 1.0

WindowFrame {
    id: this_item

    property Component body //this wont load the component


     /*          
      * here is where you went wrong *  
      *  
      */
    body: Component {   // change Item to Component


        id: body_component


    }

     Card {
         id: myCard

     }
     Component.onCompleted {
        myCard.load_face("qrc:///jack.png")
     }
}

but the better answer is to create multiple QML files and dynamically create things like this

Card.qml

Item {
  id: card
  Rectangle {   
     width: 100
     height: 100

  }
  function load_face(imageSource) {
         var component = Qt.createComponent("CardFace.qml");
  if (component.status == Component.Ready)
      component.createObject(card, {"imageSource": imageSource, "y": 100});

  }
}

CardFace.qml

Item {
    id: face
    property var imageSource
    Image {
         source: face.imageSource
     }
}