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



  • 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
                ...
            }
        }
    }
    

    }@



  • 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
    }@



  • 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



  • 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)



  • 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... :)



  • 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"
            }
        }
    }
    

    }@



  • 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?



  • 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



  • 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
                    }
                }
            }
        }
    }
    

    }@


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.