qt - qml 使用 Row 在中心对齐组件

Question

我正在使用 Row在 Rectangle 上布置一些按钮这是我的自定义工具栏实现。问题是无论我做什么，组件总是从左边对齐。我希望它们与行的中心对齐并向外流向边缘。代码如下所示:

Rectangle {
        id: toolbar
        color: "green"
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        height: 100

        Row
        {
            anchors.fill: parent                
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: 60

            ToolButton {
                height: parent.height
                Image {
                    anchors.verticalCenter: parent.verticalCenter
                    source: "../images/image.png"
                }
            }

            ToolButton {
                height: parent.height
                Image {
                    anchors.verticalCenter: parent.verticalCenter
                    source: "../images/image.png"
                }
            }
        }
 }

我的按钮总是从行的左侧开始布置。相反，我想让它们相对于工具栏的中心布置。我想指定这一行 anchors.horizontalCenter: parent.horizontalCenter应该实现这一点，但无论我尝试什么，组件都是从左边界布置的。

Answer 1

如果您将 Row 的对齐方式设置为父对象的中心，然后将 Row 的宽度调整为 childrenRect 的宽度，那么您可以让项目从对象的中心展开。注意:您可能需要设置 ToolButton 的宽度，以便 childrenRect 填充其宽度值。

   Rectangle {
        id: toolbar
        color: "green"
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        height: 100

        Row
        {
            anchors{
                horizontalCenter: parent.horizontalCenter
                verticalCenter: parent.verticalCenter
            }
            height: parent.height
            width: childrenRect.width
            spacing: 60

            ToolButton {
                height: parent.height
                width: 50
                Image {
                    anchors.verticalCenter: parent.verticalCenter
                    source: "../images/image.png"
                }
            }

            ToolButton {
                height: parent.height
                width: 50
                Image {
                    anchors.verticalCenter: parent.verticalCenter
                    source: "../images/image.png"
                }
            }
        }
 }