quick - qt creator qml

Diferencia entre ancho, alto e implícito Ancho/Alto y casos de uso correspondientes en QML

Question

¿Cuál es la diferencia entre width/height e width/height implicitWidth/Height en QML? ¿Cuándo debería uno establecer las dimensiones implícitas en lugar de las regulares? ¿Cuándo debería uno pedir las dimensiones implícitas en lugar de las regulares de un componente / elemento?

Answer 1

En general, el uso de implicitHeight/Width solo tiene sentido dentro de los componentes reutilizables.

Da una pista del tamaño natural del artículo sin imponer este tamaño.

Tomemos una Image como ejemplo. El tamaño natural de la imagen asignaría un píxel del archivo de imagen a un píxel en la pantalla. Pero nos permite estirarlo, por lo que el tamaño no se aplica y se puede anular.

Digamos que ahora, queremos tener una galería con imágenes de dimensión desconocida, y no queremos crecer, solo reducirlas si es necesario. Por eso necesitamos almacenar el tamaño natural de la imagen. Es decir, donde entra en juego la altura implícita.

Image {
    width: Math.max(150, implicitWidth)
    height: Math.max(150, implicitHeight)
}

En los componentes personalizados, tiene una opción sobre cómo definir los tamaños.

La única opción es tener todas las dimensiones relativas a los componentes root -node, tal como esto:

Item {
    id: root
    Rectangle {
        width: root.width * 0.2
        height: root.height * 0.2
        color: ''red''
    }
    Rectangle {
        x: 0.2 * root.width
        y: 0.2 * root.height
        width: root.width * 0.8
        height: root.height * 0.8
        color: ''green''
    }
}

En este caso, no hay un tamaño natural del objeto. Todo funciona perfectamente para cada tamaño que establezca para el componente.

Por otro lado, es posible que tenga un objeto que tenga un tamaño natural, que ocurre, por ejemplo, si tiene valores absolutos en él.

Item {
    id: root
    property alias model: repeater.model
    Repeater {
        id: repeater
        delegate: Rectangle {
            width: 100
            height: 100
            x: 102 * index
            y: 102 * index
        }
    }
}

En este ejemplo, debe proporcionar al usuario información sobre el tamaño natural, donde el contenido no sobresale del elemento. El usuario todavía puede decidir establecer un tamaño más pequeño y lidiar con la protuberancia, por ejemplo, recortándolo, pero necesita la información sobre el tamaño natural para tomar su decisión.

En muchos casos, childrenRect.height/width es una buena medida para implcitHeight/Width , pero hay ejemplos en los que no es una buena idea. - Por ejemplo, cuando el contenido del elemento tiene x: -500 .

Un ejemplo de la vida real es el Flickable que está diseñado específicamente para contener objetos más grandes que su propio tamaño. Tener el tamaño del Flickable para que sea igual al contenido no sería natural.

También tenga cuidado al usar la scale en componentes personalizados, ya que childrenRect no sabrá acerca de la escala.

Item {
    id: root
    implicitWidth: child.width * child.scale
    implicitHeight: child.height * child.scale
    Rectangle {
        id: child
        width: 100
        height: 100
        scale: 3
        color: ''red''
    }
}

Y a su comentario: simplemente no entiendo por qué es mejor establecer el ancho / alto implícito en lugar de establecer el ancho / alto de la dimensión raíz de un componente.

implicitWidht/Height no es una necesidad, QtQuick podría prescindir de ellos. Existen por conveniencia y serán convenciones.

Regla de oro

Cuando desee establecer la dimensión de un nodo raíz de un componente reutilizable, configure implicitWidth/Height .
En algunos casos, configúrelo para nodos no raíz, si los nodos están expuestos como una propiedad.
Hágalo solo, si tiene una razón para ello (muchos componentes oficiales vienen sin ninguno).
Cuando uses un componente, establece el width/height .

Answer 2

No tengo la respuesta definitiva, pero puedo decirte lo que descubrí. En primer lugar, a partir de la documentación :

Ancho implícito: real

Define el ancho o alto natural del Artículo si no se especifica ningún ancho o alto.

El tamaño implícito predeterminado para la mayoría de los elementos es 0x0, sin embargo, algunos elementos tienen un tamaño implícito inherente que no se puede anular, por ejemplo, Image y Text .

pero menos informativo para el ancho :

anchura

Define la posición y el tamaño del artículo.

El width y la height reflejan el tamaño real del elemento en la escena. El tamaño implícito es algún tipo de propiedad inherente del artículo en sí. ¹

Los uso de la siguiente manera: cuando creo un nuevo elemento y se puede cambiar su tamaño, configuro un tamaño implícito dentro del objeto ² . Cuando uso el objeto, a menudo configuro el tamaño real explícitamente desde el exterior .

El tamaño implícito de un objeto se puede anular configurando el alto y el ancho.

un ejemplo: TextWithBackground.qml

Item {
    implicitWidth: text.implicitWidth
    implicitHeight: text.implicitHeight
    // the rectangle will expand to the real size of the item
    Rectangle { anchors.fill: parent; color: "yellow" }
    Text { id: text; text: "Lorem ipsum dolor..." }
}

un ejemplo: MyWindow.qml

Item {
    width: 400
    height: 300
    TextWithBackground {
         // half of the scene, but never smaller than its implicitWidth
         width: Math.max(parent.width / 2, implicitWidth)
         // the height of the element is equal to implicitHeight
         // because height is not explicitly set
    }
}

_{1) Para algunos elementos, como Texto, la altura implícita depende del ancho (no implícito).
2) El tamaño implícito generalmente depende del tamaño implícito de sus hijos.}