implicitHeight works differently in different controls

imironchik

In main QML I have ApplicationWindow with header

    header: ToolBar {
        id: toolBar
        implicitHeight: minimumCtrlHeight

        RowLayout {
            anchors.fill: parent

            ToolButton {
                id: backBtn
                onClicked: qmlCppSignals.returnBack()
                enabled: stackView.keyBackEnabled
                implicitWidth: parent.height
                implicitHeight: implicitWidth

                Image {
                    id: backBtnImg
                    source: backBtn.enabled ? "qrc:/img/back-enabled_48x48.png" :
                        "qrc:/img/back-disabled_48x48.png"
                    width: parent.width - minimumCtrlHeight / 4
                    height: parent.height - minimumCtrlHeight / 4
                    anchors.centerIn: parent
                }
            }

            Label {
                text: qsTr( "Stock" )
                horizontalAlignment: Qt.AlignHCenter
                verticalAlignment: Qt.AlignVCenter
                Layout.fillWidth: true
            }

            ToolButton {
                id: menuButton
                onClicked: menu.open()
                enabled: true
                implicitHeight: parent.height
                implicitWidth: implicitHeight

                Image {
                    id: menuBtnImg
                    width: parent.width - minimumCtrlHeight / 4
                    height: parent.height - minimumCtrlHeight / 4
                    anchors.centerIn: parent
                    source: enabled ? "qrc:/img/menu-enabled_48x48.png" :
                        "qrc:/img/menu-disabled_48x48.png"
                }
            }
        }
    }

Its implicit height set to minimumCtrlHeight, what is Screen.pixelDensity * 8. Ok, on Android I see 8 mm, fine.

In the application I have controls with implicitHeight set to minimumCtrlHeight, for example,

        Grid {
            columns: 3
            rowSpacing: 20
            columnSpacing: 20
            verticalItemAlignment: Grid.AlignVCenter
            horizontalItemAlignment: Grid.AlignLeft

            Text {
                text: qsTr( "Port" )
            }

            SpinBox {
                id: portField
                editable: true
                from: 1
                to: 65535
                value: connectScreen.port
                textFromValue: function( value ) {
                   return value;
                }
                implicitHeight: appWindow.minimumCtrlHeight
                implicitWidth: pwdField.width
                //up.indicator.implicitWidth: appWindow.minimumCtrlHeight
                //down.indicator.implicitWidth: appWindow.minimumCtrlHeight
            }

            Rectangle {
                width: 1
                height: 1
            }

            Text {
                text: qsTr( "Password" )
                id: pwdText
            }

            TextField {
                id: pwdField
                placeholderText: qsTr( "Password" )
                leftPadding: appWindow.minimumCtrlHeight / 3
                echoMode: TextInput.Password
                text: connectScreen.pwd
                selectByMouse: true
                mouseSelectionMode: TextInput.SelectCharacters
                implicitHeight: appWindow.minimumCtrlHeight
                implicitWidth: content.width - 40 - implicitHeight - pwdText.width
                verticalAlignment: TextInput.AlignVCenter
            }

            Button {
                id: showHide
                checkable: true
                checked: false
                width: height
                height: appWindow.minimumCtrlHeight
                implicitHeight: height
                implicitWidth: height

                Image {
                    id: img
                    width: parent.width - minimumCtrlHeight / 4
                    height: parent.height - minimumCtrlHeight / 4
                    anchors.centerIn: parent
                    source: "qrc:/img/layer-visible-on_48x48.png"
                }

                onClicked: {
                    if( checked ) {
                        img.source = "qrc:/img/layer-visible-off_48x48.png"
                        pwdField.echoMode = TextInput.Normal
                    } else {
                        img.source = "qrc:/img/layer-visible-on_48x48.png"
                        pwdField.echoMode = TextInput.Password
                    }
                }
            }

            Rectangle {
                width: 1
                height: 1
            }

            Button {
                id: connectBtn
                text: qsTr( "Connect" )
                implicitHeight: appWindow.minimumCtrlHeight
                implicitWidth: pwdField.width

                onClicked: {
                    showHide.checked = false
                    pwdField.echoMode = TextInput.Password
                    qmlCppSignals.connectRequest( pwdField.text, portField.value )
                }
            }

            Rectangle {
                width: 1
                height: 1
            }
        }

And controls are with height less than 8 mm. Look at screenshot.

Screenshot

Why it's so? How can I fix it?

imironchik

Thanks to Mitch Curtis. He answered me:

However, it's working as expected: the size of the Button is as you requested. However, because the Material style Button uses positive insets for the elevation drop shadow effect, the background is pushed inwards:

https://doc.qt.io/qt-6/qml-qtquick-controls2-control.html#control-layout

Oh, right, I forgot to mention the solution: set topInset and bottomInset to 0.