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 应该可以实现，但无论我尝试什么，组件都是从左边界开始布局。

- user42140

---

检查 RowLayout。它看起来像 Row 但具有更多的布局选项。 - Benjamin T

@BenjaminT 我也尝试过，但无法使组件对齐得像我想要的那样。 - user42140

好的，您要将Row放置在父容器中（anchors.fill: parent），同时将其居中对齐（anchors.horizontalCenter: parent.horizontalCenter）。这两者无法同时实现。如果您想将Row项目放置在其父容器的中心，请删除anchors.fill: parent。此外，您还应该设置Row的高度。我猜应该是height: parent.height。另外，我猜您还应该设置ToolButton的宽度。 - folibis

@folibis 你想把它写成答案，这样我就可以接受了吗？它完美地解决了问题。很抱歉由于我的低信誉度无法为您的评论点赞。 - user42140

Answer 1

如果您将行的对齐方式设置为父对象中心，然后使行的宽度调整为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"
                }
            }
        }
 }

- piper2200s

Answer 2

你在Row上设置了anchors.fill: parent，所以它自然会填充其父项。相反，你应该删除此设置，只在Row上设置height: parent.height。

- dobey

Answer 3

文档 引用：

由于行自动将其子项水平定位，因此在行中的子项不应设置其x位置或使用左、右、锚点.水平居中、填充或居中锚点来水平锚定自己。如果您需要执行这些操作，请考虑在不使用行的情况下定位项目。

行仅用于将其子项水平定位。没有任何“流”或居中。它是用于在行中自动定位，让您在需要执行该简单任务时排除锚点和边距定义内部项目。

但是，如果您需要更复杂的内容，则需要手动使用锚点和边距进行操作。例如，将项目居中并从中心向边缘展开可能如下所示：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
            id: toolbar
            color: "green"
            anchors.centerIn: parent

            height: 100
            width: parent.width

            Rectangle {
                id: toolbutton1
                height: parent.height
                anchors {
                    right: toolbutton2.left
                    margins: 20
                }
                width: 100
                color: "blue"
            }

            Rectangle {
                id: toolbutton2
                height: parent.height
                anchors {
                    right: parent.horizontalCenter
                    margins: 10
                }
                width: 100
                color: "magenta"
            }

            Rectangle {
                id: toolbutton3
                height: parent.height
                anchors {
                    left: parent.horizontalCenter
                    margins: 10
                }
                width: 100
                color: "red"
            }
            Rectangle {
                id: toolbutton4
                height: parent.height
                anchors {
                    left: toolbutton3.right
                    margins: 20
                }
                width: 100
                color: "yellow"
            }
     }
}

- Maxim Skvortsov