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

GridView / ListView : wrong filling direction with Loader as delegate

    XMLWordPrintable

Details

    • iOS/tvOS/watchOS, Windows

    Description

      When using GridView or ListView with a Loader as delegate, the filling direction is always from bottom-right to top-left.

      Loaders are ready one by one from the last to the first item in the ListModel.

      But it's more logical and clean to have elements appearing from left to right. Isn't it ?

      Given bellow an example, which indicates clearly the bug :

      example.qml
      import QtQuick 2.5
      
      ListView {
          id: listView
          anchors.fill: parent
      
          model: ListModel {
              id: data
              ListElement {
                  url: "https://images.unsplash.com/photo-1453743327117-664e2bf4e951?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=d5447d7f37886d9890d448d0858da12f"
              }
          }
      
          property bool nextLoaded: false
          function loadNext() {
              if (!nextLoaded) {
                  nextLoaded = true;
      
                  var next = [
                      {
                          url: "https://images.unsplash.com/photo-1452800185063-6db5e12b8e2e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=2700f9770386e4c5ebc53502a9099966"
                      },
                      {
                          url: "https://images.unsplash.com/photo-1452274381522-521513015433?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=476b9724fcf47b51c652d66e384f9ba0"
                      }
                  ];
      
                  data.append(next);
              }
          }
      
          onContentYChanged: {
              if (contentHeight - contentY - height < 1000)
                  loadNext();
          }
      
          delegate: Component {
      
              Loader {
                  width: parent.width
                  height: 200
                  asynchronous: true
                  visible: status == Loader.Ready
      
                  onStatusChanged: {
                      if (status == Loader.Ready) {
                          console.log("loader "+index+" is ready");
                      }
                  }
      
                  sourceComponent: Component {
      
                      Image {
                          source: url
                          cache: false
                          asynchronous: true
      
                          anchors.fill: parent
                          fillMode: Image.PreserveAspectCrop
      
                          onStatusChanged: {
                              if (status == Image.Loading) {
                                  console.log("image "+index+" is loading");
                              }
                          }
                      }
                  }
              }
          }
      }
      

      After appending the 2 new images in the list, you can see in the console :

      console
      qml: image 2 is loading
      qml: loader 2 is ready
      qml: image 1 is loading
      qml: loader 1 is ready
      

      Attachments

        1. bug_gridview.gif
          56 kB
          Vincent Kaestle
        2. QTBUG50816-WrongOrder.zip
          3 kB
          Nahomi Gröhn

        Issue Links

          Activity

            People

              qt.team.quick.subscriptions Qt Quick and Widgets Team
              vkaestle67 Vincent Kaestle
              Votes:
              4 Vote for this issue
              Watchers:
              10 Start watching this issue

              Dates

                Created:
                Updated: