QML how to use a dynamic topmargin correctly

I want to enlarge or reduce a button depending on the presence of an icon. The buttons are in a rectangle and I would like to realize it with the top margin, because the buttons also have rounded corners and only the top corners should be visible.

The goal is a representation like this

If I set the topmargin fix to 10 it looks good

If I calculate the value depending on whether an icon is present, the buttons without icon are correctly displayed deeper, but the buttons with icon sit too deep

Like the picture before the topmargin for the icon buttons is 10 but they are moved lower.

Any idea - the code for display.qml is reduced and does not show all the properties. if they are needed i will add them.

FooterButton.qml

Rectangle {
    id: button
    property string p_identity
    property string p_icon
    property string p_source
    property string p_backgroundColor
    property int p_topmargin: 10
    height: 70
    width: 80
    Layout.leftMargin: 25
    Layout.topMargin: p_topmargin
    color: p_backgroundColor
    radius: 10
    border.color: "black"
    border.width: 0

    Connections { 
        target: m_screen; 
        onScreenChanged: { 
            p_icon = m_screen.getButtonIcon(p_identity)
            p_source = (!p_icon || p_icon.length === 0) ? "" : "image://iconprovider/" + p_icon)
           // p_topmargin = 10
            p_topmargin = (!p_icon || p_icon.length === 0) ? 45 : 10
        } 
    }

Footer.qml

Item {
    id: footer
    property string p_footerBackgroundColor: "yellow" //m_config.getColor(Colors.FooterBackground)
    property string p_buttonBackgroundColor: m_config.getColor(Colors.ButtonBackground)
    Rectangle { anchors.fill: parent; x: footer.x; y: footer.y; width: footer.width; height: footer.height; color: p_footerBackgroundColor
        RowLayout{ anchors.fill: parent
            FooterButton{ p_identity: "FB1"; p_backgroundColor: p_buttonBackgroundColor }
            FooterButton{ p_identity: "FB2"; p_backgroundColor: p_buttonBackgroundColor }
            FooterButton{ p_identity: "FB3"; p_backgroundColor: p_buttonBackgroundColor }
            FooterButton{ p_identity: "FB4"; p_backgroundColor: p_buttonBackgroundColor }
            FooterButton{ p_identity: "FB5"; p_backgroundColor: p_buttonBackgroundColor }
        }
    }

Display.qml

Item {
    id: display


    Header { x: 0; y: 0; width: display.width; height: p_headerHeight; visible: p_headerVisible; color: p_backgroundColor; p_buttonColor: p_buttonBackgroundColor  }
    Left { x: 0; y: p_headerHeight; width: p_borderWidth; height: p_contentHeight; color: "blue" }
    Right { x: display.width - p_encoderWidth; y: p_headerHeight; width: p_encoderWidth; height: p_contentHeight; p_color: "magenta" }
    Footer { x: 0; y: display.height - p_footerHeight; width: display.width; height: p_footerHeight; visible: p_footerVisible }

Solution

just making sure you're not over-engineering your problem, but, I want to point out that the standard Button has both icon support and the ability to change the background to a rounded Rectangle:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    footer: Frame {
        background: Rectangle {
            color: "yellow"
        }
        RowLayout {
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: 20
            AppButton {
                //icon.source: "hammer.svg"
            }
            AppButton {
                //icon.source: "hammer.svg"
            }
            AppButton {
                icon.source: "hammer.svg"
            }
            AppButton {
                //icon.source: "hammer.svg"
            }
            AppButton {
                icon.source: "check.svg"
            }
        }
    }
}

// AppButton.qml
import QtQuick
import QtQuick.Controls
Button {
    width: 100
    height: 100
    background: Rectangle {
        color: pressed ? palette.mid : palette.button
        radius: 20
    }
    icon.source: "blank.svg"
    icon.width: 64
    icon.height: 64
}

// blank.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
</svg>

// hammer.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M29.64 25.462c-1.186-1.62-3.535-4.176-6.254-7.136-2.657-2.893-5.671-6.173-8.066-9.11a3.883 3.883 0 0 1-1.044-1.531 6.899 6.899 0 0 0-.215-1.271 3.427 3.427 0 0 1-.08-.348 7.985 7.985 0 0 1 3.153-1.61 25.43 25.43 0 0 1 4.095-.527l1.08-.043-1.14-1.239-.148-.035a24.293 24.293 0 0 0-5.123-.606A13.096 13.096 0 0 0 7.53 4.82c-.225.2-1.433 1.478-1.338 2.334.078.73-.212.949-.792 1.383a8.35 8.35 0 0 0-.558.444c-1.468-.125-1.92.252-3.014 1.16l-.39.32-.095.105a1.472 1.472 0 0 0-.277 1.24 7.214 7.214 0 0 0 2.294 3.029 2.25 2.25 0 0 0 2.404-.483 18.003 18.003 0 0 0 1.577-2.018 2.67 2.67 0 0 1 1.633-1.26 12.815 12.815 0 0 1 2.588.88c.11.046.2.077.277.104.05.018.111.032.116.036 4.108 5.004 6.896 8.936 8.93 11.807 1.401 1.976 2.413 3.404 3.3 4.412l.912 1.038a1.935 1.935 0 0 0 1.362.651l.078.001a1.939 1.939 0 0 0 1.334-.534l1.548-1.486a1.927 1.927 0 0 0 .22-2.52zM12.059 11.028l-.029.034c-.03-.012-.052-.018-.088-.033a10.285 10.285 0 0 0-3-.954 3.577 3.577 0 0 0-2.454 1.738 21.031 21.031 0 0 1-1.375 1.786c-.605.434-.936.519-1.313.338a6.931 6.931 0 0 1-1.792-2.446.85.85 0 0 1 .125-.305l.334-.275c1.045-.867 1.228-1.021 2.299-.933a1.02 1.02 0 0 0 .738-.247A7.72 7.72 0 0 1 6 9.337a2.27 2.27 0 0 0 1.186-2.288A3.785 3.785 0 0 1 8.19 5.571a12.232 12.232 0 0 1 7.706-2.565 20.9 20.9 0 0 1 2.624.178c-.523.076-1.076.173-1.614.298A9.024 9.024 0 0 0 13.34 5.3a1.176 1.176 0 0 0-.25 1.356 5.831 5.831 0 0 1 .19 1.1 3.345 3.345 0 0 0 .842 1.625 9.48 9.48 0 0 0-.994.683 7.036 7.036 0 0 0-1.068.964zm16.668 16.234l-1.547 1.485a.945.945 0 0 1-.678.256.924.924 0 0 1-.652-.312l-.912-1.038c-.853-.97-1.905-2.452-3.236-4.33-2.018-2.848-4.78-6.742-8.838-11.696a6.433 6.433 0 0 1 .875-.772 8.145 8.145 0 0 1 .964-.66l.09-.05C17.14 13 20.06 16.182 22.65 19.001c2.7 2.939 5.032 5.477 6.184 7.051a.923.923 0 0 1-.106 1.209z"/><path fill="none" d="M0 0h32v32H0z"/></svg>

// check.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M13.5 22.142L7.59 16.42l.636-.636L13.5 20.87 26.721 7.8l.637.637z"/><path fill="none" d="M0 0h32v32H0z"/></svg>

You can Try it Online!