[SOLVED] First steps with ListView

[Binary91]

Hi,

I'm trying to build a little user list using ListView.
What I'd like to have is a list of rectangles, each containing a image (avatar icon) on the left and a text (username) on the right.

This is what I tried so far (using always the same image, but that doesn't matter right now):
@import QtQuick 2.4

Item
{
id: itemPageStatistics

ListModel
{
id: model
ListElement
{
icon: "qrc:/img/avatar.png"
text: "User A"
}

ListElement
{
  icon: "qrc:/img/avatar.png"
  text: "User B"
}

}

ListView
{
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: 10
anchors.horizontalCenter: parent.horizontalCenter
height: 300

model: model
Component
{
  id: compDelegate

  Item
  {
    Image
    {
      source: icon
    }

    Text
    {
      text: text
    }
  }
}
delegate: compDelegate

}
}@

The problem is, that only one avatar image and nothing else (no second avatar image and zero text) is shown...
My first intention was that I forgot to give a height to the parent item, but that also doesn't help...

Any suggestions? :-P

[p3c0]

Hi,

Well then give width and height to delegate Item too.

[Binary91]

Hi and thank's for your reply.
Unfortunatelly, it still doesn't work:
@ Component
{
id: compDelegate

  Item
  {
    width: 300
    height: 400
    Image
    {
      source: icon
    }

    Text
    {
      text: text
    }
  }
}@

Any other suggestions?

[p3c0]

With delegate Item height greater that ListView height I guess you will need to scroll down a bit. Better way would be to give a Width and Height to ListView's parent (i.e Item) and then ListView fill to the parent.

[Binary91]

Hi,
ok I gave the main item a specific width & height, set the size behaviour of listview to fill parent and gave the component also a specific width/height:
@ import QtQuick 2.4

Item
{
  id: itemPageStatistics
  width: 300
  height: 400
 
  ListModel
  {
    id: model
    ListElement
    {
      icon: "qrc:/img/avatar.png"
      text: "User A"
    }
 
    ListElement
    {
      icon: "qrc:/img/avatar.png"
      text: "User B"
    }
  }
 
  ListView
  {
    anchors.fill: parent
 
    model: model
    Component
    {
      id: compDelegate
 
      Item
      {
        width:300
        height: 400
        Image
        {
          source: icon
        }
 
        Text
        {
          text: text
        }
      }
    }
    delegate: compDelegate
  }
}

@
I still have the same output, only the first image is displayed (now exactly on the left edge (no more margin defined)...

I really don't know what to do now.. Maybe the problem is that the whole file is loaded by a loader which has also a size behaviour like this:
@//main.qml
Item
{
id: loaderContent
width: 500
height: 700

  Loader
  {
    id: loaderMain
    anchors.fill: parent

    source: "qrc:/qml/Listview.qml"
  }

}@
Could this be the problem?

[p3c0]

IMO, Loader should not be a problem. The code works fine for me. Just replaced the Image. And as far as the text of Text item is concerned, use some other role in ListElement as text is property in Text element. It should work then.

[Binary91]

Ah that's interesting. Replacing the text role to something else worked, now both texts are displayed, but exactly at the same coordinates. I guess the images are also displayed at the same coordinates and that's why I only see one of them...

Can you imagine why the list elements are shown at the same coordinates? I think a listview should handle that?

[p3c0]

bq. Can you imagine why the list elements are shown at the same coordinates?

That is because you dont specify the coordinates for them. But the recommended way would be to take the advantage of anchors.
Eg:
@
Item
{
width:300
height: 400
Image
{
id: image
source: icon
}

Text
{
    anchors.top: image.bottom
    text: mytext
}

}
@

[Binary91]

Hi and thank's again!
Ok, I found the problem for it: I did not specify a height for the absolute parent item in main.qml (which contains the loader).

General question: If an item is not vertically anchored and has no specific height, is the height then set to zero by default??

Other question:
I used "anchor.verticalCenter = parent.verticalCenter" to stretch the loaded component to the whole vertical "space" in the main item. When I understand the documentation right, then anchor.verticalCenter = parent.verticalCenter only means that I set the "vertical middle line" of my item to the vertical middle line of the parent item and as a result of that, it gets the same height, right?? So this should have nothing to do with centering child elements, because for this I have alignment functionality, right? Then I don't understand why I have different results in my listview when using anchors.centerIn instead of anchors.horizontalCenter = parent.horizontalCenter & anchors.verticalCenter = parent.verticalCenter (documentation also says that it would be the same).. Instead, using anchors.centerIn results in centering the child items (my listview), what I don't want (for this, I have alignment functions, right?)...

Third question:
I also used your example above using text with anchoring top to bottom of image, but that should result in a text that is displayed under the image, right?? But instead, it is correctly displayed in the middle of the image height... don't understand this behaviour...

[Binary91]

[quote]Second question’s answer:
AFAIK anchoring to horizontal, verticalCenter has nothing to do with the size of that Item. [/quote]Ok, that confuses me.
Let's take an example:
We have a parent rectangle with a specified width & height of 500 x 500.
In the parent rectangle, we have a "header rectangle". We anchor it on top and left to its parent and give it a width and height of 500 x 100.
The second child rectangle, let's call it "content rectangle" should fill the rest of the available space now (500 x 400, beginning at height of 100 alias header bottom).
When I do that whole stuff like this, only using anchors:
@Rectangle
{
width: 500
height: 500

Rectangle
{
id: rectHeader
anchors.left: parent.left
anchors.top: parent.top
anchors.right: parent.right
height: 100

border.color: "black"
border.width: 1

}

Rectangle:
{
id: rectContent
anchors.left: parent.left
anchors.top: rectHeader.bottom
anchors.right: parent.right
anchors.bottom: parent.bottom

border.color: "black"
border.width: 1

}
}@
When I look at the drawn borders, I see that anchoring the child rectangles strechtes them, and so they have the wanted size or am I fundamentally wrong?

If the only way of giving a "real size" to them was to give a width and height, then it would get much complicated when the parent size changes...

[quote]Yes. It only sets according to the vertical middle line of parent. But it has nothing to do with height or width. Consider the innerRect Item in above example. If you comment width and height code and keeping only the vertical and horizontal centering, you wont see anything, as the Rectangle Item’s width and height is defaulted to 0. [/quote]
Ah, maybe I understood you wrong.
ONLY using verticalCenter / horizontalCenter sould move the whole rectangle to the middle of its parent, so the middle lines are the same but width and height can still be minimal! Right? BUT, in combination with anchor.top / anchor.left --> it can not "move" to the center anymore, so result is streching the rectangle and I get the wanted effect! Is that right?

Well, if I'm right with my guess, then I understand every of your answer and wanna say thank's again for your help! If not, then thank you in anticipation :-P

[p3c0]

bq. When I look at the drawn borders, I see that anchoring the child rectangles strechtes them, and so they have the wanted size or am I fundamentally wrong?
If the only way of giving a “real size” to them was to give a width and height, then it would get much complicated when the parent size changes…

Yes they get stretched and thus get a size. What I mentioned earlier was anchoring to horizontalCenter and verticalCenter wont stretch them.

bq. ONLY using verticalCenter / horizontalCenter sould move the whole rectangle to the middle of its parent, so the middle lines are the same but width and height can still be minimal! Right? BUT, in combination with anchor.top / anchor.left —> it can not “move” to the center anymore, so result is streching the rectangle and I get the wanted effect! Is that right?

verticalCenter / horizontalCenter will position it to the center provided size is specified. The problem is that you cant use top, bottom, and verticalCenter anchors at the same time OR left, right, and horizontalCenter anchors at the same time. AFAIK verticalCenter and horizontalCenter will be ignored in that case.

[Binary91]

[quote]verticalCenter / horizontalCenter will position it to the center provided size is specified. The problem is that you cant use top, bottom, and verticalCenter anchors at the same time OR left, right, and horizontalCenter anchors at the same time. AFAIK verticalCenter and horizontalCenter will be ignored in that case.[/quote]
Well, that makes sense, because using anchor top & anchor bottom already does the effect of anchor top + verticalCenter I think...

Ok, so everything is clear. Thank you really much!

Cheers,