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. Not able to implement the ListView in QML.
Forum Updated to NodeBB v4.3 + New Features

Not able to implement the ListView in QML.

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
13 Posts 7 Posters 1.2k 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.
  • YunusY Offline
    YunusY Offline
    Yunus
    wrote on last edited by Yunus
    #4

    @RG97 Hi, even if you use stacklayout, you need to use the same code which @isdsi mentioned. Only difference is that you need to use it in StackLayout scope:

    ApplicationWindow{
        id: mainWindow
        height:480
        width: 800
        visible: true
    
        StackLayout{
                id: appStack
                currentIndex: 0
                anchors.fill: parent
        ListView {
                orientation: ListView.Vertical
    
            model: ListModel{
                            id: model
    
    
                            ListElement {
                                    name: "Apple"
                                    cost: 2.45
                                }
                                ListElement {
                                    name: "Orange"
                                    cost: 3.25
                                }
                                ListElement {
                                    name: "Banana"
                                    cost: 1.95
                                }
                    }
    
            delegate: Row {
                spacing: 20
                Text { text: "Fruit: " + name }
                Text { text: "Cost: $" + cost }
            }
    
        }
        }
    }
    
    1 Reply Last reply
    1
    • RG97R Offline
      RG97R Offline
      RG97
      wrote on last edited by
      #5

      @Yunus Yeah, thanks a lot. That worked out for me.

      J.HilkJ 1 Reply Last reply
      0
      • RG97R RG97

        @Yunus Yeah, thanks a lot. That worked out for me.

        J.HilkJ Offline
        J.HilkJ Offline
        J.Hilk
        Moderators
        wrote on last edited by J.Hilk
        #6

        @RG97 Giving your delegates a hight and width would have helped as well


        The correct answer/comment would have been:
        Giving your ListView a hight and width would have helped as well

        See @GrecKo for explanation


        Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


        Q: What's that?
        A: It's blue light.
        Q: What does it do?
        A: It turns blue.

        GrecKoG 1 Reply Last reply
        3
        • IntruderExcluderI Offline
          IntruderExcluderI Offline
          IntruderExcluder
          wrote on last edited by
          #7
          This post is deleted!
          1 Reply Last reply
          0
          • J.HilkJ J.Hilk

            @RG97 Giving your delegates a hight and width would have helped as well


            The correct answer/comment would have been:
            Giving your ListView a hight and width would have helped as well

            See @GrecKo for explanation

            GrecKoG Offline
            GrecKoG Offline
            GrecKo
            Qt Champions 2018
            wrote on last edited by
            #8

            @J-Hilk said in Not able to implement the ListView in QML.:

            @RG97 Giving your delegates a hight and width would have helped as well

            No.
            The delegates already had a width and a height: the implicit ones of the Row (the sum of the 2 Text's implicitWidth and the maximum implicitHeight of both text). Had the delegates not have a height, they just would have been stacked on top of eachother.

            The problem here is was that the ListView itself didn't have a height.

            In the first case it was because of anchors.fill: parent.fill instead of anchors.fill: parent and in the second case it was because the ListView was the same size as the StackView but the StackView size was not set.

            J.HilkJ RG97R 2 Replies Last reply
            3
            • GrecKoG GrecKo

              @J-Hilk said in Not able to implement the ListView in QML.:

              @RG97 Giving your delegates a hight and width would have helped as well

              No.
              The delegates already had a width and a height: the implicit ones of the Row (the sum of the 2 Text's implicitWidth and the maximum implicitHeight of both text). Had the delegates not have a height, they just would have been stacked on top of eachother.

              The problem here is was that the ListView itself didn't have a height.

              In the first case it was because of anchors.fill: parent.fill instead of anchors.fill: parent and in the second case it was because the ListView was the same size as the StackView but the StackView size was not set.

              J.HilkJ Offline
              J.HilkJ Offline
              J.Hilk
              Moderators
              wrote on last edited by
              #9

              @GrecKo
              true enough, I just tested it in an example.

              I never use the default height so I falsely assumed that to be the root problem :)


              Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


              Q: What's that?
              A: It's blue light.
              Q: What does it do?
              A: It turns blue.

              1 Reply Last reply
              0
              • GrecKoG GrecKo

                @J-Hilk said in Not able to implement the ListView in QML.:

                @RG97 Giving your delegates a hight and width would have helped as well

                No.
                The delegates already had a width and a height: the implicit ones of the Row (the sum of the 2 Text's implicitWidth and the maximum implicitHeight of both text). Had the delegates not have a height, they just would have been stacked on top of eachother.

                The problem here is was that the ListView itself didn't have a height.

                In the first case it was because of anchors.fill: parent.fill instead of anchors.fill: parent and in the second case it was because the ListView was the same size as the StackView but the StackView size was not set.

                RG97R Offline
                RG97R Offline
                RG97
                wrote on last edited by
                #10

                @GrecKo Can you tell me the difference between the anchors..fill: parent and anchors.fill: parent.fill ?

                KroMignonK 1 Reply Last reply
                0
                • RG97R RG97

                  @GrecKo Can you tell me the difference between the anchors..fill: parent and anchors.fill: parent.fill ?

                  KroMignonK Offline
                  KroMignonK Offline
                  KroMignon
                  wrote on last edited by
                  #11

                  @RG97 said in Not able to implement the ListView in QML.:

                  Can you tell me the difference between the anchors..fill: parent and anchors.fill: parent.fill ?

                  anchors.fill requires an item (in this case parent) anchors.fill: parent.fill will not work or the parent already fill an other item (or nothing in parent.fill is not set, which I think is the case).

                  It is an old maxim of mine that when you have excluded the impossible, whatever remains, however improbable, must be the truth. (Sherlock Holmes)

                  1 Reply Last reply
                  0
                  • GrecKoG Offline
                    GrecKoG Offline
                    GrecKo
                    Qt Champions 2018
                    wrote on last edited by
                    #12

                    parent.fill doesn't exist.

                    anchors.fill is a property expecting an Item : https://doc.qt.io/qt-5/qml-qtquick-item.html#anchors-prop
                    others anchors properties like anchors.top expect an anchor line, that where you can do anchors.top: parent.top but you could also do anchors.top: header.bottom.

                    1 Reply Last reply
                    3
                    • RG97R Offline
                      RG97R Offline
                      RG97
                      wrote on last edited by
                      #13

                      @KroMignon @GrecKo Thanks for clarifying.
                      I want to ask one more thing related to ListView. I have a 5 inch display for which I am developing this hybrid application using PySide2 and QML.Now I want to show some kind of dynamically populated report using ListView.
                      I have two of the following options to implement this:

                      • Add the list elements and put a scroll bar to scroll through the items.

                      • Allocate one page per specific number of List elements and navigate through those pages to find respective elements.

                      I have implemented the first option which is default only but I am more inclined towards the second option but not sure of how I can implement this. Is there a way to populate different pages under ListView dynamically ?

                      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