The simplest way to set a background to a qml item is to just have a child rectangle whose anchors completely fill up the parent:
Item
{
width: 320
height: 240
Rectangle
{
id: background
anchors.fill: parent
color: "blue"
}
// other items
}
However, this only works it the parent item has a size (width and height) defined.
I would like to have a container without defining a fixed size for it. The children will have fixed sizes, but as the children can change their sizes dynamically, I would like for the parent container to grow and shrink to fit.
If I anchor the children in a sequence, everything works well except for the background.
There was a question a while ago about a similar topic, but there the issue was that all the children were overlapping instead of displayed side by side. That is not my problem, because anchoring them in a sequence (or using a RowLayout) displays them correctly.
Item
{
// I don't want a fixed size here
Rectangle
{
id: background
anchors.fill: parent
color: "blue"
}
RowLayout
{
anchors.fill: parent
Item
{
id: child1
anchors.left = parent.left
anchors.top: parent.top
width:100
height:100
}
Item
{
id: child2
anchors.left = child1.right
anchors.top: parent.top
width:120
height:120
}
// further children
}
}
However, the background is not displayed because the parent doesn't have a defined size, although all the children do have a fixed size, and if I specify the right anchor of the last child to be the right of the parent, it is still displayed correctly. I guess this means that the size of the parent should be known by the renderer.
(If I use an Item or a Rectangle instead of the RowLayout, nothing changes. Actually, when using a RowLayout I could omit the sequential anchoring, but this doesn't change my problem with the background)