Растягивающий элемент для размещения всех детей

Как в 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"
    }
}

Редактировать:

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

Ответы

Ответ 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 в одном из прямых потомков выдает предупреждение о цикле привязки.

Ответ 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"
    }
}