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

The dynamic listview example should allow scrolling outside of visible area

    XMLWordPrintable

    Details

    • Type: Suggestion
    • Status: Reported
    • Priority: Not Evaluated
    • Resolution: Unresolved
    • Affects Version/s: 5.13.2
    • Fix Version/s: None
    • Component/s: Quick: Other
    • Labels:
      None
    • Platform/s:
      All

      Description

      The dynamic list view example's scrolling is limited to the visible area of the list view:
      https://doc.qt.io/qt-5/qtquick-tutorials-dynamicview-dynamicview3-example.html

      The example should be extended with the code between the "NEW CODE START/END" tags (or a property so that the "view" item is not referenced from the delegate) so that full scrolling is possible:

      import QtQuick 2.0
      import QtQml.Models 2.1
      //![0]
      Rectangle {
          id: root
      
          width: 300; height: 400
      
          Component {
              id: dragDelegate
      
              MouseArea {
                  id: dragArea
      
                  property bool held: false
      
                  anchors { left: parent.left; right: parent.right }
                  height: content.height
      
                  drag.target: held ? content : undefined
                  drag.axis: Drag.YAxis
      
                  onPressed: held = true
                  onReleased: held = false
                  
                  // NEW CODE START
                  property int lastY: 0
                  property bool moveDown: false
      
                  onMouseYChanged: {
                      moveDown = lastY < y;
                      lastY = y;
                  }
                  // NEW CODE END
      
                  Rectangle {
                      id: content
      //![0]
                      anchors {
                          horizontalCenter: parent.horizontalCenter
                          verticalCenter: parent.verticalCenter
                      }
                      width: dragArea.width; height: column.implicitHeight + 4
      
                      border.width: 1
                      border.color: "lightsteelblue"
      
                      color: dragArea.held ? "lightsteelblue" : "white"
                      Behavior on color { ColorAnimation { duration: 100 } }
      
                      radius: 2
      //![1]
                      Drag.active: dragArea.held
                      Drag.source: dragArea
                      Drag.hotSpot.x: width / 2
                      Drag.hotSpot.y: height / 2
      //![1]
                      states: State {
                          when: dragArea.held
      
                          ParentChange { target: content; parent: root }
                          AnchorChanges {
                              target: content
                              anchors { horizontalCenter: undefined; verticalCenter: undefined }
                          }
                      }
      
                      Column {
                          id: column
                          anchors { fill: parent; margins: 2 }
      
                          Text { text: 'Name: ' + name }
                          Text { text: 'Type: ' + type }
                          Text { text: 'Age: ' + age }
                          Text { text: 'Size: ' + size }
                      }
      //![2]
                  }
      //![3]
                  DropArea {
                      anchors { fill: parent; margins: 10 }
      
                      onEntered: {
                          visualModel.items.move(
                                  drag.source.DelegateModel.itemsIndex,
                                  dragArea.DelegateModel.itemsIndex)
      
                          
                          // NEW CODE START
                          var scrollDir;
                          if (dragArea.moveDown) {
                              scrollDir = 1;
                          }
                          else {
                              scrollDir = -1;
                          }
      
                          view.currentIndex = dragArea.DelegateModel.itemsIndex + scrollDir;
                          // NEW CODE END
                      }
                  }
      //![3]
              }
          }
      //![2]
      //![4]
          DelegateModel {
              id: visualModel
      
              model: PetsModel {}
              delegate: dragDelegate
          }
      
          ListView {
              id: view
      
              anchors { fill: parent; margins: 2 }
      
              model: visualModel
      
              spacing: 4
              cacheBuffer: 50
      
          }
      //![4]
      //![5]
      }
      //![5]
      

        Attachments

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

          Activity

            People

            • Assignee:
              w00t Robin Burchell
              Reporter:
              DanielSt Peter Staab
            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:

                Gerrit Reviews

                There are no open Gerrit changes