Specifying both size and implicit size in QML

Puya

Hi,

What are the effects of specifying both height/width and implicitHeight/implicitWidth? I have seen this done in some of the examples, for example this one:
qtdeclarative/examples/quick/shared/CheckBox.qml

My interpretation of the documentation is that if no size is specified, then implicit size is used. And if size IS specified, then it is overwritten if the user of the component also specifies the size.

So what would be the effect of specifying size, when implicit size is already specified? Can you show me an example usage were having / not having the size would make a difference?

Puya

From Qt example code:
https://code.woboq.org/qt5/qtdeclarative/examples/quick/shared/Button.qml.html
https://code.woboq.org/qt5/qtdeclarative/examples/quick/shared/CheckBox.qml.html

GrecKo

Doing

width: implicitWidth
height: implicitHeight

like in the example you mentionned is useless. Like you said the width and height will be the same as their implicit counterpart if not specified, that's a feature of QQuickItem/Item.

Generally you don't want to specify the explicit size (with width/height or anchors) of a root Item.
My rule of thumb is setting the implicit size of parent based on the implicit sizes of it children and the explicit size of children based on the explicit size of its parent.

This allow to specify a sensible default size for a component with children that still can be resizable.

Example to illustrate this :

Rectangle {
    implicitWidth: textItem.implicitWidth
    implicitHeight: textItem.implicitHeight
    Text {
        id: textItem
        width: parent.width
        height: parent.height
        // or anchors.fill: parent
    }
}

Puya

Thanks @GrecKo . An example with both size and implicit size for inner items of a component for anyone else who is interested:

// GreenFrame.qml
import QtQuick 2.15
Item {
    id: root
    implicitHeight: frame.implicitHeight
    implicitWidth: frame.implicitWidth
    Rectangle {
        id: frame
        color: "green"
        height: root.height
        width: root.width
        // or equivalently anchors.fill: parent
        implicitHeight: centerImage.implicitHeight * 2
        implicitWidth: centerImage.implicitWidth * 2
        Image {
            id: centerImage
            source: "image.png"
            height: frame.height / 2
            width: frame.width / 2
            anchors.centerIn: parent
            fillMode: Image.Stretch
        }
    }
}