Why do you think it does not work?
The following snippet of code works correctly for me:
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)
}
}
I see 124
displayed on the console (50+2+20+2+50). So the Row width gives you not only the width of each combined elements but also takes into account the spacing between them.
If you need the width of the combined elements without the spacing, you can use the following method:
console.log(row.width - (row.children.length - 1)*row.spacing)
Update:
To only get the width of the components within the row you need to iterate over all the children:
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)
}
}
The new children_width
property value is 120
.