Растягивающий элемент, содержащий все дочерние элементы

Question

Как в QML можно автоматически растягивать элемент, чтобы в него помещались все его дочерние элементы? А как указать расстояние? Например, я хотел бы иметь прямоугольник вокруг текста. Прямоугольник должен иметь некоторый внутренний интервал.

Если я напишу следующее, то прямоугольник будет иметь размер 0,0.

Rectangle {
    color: "gray"
    anchors.centerIn: parent;

    Text {
        text: "Hello"
    }
}

Если я попытаюсь исправить это с помощью элемента Column, как предложено в Как увеличить элементы QML, чтобы они соответствовали содержимому? , тогда я получу столбец через все окно / родитель,

Column {
    anchors.centerIn: parent

    Rectangle {
        color: "gray"
        anchors.fill: parent
    }

    Text {
        anchors.centerIn: parent
        text: "Hello"
    }
}

Edit:

Я также пытался использовать элемент Flow вместо Column, но затем я получил строку через все окно / родительский элемент.

Answer 1

Для этого можно использовать свойство childrenRect:

import QtQuick 1.1

Rectangle {
    width: 320
    height: 200

    Rectangle {
        color: "BurlyWood"
        anchors.centerIn: parent
        width: childrenRect.width + 20
        height: childrenRect.height + 20

        Text {
            id: hello
            x: 10
            y: 10
            text: "Hello"
        }

        Text {
            anchors.left: hello.right
            anchors.leftMargin: 10
            anchors.top: hello.top
            text: "World"
        }
    }
}

Однако учтите, что использование childrenRect в сочетании с использованием anchors.centerIn: parent в одном из прямых потомковвыдает предупреждение о цикле привязки.

Answer 2

Настройка width и height работает вручную, но немного уродливо:

Rectangle {
    color: "gray"
    width: label.width+20
    height: label.height+20
    anchors.centerIn: parent

    Text {
        id: label
        anchors.centerIn: parent
        text: "Hello"
    }
}