How to set a background for a qml item of unspecified size?
<p>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:</p>

<pre><code>Item
{
    width: 320
    height: 240
    Rectangle
    {
        id: background
        anchors.fill: parent
        color: "blue"
    }

    // other items

}
</code></pre>

<p>However, this only works it the parent item has a size (width and height) defined.</p>

<p>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.</p>

<p>If I anchor the children in a sequence, everything works well except for the background.</p>

<p>There was <a href="https://stackoverflow.com/questions/5807557/how-to-make-qml-items-to-grow-to-fit-contents">a question a while ago</a> 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 <code>RowLayout</code>) displays them correctly.</p>

<pre><code>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

    }

}
</code></pre>

<p>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.</p>

<p>(If I use an <code>Item</code> or a <code>Rectangle</code> instead of the <code>RowLayout</code>, nothing changes. Actually, when using a <code>RowLayout</code> I could omit the sequential anchoring, but this doesn't change my problem with the background)</p>