qmlqqmlcomponent

How to define QML component inline and override a property?


I'm trying and failing at something seemingly simple: define a simple text formatting component inline, then instantiate it multiple times with different text. Here's the code

Item {
.
.
.
Component {
    id: favButtonLabelText
    Text {
        text: "Blah!"
        color: StyleSingleton.xNavPrimaryText
        font.family: StyleSingleton.xNavTextFont
        font.pointSize: 28
    }
}
.
.
.       
Loader { sourceComponent: favButtonLabelText; text: "Diameter" }

At the Loader line, the text property is invalid. Attempts to define a property or alias on the component are rejected with "Component objects cannot declare new properties".

The only example I find in the docs, shows overriding the x property of a Rectangle defined in an inline component. It seem to me overriding the text property of a Text element is analogous.

How can I do this?


Solution

  • Since Loader sets itself as the context object for the component it is loading, you could define a property in it and use it in the loaded Item.
    However, you have to use a property name not used by your item, otherwise it will be shadowed by your item's own property and there's no easy way to access a context property explicitly.

    Component {
        id: favButtonLabelText
        Text {
            text: foobar
        }
    }
    Loader {
        sourceComponent: favButtonLabelText
        property string foobar: "Diameter"
    }