[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 :PSo, 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.spacingColumn { 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
texttexttexttexttexttextsome_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: 360Column { 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: newsItemItem { 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 } } } } }
}@