Item in a Column, position problem

luca

Hi all,
I have a column like this:
@
...
...
Column
{
anchors.fill: parent
Text
{
text: "aaaa"
anchors.horizontalCenter: parent.horizontalCenter
}
Text
{
text: "bbbb"
anchors.horizontalCenter: parent.horizontalCenter
}
Text
{
text: "cccc"
anchors.horizontalCenter: parent.horizontalCenter
}
}
...
...
@

and when running I get this:
@
aaaa
bbbb
cccc
@

now if I use Item:
@
...
...
Column
{
anchors.fill: parent
Text
{
text: "aaaa"
anchors.horizontalCenter: parent.horizontalCenter
}
Text
{
text: "bbbb"
anchors.horizontalCenter: parent.horizontalCenter
}
Item
{
Text
{
text: "cccc"
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
...
...
@

I get:

@
aaaa
bbbb
@
and "cccc" is over "aaaa" .

It seems like "cccc" isn't positioned after "bbbb" in the column.

luca

Now I tried with:
@
...
...
Column
{
anchors.fill: parent
Text
{
id: aaaa
text: "aaaa"
anchors.horizontalCenter: parent.horizontalCenter
}
Text
{
id: bbbb
text: "bbbb"
anchors.horizontalCenter: parent.horizontalCenter
}
Item
{
width: parent.width
height: bbbb.height
Text
{
text: "cccc"
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
...
...

@

and I get the right column:
@
aaaa
bbbb
cccc
@

should it be a bug?

X-Krys

I had this issue too, and its looks like a bug for me since even if the size of the third item is 0 in your first example it should be positioned just after "bbbb".

Here is another example that demonstrates this bug :
@
...
...
Column
{
anchors.fill: parent
Text
{
text: "aaaa"
anchors.horizontalCenter: parent.horizontalCenter
}
Item
{
Text
{
text: "bbbb"
anchors.horizontalCenter: parent.horizontalCenter
}
}
Text
{
text: "cccc"
anchors.horizontalCenter: parent.horizontalCenter
}
}
...
...
@

The behavior will be : "bbbb" over "aaaa"
But I would expect it to be : "bbbb" after "aaaa" and under "cccc"

jackyang

I don't think it is a bug.
The Item inside the Column doesn't give it the width and height. So x, y of Item should be aligned with Column's. The Item's child Text anchors to its parent, but the parent doesn't has a width size to let it be on the center of parent's width.
So the resolve will be like below :
@
bb aaaa
cccc
@
Text element of bbbb present wrong size and wrong position.

luca

[quote author="jackyang" date="1324518350"]I don't think it is a bug.
The Item inside the Column doesn't give it the width and height. So x, y of Item should be aligned with Column's. The Item's child Text anchors to its parent, but the parent doesn't has a width size to let it be on the center of parent's width.
So the resolve will be like below :
@
bb aaaa
cccc
@
Text element of bbbb present wrong size and wrong position.[/quote]

Why doesn't Item take its child size?

X-Krys

[quote author="jackyang" date="1324518350"]I don't think it is a bug.
The Item inside the Column doesn't give it the width and height. So x, y of Item should be aligned with Column's. The Item's child Text anchors to its parent, but the parent doesn't has a width size to let it be on the center of parent's width.
So the resolve will be like below :
@
bb aaaa
cccc
@
Text element of bbbb present wrong size and wrong position.[/quote]

I agree for the horizontal alignment but I think the problem here is just relative to the positionning on the vertical axe. So even it the Item doesn't have a height size it should positioned like:

@
aaaa
bb cccc
@

X-Krys

[quote author="Luca" date="1324540304"]
[quote author="jackyang" date="1324518350"]I don't think it is a bug.
The Item inside the Column doesn't give it the width and height. So x, y of Item should be aligned with Column's. The Item's child Text anchors to its parent, but the parent doesn't has a width size to let it be on the center of parent's width.
So the resolve will be like below :
@
bb aaaa
cccc
@
Text element of bbbb present wrong size and wrong position.[/quote]

Why doesn't Item take its child size?
[/quote]

The size of an Item and its contents is not linked by default.

You can achieve this with the childrenRect property like that :

@
...

            Item
            {
                width: childrenRect.width
                height: childrenRect.height

                Text
                {
                    text: "bbbb"
                }
            }

...
@

The size of the item is then bound to the size of its content.