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

您已经在anchors.fill: parent上设置了Row，所以它当然会填充其父级。相反，您应该删除它，而仅在行上设置height: parent.height。

Answer 2

Documentation引用：

由于行自动将其子项水平放置，因此，行中的子项不应设置其x位置，也不应使用left，right，anchors.horizontalCenter，fill或centerIn锚点水平锚定自身。如果您需要执行这些操作，请考虑在不使用行的情况下放置项目。

行仅用于水平放置其孩子。没有任何“流动”或居中。它用于连续自动定位，可让您在需要执行此简单任务时排除项目中锚点和边距的定义。

但是，如果您需要更复杂的内容，则需要使用锚点和边距手动进行。例如。将项目居中并将其从中心散布到边缘看起来像这样：

pip3 install opencv-python

Answer 3

如果将“行”的路线设置为在父对象中居中，然后将“行”的宽度调整为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"
                }
            }
        }
 }

qml使用Row来对齐中心的组件

3 个答案: