QML how to use a dynamic topmargin correctly - qt

Question

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 }

Answer 1

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!