Column's height not calculated properly when its children use anchors?

[ivoryz]

@
Column {
Rectangle { width: 10; height: 10 }
Rectangle {
anchors { left: parent.left; right: parent.right }
height: 10
}
Component.onCompleted: console.log("height:", height)
}
@

Output:
height: 10

I expected 20 here...
Why the horizontal anchoring affects the column's height?

[dmcr]

Actually the anchor modify "visually" the aspect of your Component, but does not change the values of the with and height properties.
This could be disturbing first : (Specially for Text element for myself), but after some time your do with it.
In your case this : @width : parent.width
height : parent.height@ seems all right!

[ivoryz]

Thanks for the hint. But I did try using parent.width and it did not help:
@
Column {
Rectangle { id: rect1; width: 10; height: 10 }
Rectangle {
id: rect2
width: parent.width
height: 10
}
Component.onCompleted: console.log("height:", height)
}
@

still outputs "height: 10"
It gives 20 if I replace "width: parent.width" with "width: rect1.width", though. But, if I had many rectangles in the column then I would have to iterate through all of them in order to find their maximum width (hence the width of the Column, I assume). I want to avoid such a procedure and make things simple. The final goal is to have the width of the rect2 match the width of the column regardless of how many items are present in it, and be able to get the correct height of this Column.
Here is the full story: I am using the VisualItemModel like so:
@
VisualItemModel {
id: itemModel
Column {
/* Some UI here stacked vertically*/
}
Column {
/* Some other UI stacked vertically
}
...
}
@

which is then used in
@
ListView {
model: itemModel
orientation: ListView.Horizontal
snapMode: ListView.SnapOneItem // Only one Column from itemModel is visible in the ListView at a time
...
Component.onCompleted: {
/* Iterate through ListView's contentItem.children (Columns), find the maximum Column height/width and set these max values as width/height for the ListView*/
}
}
@

So, in order to set the height/width of the ListView I need to know the maximum height/width of the Columns in the VisualItemModel (NOTE: I specifically need the width/height of the ListView be based on the maximum values of height/width obtained from the Columns). But, having rect2 defined like above I won't get correct values for its Column's height. Maybe what I want to achieve (ListView that accomodates its children based on their max sizes) can be done easier (any suggestions?), but still the question posed in the title of this post holds for me...

[dmcr]

Actually i read quite fast your post.
In fact, the width of your column is undefined as it stands.
you had to set : idColumn.with = ....

and what your intend to do is all right... if you really needs it.
However in many cases you don't need it hopefully.

[ivoryz]

I think I found a workaround for this issue:
instead of "width: parent.width" in rect2 I used "width: parent.childrenRect.width", and in this case the Column's height was correct: 20.
Btw, similar behaviour can be also seen when Rectangle is used instead of the Column item:
@
Rectangle {
width: childrenRect.width
height: childrenRect.height
Rectangle { width: 10; height: 10 }
Rectangle {
anchors { left: parent.left; right: parent.right }
height: 10
}
Component.onCompleted: console.log("height:", height)
}
@

Like with the Column, it outputs "height: 10". So, it seems like this is a common behaviour when the parent's width is not explicitelyt defined...
So, instead of anchoring, one can use "width: parent.childrenRect.width" to fix it, while leaving the parent's width undefined.