qt - 布局 2 block 元素的正确方法

Question

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

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

问题是第二个 block 首先重叠。我的代码有什么问题吗？

Answer 1

你们的内心ColumnLayout组件被设置为适合其父级，而父级既没有定义宽度/高度也没有定义 anchor 属性，因此它们的大小为零。因为那些Rectangle不要剪切它们的内容，您会看到项目重叠。

使用 Column 时或ColumnLayout ，内容高度将根据您放入这些容器中的内容来计算。如果你做得正确，你可以构建非常灵活和巧妙的布局，而无需跟踪个人高度。但是，您必须通过设置宽度属性或适当的 anchor 来指定其他尺寸。如果是Column和 ColumnLayout您想要“捕捉”组件的宽度以适合父级。同时，您可以不受高度限制，允许项目垂直增长。 Row 也是如此和 RowLayout将计算宽度，并且您必须指定一定的高度。

您的情况的解决方案可以基于 ColumnLayout或Column 。请注意，hlpRec 和 infoRec 已被删除，并且 Column 的 anchor 已被删除。/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 s 用于定义单独的背景，您可以执行类似的操作(使用基于 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
                    }
                }
            }
        }
    }
}

希望这有帮助!