[solved] Combine Listitem, Column and Row... What am I doing wrong? :S

Ices_Eyes

Hi all guys...
I'm having a problem that cannot solve, and I do not understand waht I am doing wrong or what I am losing... :) And yes, I'm a newbie on Qt and QML, still trying to understand how the things work :P

So, the problem is this one: I have a ListItem, that should contains two rows. What i should obtain is something like this:
!http://img152.imageshack.us/img152/182/layoutx.png(Layout)!

The part in blue is an image. Parts on red are texts.
So the first of the two rows contains an image, with width 1/5 the entire space available, and a text with the remaining width. The second row contains two texts, both 50% of the entire size.

The code I use, simplified, is this one, but cannot make it works good. Or I obtain some errors for binding or fill loop, or I do not obtain the desired visualization.
At the end what I should have is that the first row has an height of the maximum between the image height and the text height, while the second row the one of the two texts. And the column and list item should contains all...

Any advice? :) Any kind of help is definetly welcome :P

Thanks anyone who also just read this! :P

@ListItem {
id: newsListItem
width: parent.width
subItemIndicator: true
height: itemMainInfos.height + itemSecInfos.height + itemDesc.spacing

Column {
    id: itemDesc

    anchors {
        fill: parent
        leftMargin: 10
        rightMargin: 30
    }

    spacing: 10

    Row {
        id: itemMainInfos

        width: parent.width

        spacing: 10

        Image {
            id: thumbnailImage
            width: parent.width / 5
            anchors.verticalCenter: parent.verticalCenter
            ...
        }
        Text {
            id: newsTitle
            width: parent.width - thumbnailImage.width - itemMainInfos.spacing
            ...
        }
    }
    Row {
        id: itemSecInfos

        width: parent.width

        Text {
            id: newsAuthor
            width: (parent.width / 2) - 5
            ...
        }
        Text {
            width: (parent.width / 2) - 5
            ...
        }
    }
}

}@

dicksonleong

Not fully understand of what you are trying to achieve, and can't view the screenshot you provided, but in the code you should set the height for both of your Row so that can be laid out by the Column nicely

@Row{
height: childrenRect.height
}@

Ices_Eyes

Sigh... Adding this it says
@QML Row: Binding loop detected for property "height"@

:(

I must have done some big mistake here :P

PS: image link here: http://img152.imageshack.us/img152/182/layoutx.png

dicksonleong

Still can't view the image (domain unregistered)

You getting binding loop for height because the thumbnailImage is anchors to its parent's vertical centre. Try remove that line. Or, if you prefer, state a int value for height for both of your Row. If you don't specific height for the Row it will default to 0 (means will not lay out by Column)

Ices_Eyes

Damn... This is becoming "difficult" :P

Ok, for the image, I try to depict it here: I would like to have:

@ Texttexttexttexttexttext
|----| texttexttexttexttexttext
|PICT| texttexttexttexttexttext
|____| texttexttexttexttexttext
texttexttexttexttexttext

some_left_text some_right_text
@

Now, the Pict is 70x70px, but the text has various dimensions (it coul be 2/3/4/5 rows), so i cannot define a fixed size, and e what I would like to have there is a "Row" with an height of the max between the text and the pics. On the other hand, the 2 text on the bottoms are of just one row, so coul be possible to determine thir height if needed... :)

Bomb3rman

Hi,

is this what you want to achieve?

@Rectangle {
width: 360
height: 360

Column {
    id: itemDesc

    anchors {
        fill: parent
        leftMargin: 10
        rightMargin: 30
    }

    spacing: 10

    Row {
        id: itemMainInfos

        width: parent.width
        height:Math.max(thumbnailImage.height,newsTitle.height)

        spacing: 10

        Rectangle {
            id: thumbnailImage
            width: parent.width / 5
            height: width
            color: "blue"
            anchors.verticalCenter: parent.verticalCenter
        }
        Text {
            id: newsTitle
            width: parent.width - thumbnailImage.width - itemMainInfos.spacing
            text: "test test test test test test test test test test test test test"+
                  "test test test test test test testtest test test test test test"+
                  "test test test test test test testtest test test test test test"+
                  "test test test test test test testtest test test test test test"
            wrapMode: Text.WordWrap
        }
    }
    Row {
        id: itemSecInfos

        width: parent.width
        height: Math.max(newsAuthor.height,text2.height)

        Text {
            id: newsAuthor
            width: (parent.width / 2) - 5
            height: 30
            text: "author"
        }
        Text {
            id: text2
            width: (parent.width / 2) - 5
            height: 30
            text: "something"
        }
    }
}

}@

Ices_Eyes

The idea is exactly that, Bomb3rman, but if applied to a listItem, it does not work. Actually with your suggested implementation I got tat all the item of the Listview appear one upon the others.

Can the problem be related to the fact that the textes and image are loaded dinamically, while maybe the height of the component are calculated statically before the contents are available?

Bomb3rman

well you need to assign a height to the column then of course.
And the anchors has to go then of course. What you could do is anchor the Column on the left and right side:
@
Column{
height:itemSecInfos.height+itemMainInfos.height
anchors.left:parent.left
anchors.right:parent.right
....
@

[Edit: Added @ tags -- mlong]

this should work

Ices_Eyes

Finally I manage to sort out this layout, by taking reed of the Row, it seems they are a bit painful in some cases :P an using just anchored items and some defined heights. Here the code, in case it could be of any help to someone else :)
@
Component {
id: newsItem

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

    ListItem {
        id: newsListItem
        width: parent.width

        subItemIndicator: true
        height: itemDesc.height + 10

        Column {
            id: itemDesc

            anchors {
                left: parent.left
                right: parent.right
                leftMargin: 10
                rightMargin: 30
                verticalCenter: parent.verticalCenter
            }

            spacing: 5

            Item {
                id: itemMainInfos

                width: parent.width
                height: Math.max(thumbnailImage.height, newsTitle.height)

                Image {
                    id: thumbnailImage
                    anchors {
                        left: parent.left
                        verticalCenter: parent.verticalCenter
                    }
                    width: 70
                    fillMode: Image.PreserveAspectFit

                    source: thumb
                }
                Text {
                    id: newsTitle

                    anchors {
                        left: thumbnailImage.right
                        leftMargin: 10
                        right: parent.right
                    }
                    verticalAlignment: Text.AlignVCenter
                    ....
                    text: title
                }
            }
            Item {
                id: itemSecInfos

                width: parent.width
                anchors {
                    left: parent.left
                    right: parent.right
                }

                height: 20

                Text {
                    id: newsAuthor

                    anchors {
                        top: parent.top
                        bottom: parent.bottom
                        left: parent.left
                    }
                    width: (parent.width / 2)
                    
                    verticalAlignment: Text.AlignVCenter
                    ....
                    text: author
                }
                Text {
                    id: newsDate

                    anchors {
                        top: parent.top
                        bottom: parent.bottom
                        left: newsAuthor.left
                        right: parent.right
                    }
                    verticalAlignment: Text.AlignVCenter
                    ...
                    text: pubDate
                }
            }
        }
    }
}

}@