qml 使用 Row 在中心对齐组件答案

【问题标题】：qml using Row to align components in the centerqml 使用 Row 在中心对齐组件
【发布时间】：2017-11-01 12:52:17
【问题描述】：

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

【问题讨论】：

检查RowLayout。它看起来像Row，但有更多的布局选项。
@BenjaminT 也试过了，但无法让它们按照我的意愿对齐组件。
好的，您正试图将您的 Row 放置在父级 (anchors.fill: parent) 中，同时在父级内部居中 (anchors.horizontalCenter: parent.horizontalCenter)。那只是不能一起工作。如果您想将 Row 项目放在其父项的中心，只需删除 anchors.fill: parent。您还应该设置行的高度。我想应该是height: parent.height。另外我想你应该设置你的宽度 ToolButtons
@folibis 你想把它写成答案以便我接受吗？它工作得很好。抱歉，由于我的低街信誉，无法支持您的评论。

标签： qt qml qt-quick qtquickcontrols

【解决方案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"
                }
            }
        }
 }

【讨论】：

【解决方案2】：

您已经在Row 上设置了anchors.fill: parent，因此它当然会填充其父级。相反，您应该删除它，并且只在 Row 上设置 height: parent.height。

【讨论】：

【解决方案3】：

Documentation引用：

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

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

但如果您需要更复杂的东西，则需要手动使用锚点和边距。例如。将项目居中并将它们从中心扩展到边缘可能如下所示：

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"
            }
     }
}

【讨论】：