拉伸元素以包含所有子元素答案

【问题标题】：Stretching element to contain all children拉伸元素以包含所有子元素
【发布时间】：2011-09-06 22:24:37
【问题描述】：

如何在QML 中自动拉伸元素以使其所有子元素都适合它？以及如何指定间距？例如，我想在文本周围有一个矩形。矩形应该有一些内部间距。

如果我写以下内容，则矩形的大小为 0,0。

Rectangle {
    color: "gray"
    anchors.centerIn: parent;

    Text {
        text: "Hello"
    }
}

如果我按照 How to make QML items to grow to fit contents? 中的建议尝试使用 Column 元素来修复它，那么我会在整个窗口/父级中获得一列，

Column {
    anchors.centerIn: parent

    Rectangle {
        color: "gray"
        anchors.fill: parent
    }

    Text {
        anchors.centerIn: parent
        text: "Hello"
    }
}

编辑：

我也尝试使用Flow 元素而不是Column，但随后我在整个窗口/父级中得到了一行。

【问题讨论】：

标签： qt qml

【解决方案1】：

我认为使用 chilrenRect 属性是不够的（正如 Thorbjørn Lindeijer 所建议的那样）。它不会自动考虑子（ren）元素的所有各种边距。如果后者发生变化，根矩形不会自动调整其大小。我个人提出了以下解决方案：

Rectangle {
    color: "white"
    implicitWidth: row.implicitWidth + extraLeft + extraRight
    implicitHeight: row.implicitHeight + extraTop + extraBottom
    
    property int extraMargin: row.anchors.margins ? row.anchors.margins : 0
    property int extraTop: row.anchors.topMargin ? row.anchors.topMargin : extraMargin
    property int extraBottom: row.anchors.bottomMargin ? row.anchors.bottomMargin : extraMargin
    property int extraLeft: row.anchors.leftMargin ? row.anchors.leftMargin : extraMargin
    property int extraRight: row.anchors.rightMargin ? row.anchors.rightMargin : extraMargin
    
    
    RowLayout {
        id: row
        spacing: 50
        anchors.fill:parent
        anchors.margins: 50
        anchors.leftMargin: 100
        
        Label {
            text: "hello"
        }
        Label {
            text: "world"
        }
    }
}

【讨论】：

【解决方案2】：

您可以为此使用childrenRect 属性：

import QtQuick 2.0

Rectangle {
    width: 320
    height: 200

    Rectangle {
        color: "BurlyWood"
        anchors.centerIn: parent
        width: childrenRect.width + 20
        height: childrenRect.height + 20

        Text {
            id: hello
            x: 10
            y: 10
            text: "Hello"
        }

        Text {
            anchors.left: hello.right
            anchors.leftMargin: 10
            anchors.top: hello.top
            text: "World"
        }
    }
}

但是，请注意，在其中一个直接子项中结合使用 childrenRect 和使用 anchors.centerIn: parent 会产生有关绑定循环的警告。

【讨论】：

main.qml:6: ReferenceError: childrenRect is not defined。问题是什么？ Qt 5.3、QtQuick 2.3
@ManuelSchneid3r 嗯，我无法重现您的问题。我刚刚用 Qt 5.5 尝试过，在将导入更改为 QtQuick 2.3 后使用qmlscene 运行上述代码。工作正常。
问题是我在Windowscope 中尝试过这个。在那里，childrenRect 没有定义。
啊，确实，因为Window 不是Item。所以我猜你需要使用一个显式的根项，它是窗口的子项。

【解决方案3】：

手动设置width 和height 可以，但有点难看：

Rectangle {
    color: "gray"
    width: label.width+20
    height: label.height+20
    anchors.centerIn: parent

    Text {
        id: label
        anchors.centerIn: parent
        text: "Hello"
    }
}

【讨论】：