QML: set width based on left/right anchors of other Items - qt

Question

How do I set the width of a QML item based on the values of other items' anchors.left and anchors.right? Here is an example of what I want to do:
Rectangle {
width: 400
height: 400
Rectangle {
width: parent.right - parent.left
height: parent.height
}
}
Obviously, this is only a simple example because I could just use width: parent.width, but that will not work in general. For instance, if the two anchors are on different items:
Rectangle {
width: 400
height: 400
Rectangle {
anchors.left: parent.left
width: other.left - parent.left
height: parent.height
}
Rectangle {
id: other
anchors.right: parent.right
width: 123
height: parent.height
}
}

Answer 1

I found a solution, though it is a bit messy. For the following code that does not work:
Rectangle {
width: 400
height: 400
Rectangle {
id: other1
anchors.left: parent.left
width: 43
height: parent.height
}
Rectangle {
anchors.left: other1.right
width: other2.left - other1.right
height: parent.height
}
Rectangle {
id: other2
anchors.right: parent.right
width: 123
height: parent.height
}
}
Replace other1.right with other1.x + other1.width and other2.left with other2.x, which gives us:
Rectangle {
width: 400
height: 400
Rectangle {
id: other1
anchors.left: parent.left
width: 43
height: parent.height
}
Rectangle {
anchors.left: other1.right
width: other2.x - (other1.x + other1.width)
height: parent.height
}
Rectangle {
id: other2
anchors.right: parent.right
width: 123
height: parent.height
}
}

Answer 2

You are adding unnecessary complexity to a simple problem.
As long as you want to anchor the item to its siblings or direct parent, you don't need to manually calculate the width of your item.
See Positioning with Anchors.
Just anchor the left and right values:
Rectangle {
width: 400
height: 400
Rectangle {
id: other1
anchors.left: parent.left
width: 43
height: parent.height
}
Rectangle {
anchors.left: other1.right
anchors.right: other2.left
// width: other2.x - (other1.x + other1.width) // absolutely not necessary
height: parent.height
}
Rectangle {
id: other2
anchors.right: parent.right
width: 123
height: parent.height
}
}