Elemento de estiramiento para contener todos los niños

Question

¿Cómo es posible en QML estirar automáticamente el elemento para que todos sus niños encajen en él? ¿Y cómo especificar el espaciado? Por ejemplo, me gustaría tener un rectángulo alrededor de un texto. El rectángulo debe tener un espacio interno.

Si escribo lo siguiente, entonces el rectángulo tiene un tamaño de 0,0.

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

    Text { 
     text: "Hello" 
    } 
} 

Si trato de arreglarlo mediante el elemento Column, como se sugiere en How to make QML items to grow to fit contents?, entonces consigo una columna a través de toda la ventana/padre,

Column { 
    anchors.centerIn: parent 

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

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

Editar:

También he intentado utilizar el elemento Flow en lugar de Column, pero luego obtuve una fila a través del wh ole ventana/padre.

Answer 1

Usted puede utilizar la propiedad childrenRect para esto:

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" 
     } 
    } 
} 

Sin embargo, tenga en cuenta que el uso de childrenRect en combinación con usar anchors.centerIn: parent en uno de los hijos directos produce una advertencia sobre un bucle de enlace.

Answer 2

Ajuste del width y height funciona manualmente, pero es un poco fea:

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

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