Component and Loader where there's a property alias between the Component Item and the Loader?

[kindid]

Hi!

Let's say I have a Component that contains a RadialGradient.

Component {
   id: radGrad
   RadialGradient {
      //stuff here
   }
}

Now I use a Loader to create it and bind it to a Rectangle (which is essentially an opacity mask)

Rectangle {
    id: wrecked
    x:0; y:0; width: 256; height: 256 //LOL! Coder numbers!
    radius: 32
}

Loader {
   sourceComponent: radGrad
   anchors.fill: parent
   // Loader already has a source property - RadialGradient source property is "hidden"
   source: wrecked // BANG!
}

As you can see both the Loader and the RadialGradient have a source property and the Loader property, naturally, wins out. So how do I set the source property of the inner item? I can't add a property alias to the inline Component because Component objects cannot declare new properties.

Currently the only decent work around I have is this...

Loader
...
    onLoaded: {
        item.source = wrecked
    }

But this doesn't "feel" good (should be a bind anyway). I can't write item.source inside the Loader either.

What's a better solution?

Yours,
Matthew

[J.Hilk]

Hi @kindid and welcome

you can define properties inside your loader component, that than can be accessed by the loaded item/component
something like this:

 Loader {
    sourceComponent: radGrad
    anchors.fill: parent
    // Loader already has a source property - RadialGradient source property is "hidden"
   property var wreckedSource: wrecked
 }

Component {
   id: radGrad
   RadialGradient {
      source: wreckedSource
   }
}

[GrecKo]

Another solution is using Binding:

Loader {
   id: loader
   sourceComponent: radGrad
   anchors.fill: parent
   Binding {
       target: loader.item
       property: "source"
       value: wrecked
   }
}

[kindid]

Both work nicely. I will probably go with Binding as it means the interface to the Item contained within the Component maintains the same property set as is documented. But the use of a Loader defined property is a very interesting use of the dynamic search space from the perspective of the Component encapsulated Item. I may have other uses for that - not sure yet!

Thank you very much!