Search code examples
qmlanchorcenter

QML rectangle anchors.horizontalCenter not working

I want to align 5 rectangles (buttons) horizontally inside another rectangle. But the buttons start aligned left and not centered

enter image description here

FooterButton.qml

Rectangle {
    id: button
    property string p_identity
    property string p_icon
    property string p_source
    radius: 10
    anchors { top: parent.top; topMargin: 10; }

    Image { anchors.centerIn: parent; sourceSize.height: button.height * 0.7; source: p_source }
    MouseArea { anchors.fill: parent; onClicked: function(mouse) { m_mill.buttonClicked(p_identity) } }
}

Footer.qml

Rectangle { id: footer; color: "yellow"
    property string p_buttonColor: m_config.getColor(Colors.ButtonBackground)
    property int p_buttonHeight: 60 // m_config.getSize(Sizes.FooterButtonHeight)
    property int p_buttonWidth: 60 //m_config.getSize(Sizes.FooterButtonWidth)

    RowLayout{ anchors.fill: parent; anchors.horizontalCenter: parent.horizontalCenter
        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 }
    }
}
Solution

  • You used anchors.fill and anchors.horizontalCenter on the same RowLayout. Using both at the same time is contradicting. You either want to anchor to all the sides with anchors.fill: parent or you want to center it horizontal with anchors.horizontalCenter: parent.horizontalCenter.

    Have a look at this SO post.

    Here is an example which might do what you want:

    component FooterButton: Rectangle {
    id: button
    width: 60
    height: 60
    color: "gray"
    radius: 10
    anchors { top: parent.top; topMargin: 10; }
}

Rectangle {
    id: footer
    color: "yellow"
    anchors.fill: parent

    RowLayout {
        spacing: 20
        anchors.horizontalCenter: parent.horizontalCenter

        Repeater {
            model: 5

            FooterButton {}
        }
    }
}