Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-43193

ListView has drawing problems with large models

    XMLWordPrintable

Details

    • Bug
    • Resolution: Unresolved
    • P2: Important
    • None
    • 5.3.0
    • None
    • Linux 32Bit

    Description

      When a model has a lot of rows (in this example 57000000 rows), then the ListView has drawing problems, as you can see in the following screenshot. At index 2396748, the first visible drawing problems occur.

      See ListView_problem_delegate_default_height.jpg

      When we scroll to the end then the drawing problems becomes more visible. The distance between the rows increases and it seems that some rows are drawn on top of others.

      See ListView_problem_delegate_default_height_at_end.jpg

      When the height of the delegate is set to 30 then the drawing problems occur earlier (at about index 2237000):

      See ListView_problem_delegate_height_30.jpg

      Here is the Qml example code for the ListView, with that the problems can easily be reproduced:

      ListView {
              id: listView
              anchors.fill: parent
              model: 57000000
      
              delegate: Text {
                  text: model.index
                  color: ListView.isCurrentItem ? "blue" : "black"
              }
      
              property int pageSize: 1000
              Keys.onPressed: {
                  if (event.key == Qt.Key_Home) {
                      currentIndex = 0
                      positionViewAtBeginning();
                  } else if(event.key == Qt.Key_End) {
                      currentIndex = count
                      positionViewAtEnd();
                  } else if(event.key == Qt.Key_PageUp) {
                      currentIndex = currentIndex - pageSize;
                      listView.moveToCurrentIndex();
                  } else if(event.key == Qt.Key_PageDown) {
                      currentIndex = currentIndex + pageSize;
                      listView.moveToCurrentIndex();
                  }
              }
      
              function moveToCurrentIndex(){
                  positionViewAtIndex(currentIndex, ListView.Center);
              }
      
              focus: true
              MouseArea {
                  anchors.fill: parent
                  onClicked: {
                      listView.currentIndex = 2396748
                      listView.moveToCurrentIndex();
                  }
              }
          }
      

      The ListView has a simple model with 57000000 rows and a text delegate that prints the index. The current index is drawn in blue, the others black. To find the problem, some navigation logic is implemented: Home, End, PageUp, PageDown, and with a mouse click, the index with the first visible drawing problems is set to the current index and the ListView position is set to this index, so you can see the problem.

      Attachments

        Issue Links

          No reviews matched the request. Check your Options in the drop-down menu of this sections header.

          Activity

            People

              qt.team.quick.subscriptions Qt Quick and Widgets Team
              andreaskasberger Andreas Kasberger
              Votes:
              8 Vote for this issue
              Watchers:
              12 Start watching this issue

              Dates

                Created:
                Updated:

                Gerrit Reviews

                  There are no open Gerrit changes