how to replace or redefine parent class' inline-component - qt

Question

I would like to know if it is possible to replace/redefine a parent's inline component. There are ways to do so with a 'classic' component; for example, I can assign the component to a property and re-define the property:
Super.qml
import QtQuick 2.0
import QtQuick.Controls 2.12
Rectangle {
property Component classicComponent: Text { text: "Hello" }
width: 60
height: 30
border.color: "blue"
border.width: 2
Loader {
id: loader
sourceComponent: classicComponent
}
}
main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
width: 80
height: 90
visible: true
title: qsTr("Hello World")
Column {
x: 10; y: 10
spacing: 10
Super { }
Super {
classicComponent: Label {
text: "World"
background: Rectangle { color: "#30DD0000" }
}
}
}
}
I would like to know if it is possible to do something conceptually similar, but with an inline component. I have not found any way to combine an inline component with a property, and if I try something like:
InlineParent.qml
Rectangle {
component Foo: Text { text: "Hello" }
Foo {}
}
and
Child.qml
InlineParent {
component Foo: Label {
text: "World"
background: Rectangle { color: "#30DD0000" }
}
}
Both will print "Hello". Obviously, there are better ways to add a red background to an Item (such as Text); the concept I am interested in is in having the subclass redefine a component declared in the superclass/parent class.

Answer 1

After getting some sleep, I found that it IS possible to place an inline component in a property, allowing a subclass to redefine it or expand it.
Super.qml
import QtQuick 2.0
import QtQuick.Controls 2.12
Rectangle {
property Component inlineComponent: Foo {}
component Foo: Text { text: "Hello" }
width: 60
height: 30
border.color: "blue"
border.width: 2
Loader {
id: loader
sourceComponent: inlineComponent
}
}
main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
width: 80
height: 130
visible: true
title: qsTr("Hello World")
Column {
x: 10; y: 10
spacing: 10
Super { }
Super {
inlineComponent: Label {
text: "World"
background: Rectangle { color: "#30dd0000" }
}
}
Super {
inlineComponent: Super.Foo {
text: "World"
Rectangle {
color: "#30dd0000"
anchors.fill: parent
}
}
}
}
}
It solved my problem, allowing me to replace or extend Foo.