Différence entre largeur, hauteur et implicitWidth/Height et cas d'utilisation correspondants en QML

Question

Quelle est la différence entre width/height y implicitWidth/Height en QML ? Quand doit-on définir les dimensions implicites au lieu des dimensions normales ? Quand doit-on demander les dimensions implicites au lieu des dimensions normales à un composant/élément ?

Answer 1

En général, l'utilisation de implicitHeight/Width n'a de sens que dans le cadre de composants réutilisables.

Il donne une indication de la taille naturelle de l'élément sans la forcer.

Prenons un Image à titre d'exemple. La taille naturelle de l'image fait correspondre un pixel du fichier image à un pixel de l'écran. Mais elle nous permet de l'étirer, de sorte que la taille n'est pas imposée et peut être remplacée.

Disons maintenant que nous voulons avoir une galerie avec des photos de dimension inconnue, et que nous ne voulons pas les agrandir mais seulement les réduire si nécessaire. Nous avons donc besoin de stocker la taille naturelle de l'image. C'est là que la hauteur implicite entre en jeu.

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

Dans les composants personnalisés, vous avez le choix sur la façon de définir les tailles.

Le seul choix possible est d'avoir toutes les dimensions relatives aux composants. root peut-être comme ceci :

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

Dans ce cas, il n'y a pas de taille naturelle de l'objet. Tout fonctionne parfaitement pour chaque taille que vous définissez pour le composant.

D'un autre côté, vous pouvez avoir un objet qui a une taille naturelle - cela se produit, par exemple, si vous avez les valeurs absolues qu'il contient

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

Dans cet exemple, vous devez fournir à l'utilisateur des informations sur la taille naturelle, où le contenu ne dépasse pas l'élément. L'utilisateur peut toujours décider de définir une taille plus petite et de gérer la protubérance, par exemple en la coupant, mais il a besoin des informations sur la taille naturelle pour prendre sa décision.

Dans de nombreux cas, childrenRect.height/width est une bonne mesure pour le implcitHeight/Width mais il existe des exemples où ce n'est pas une bonne idée. - par exemple, lorsque le contenu de l'article a x: -500 .

Un exemple concret est le Flickable qui est spécifiquement conçu pour contenir des objets plus grands que sa propre taille. Le fait d'avoir la taille de la Flickable pour être égal au contenu ne serait pas naturel.

Faites également attention, lorsque vous utilisez scale dans les composants personnalisés, car le childrenRect ne sera pas informé de la mise à l'échelle.

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

---

Et à votre commentaire : Je ne comprends pas pourquoi il est préférable de définir implicitement la largeur/hauteur au lieu de définir la largeur/hauteur de la dimension racine d'un composant.

implicitWidht/Height ne sont pas une nécessité - QtQuick pourrait s'en passer. Ils existent par commodité et doivent être conventionnés.

---

Règle d'or

Lorsque vous souhaitez définir la dimension d'un nœud racine d'un composant réutilisable, définissez le paramètre suivant implicitWidth/Height .
Dans certains cas, il est possible de le définir pour les noeuds non-Root, si les noeuds sont exposés comme une propriété.
Ne le faites que si vous avez une raison de le faire (de nombreux composants officiels sont fournis sans aucune raison).
Lorsque vous utilisez un composant, définissez width/height .

Answer 2

Je n'ai pas la réponse définitive mais je peux vous dire ce que j'ai découvert. Premièrement, à partir de la documentation :

implicitWidth : réel

Définit la largeur ou la hauteur naturelle de l'élément si aucune largeur ou hauteur n'est spécifiée.

La taille implicite par défaut de la plupart des éléments est 0x0. ont une taille implicite inhérente qui ne peut être remplacée, par exemple exemple, Image y Text .

pero moins informatif pour la largeur :

largeur

Définit la position et la taille de l'élément.

El width y height reflètent la taille réelle de l'élément dans la scène. La taille implicite est une sorte de propriété inhérente à l'objet lui-même. 1

Je les utilise comme suit : Lorsque je crée un nouvel élément et qu'il peut être redimensionné, je fixe une taille implicite à l'intérieur de l'objet 2 . Lorsque j'utilise l'objet, je fixe souvent la taille réelle de manière explicite. de l'extérieur .

La taille implicite d'un objet peut être remplacée par la hauteur et la largeur.

un exemple : 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 exemple : MaFenêtre.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) Pour certains éléments, comme le texte, la hauteur implicite dépend de la largeur (non implicite).<br>2) La taille implicite dépend généralement de la taille implicite de ses enfants.}

Answer 3

La taille implicite est censée être utilisée pour calculer la taille d'un élément en fonction de son contenu. Alors que le paramètre width o height sur un élément parent peut affecter la taille de ses enfants ; cela ne devrait jamais être le cas, lorsque vous définissez une taille implicite.

Règle d'or

La taille implicite ne doit être que "remontée", c'est-à-dire que les enfants ne doivent jamais chercher la taille implicite de leur parent pour calculer leur propre taille implicite. taille implicite, et aucun parent ne doit essayer de forcer la taille implicite de ses enfants.

Si vous essayez de mettre width sur un composant similaire à la mise en page, qui calcule initialement sa largeur à partir de l'élément width (plutôt que implicitWidth ) de son élément enfant et que cet enfant est affecté par la taille d'un parent, vous vous retrouveriez avec une boucle de liaison.

C'est la raison pour laquelle cette propriété existe - pour briser les dépendances cycliques lors du calcul de la taille d'un élément en fonction de son contenu.