Question

我在对象布局方面遇到了一些问题。我需要的是创建2块文本项。第二块应该先跟随。这是我的代码：

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1

Window
{
    visible: true
    id: page
    Rectangle
    {
        id: contentRec
        anchors.fill: parent

        ColumnLayout
        {
            spacing: 16

            anchors.fill: contentRec
            anchors.margins: 16

            Rectangle
            {
                id: hlpRec
                color: "#fff"

                ColumnLayout
                {
                    anchors.fill: hlpRec
                    spacing: 8

                    Text
                    {
                        text: "Some text 1"
                        color: "#434D56"
                    }

                    Text
                    {
                        text: "Some text 1"
                    }

                    Text
                    {
                        text: "Some text 2"
                    }

                    Text
                    {
                        text: "Some text 3"
                    }

                    Text
                    {
                        text: "Some text 4"
                    }
                }
            }

            Rectangle
            {
                Layout.preferredHeight: 16
            }

            Rectangle
            {
                id: infoRec
                color: "#fff"

                ColumnLayout
                {
                    anchors.fill: infoRec
                    spacing: 8

                    Text
                    {
                         text: "Status text 1"
                    }

                    Text
                    {
                        text: "Status text 2"
                    }

                    Text
                    {
                        text: "Status text 3"
                    }
                }
            }
        }
    }
}

问题是第二个块首先重叠。我的代码出了什么问题？

Answer 1

您的两个内部ColumnLayout组件都设置为适合其父级，它们既没有定义宽度/高度也没有定义锚属性，因此它们的大小为零。由于那些Rectangle不会剪切其内容，因此您会看到项目重叠。

使用Column或ColumnLayout时，内容高度将根据您放入这些容器的内容计算得出。如果你正确地做到了，你可以构建非常灵活和聪明的布局，而无需跟踪个别高度。但是，您必须通过设置width属性或相应的锚点来指定其他维度。在Column和ColumnLayout的情况下，您希望＆＃34; snap＆＃34;组件的宽度以适合父级。同时，您可以保持高度不受约束，允许物品垂直生长。同样适用于Row和RowLayout，其中宽度将被计算，您必须指定一定的高度。

您案例中的解决方案可以基于ColumnLayout或Column。请注意，已删除hlpRec和infoRec，并设置了Column / ColumnLayout的锚点。

通过ColumnLayout：

import QtQuick 2.6
import QtQuick.Layouts 1.1

Rectangle {
    anchors.fill: parent

    ColumnLayout {
        spacing: 16

        anchors.fill: parent
        anchors.margins: 16

        ColumnLayout {
            anchors.left: parent.left
            anchors.right: parent.right
            spacing: 8

            Repeater {
                model: 5
                Text {
                    text: "top " + index
                }
            }
        }

        Rectangle {
            Layout.preferredHeight: 16
            anchors.left: parent.left
            anchors.right: parent.right
            color: "#ff00ff"
        }

        ColumnLayout {
            anchors.left: parent.left
            anchors.right: parent.right
            spacing: 8

            Repeater {
                model: 5
                Text {
                    text: "bottom " + index
                }
            }
        }
    }
}

通过Column：

import QtQuick 2.6

Rectangle {
    anchors.fill: parent

    Column {
        spacing: 16

        anchors.fill: parent
        anchors.margins: 16

        Column {
            anchors.left: parent.left
            anchors.right: parent.right
            spacing: 8

            Repeater {
                model: 5
                Text {
                    text: "top " + index
                }
            }
        }

        Rectangle {
            height: 16;
            anchors.left: parent.left
            anchors.right: parent.right
            color: "#ff00ff"
        }

        Column {
            anchors.left: parent.left
            anchors.right: parent.right
            spacing: 8

            Repeater {
                model: 5
                Text {
                    text: "bottom " + index
                }
            }
        }
    }
}

ColumnLayout会分别对内容项目进行中心处理，并使用窗口中可用的总高度，而Column将仅使用内容高度从上到下对齐所有元素。更改窗口高度时，您会注意到不同的行为。

如果Rectangle用于定义单个背景，您可以执行以下操作（使用基于Column的方法演示）：

import QtQuick 2.6

Rectangle {
    anchors.fill: parent

    Column {
        spacing: 16

        anchors.fill: parent
        anchors.margins: 16

        Rectangle {
            anchors.left: parent.left
            anchors.right: parent.right
            height: topColumn.height

            color: "#ff0000"

            Column {
                id: topColumn

                anchors.left: parent.left
                anchors.right: parent.right
                spacing: 8

                Repeater {
                    model: 5
                    Text {
                        text: "top " + index
                    }
                }
            }
        }

        Rectangle {
            height: 16;
            anchors.left: parent.left
            anchors.right: parent.right
            color: "#ff00ff"
        }

        Rectangle {
            anchors.left: parent.left
            anchors.right: parent.right
            height: bottomColumn.height

            color: "#0000ff"

            Column {
                id: bottomColumn

                anchors.left: parent.left
                anchors.right: parent.right
                spacing: 8

                Repeater {
                    model: 5
                    Text {
                        text: "bottom " + index
                    }
                }
            }
        }
    }
}

希望这有帮助！

正确的方法来布局2块物品

1 个答案: