Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. [SOLVED] First steps with ListView
Forum Updated to NodeBB v4.3 + New Features

[SOLVED] First steps with ListView

Scheduled Pinned Locked Moved QML and Qt Quick
12 Posts 2 Posters 3.3k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • B Offline
    B Offline
    Binary91
    wrote on last edited by
    #3

    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?

    1 Reply Last reply
    0
    • p3c0P Offline
      p3c0P Offline
      p3c0
      Moderators
      wrote on last edited by
      #4

      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.

      157

      1 Reply Last reply
      0
      • B Offline
        B Offline
        Binary91
        wrote on last edited by
        #5

        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?

        1 Reply Last reply
        0
        • p3c0P Offline
          p3c0P Offline
          p3c0
          Moderators
          wrote on last edited by
          #6

          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.

          157

          1 Reply Last reply
          0
          • B Offline
            B Offline
            Binary91
            wrote on last edited by
            #7

            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?

            1 Reply Last reply
            0
            • p3c0P Offline
              p3c0P Offline
              p3c0
              Moderators
              wrote on last edited by
              #8

              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
              }
              

              }
              @

              157

              1 Reply Last reply
              0
              • B Offline
                B Offline
                Binary91
                wrote on last edited by
                #9

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

                1 Reply Last reply
                0
                • B Offline
                  B Offline
                  Binary91
                  wrote on last edited by
                  #10

                  [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

                  1 Reply Last reply
                  0
                  • p3c0P Offline
                    p3c0P Offline
                    p3c0
                    Moderators
                    wrote on last edited by
                    #11

                    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.

                    157

                    1 Reply Last reply
                    0
                    • B Offline
                      B Offline
                      Binary91
                      wrote on last edited by
                      #12

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

                      1 Reply Last reply
                      0

                      • Login

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Categories
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Groups
                      • Search
                      • Get Qt Extensions
                      • Unsolved