如何确定 Row {} 中组件的组合宽度？

Question

如何确定width中各成分的组合Row {}？

行本身width的 不起作用，因为我需要设置它的spacing:，并且使用此属性将产生循环错误。它也是一个活动属性，因此使用以下方式设置它：

Component.onCompleted{} 

也不够。

有什么建议么？

Answer 1

您为什么认为它不起作用？

以下代码片段对我来说可以正常工作：

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    id: root
    width: units.gu(100)
    height: units.gu(100)

    Row {
        id: row
        spacing: 2
        Rectangle { color: "red"; width: 50; height: 50 }
        Rectangle { color: "green"; width: 20; height: 50 }
        Rectangle { color: "blue"; width: 50; height: 20 }
    }

    Component.onCompleted: {
        console.log(row.width)
    }
}

我看到124控制台上显示 (50+2+20+2+50)。因此，行宽不仅提供了每个组合元素的宽度，还考虑了它们之间的间距。

如果需要合并元素的宽度而不需要间距，可以使用下面的方法：

console.log(row.width - (row.children.length - 1)*row.spacing)

更新：

为了仅获取行内组件的宽度，您需要遍历所有子项：

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    id: root
    width: units.gu(100)
    height: units.gu(100)

    Row {
        id: row
        spacing: 2
        Rectangle { color: "red"; width: 50; height: 50 }
        Rectangle { color: "green"; width: 20; height: 50 }
        Rectangle { color: "blue"; width: 50; height: 20 }

        property var children_width

        Component.onCompleted: {
            children_width = Qt.binding(function() { var i, w=0; for (i in children) {w += children[i].width}; return w });
        }

    }

    Component.onCompleted: {
        console.log(row.children_width)
    }
}

新的children_width属性值为120。