[SOLVED] First steps with ListView



  • 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


  • Moderators

    Hi,

    Well then give width and height to delegate Item too.



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


  • Moderators

    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.



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


  • Moderators

    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.



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


  • Moderators

    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
    }
    

    }
    @



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



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


  • Moderators

    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.



  • [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,


Log in to reply
 

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