Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Specifying both size and implicit size in QML



  • 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?




  • Qt Champions 2018

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


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

Log in to reply