QML中Layout.topMargin生效异常：需设置两倍值才完全移动元素

我尝试用Layout.topMargin在外部Rectangle中移动内部FooterButton矩形，外部Rectangle与内部FooterButton的高度均为80，但出现以下异常情况：

• 当Layout.topMargin设为0时，内部矩形完整显示；
• 当设置为80时，本该完全移出的内部矩形仍显示一半；
• 仅当设置为160（即两倍高度）时，内部矩形才完全移出。

相关代码 #

Footer.qml #

Rectangle { id: footer; color: "lightgrey"
    property string p_buttonColor: "grey"
    property int p_buttonHeight: 80 
    property int p_buttonWidth: 80
    height: 80
    width: 80           
    Layout.preferredHeight: height
    Layout.preferredWidth: width
    RowLayout{ anchors.centerIn: parent 
        FooterButton{ p_identity: "FB1"; height: p_buttonHeight; width: p_buttonWidth; color: p_buttonColor }
        FooterButton{ p_identity: "FB2"; height: p_buttonHeight; width: p_buttonWidth; color: p_buttonColor }
        FooterButton{ p_identity: "FB3"; height: p_buttonHeight; width: p_buttonWidth; color: p_buttonColor }
        FooterButton{ p_identity: "FB4"; height: p_buttonHeight; width: p_buttonWidth; color: p_buttonColor }
        FooterButton{ p_identity: "FB5"; height: p_buttonHeight; width: p_buttonWidth; color: p_buttonColor }
    }
}

FooterButton.qml #

Rectangle {
    id: button
    height: 80
    property string p_identity
    property string p_icon
    property string p_source
    Layout.preferredHeight: height
    Layout.preferredWidth: width
    radius: 10
    Layout.topMargin: 80
    Image { anchors.centerIn: parent; sourceSize.height: button.height * 0.7; source: p_source }
}

内容的提问来源于stack exchange，提问作者user2377283