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

ListView: move delegate to spot that is inside displayMarginBeginning scrolls content one delegate forward

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Reported
    • Priority: P3: Somewhat important
    • Resolution: Unresolved
    • Affects Version/s: 5.15.2
    • Fix Version/s: None
    • Component/s: Quick: Other
    • Labels:
      None
    • Platform/s:
      Windows

      Description

      I use drag and drop to move delegates. Using displayMarginBeginning/displayMarginEnd I can still see the delegates outside the ListView. When I drop a delegate on a delegate that is outside ListView, but (partly) inside the displayMarginBeginning, something goes wrong (lets call this delegate spot X).

      It seems that the whole view gets moved. This can be seen in the "bug demo"-gif: moving to and from this spot X, the front of the list jumps one delegate forward.

      If the cacheBuffer is not high enough (as it is in my current project), the dragged item will even be unloaded, which keeps the current drag.active state to true, and breaks my drag.active-dependent logic. The "bug delete drag demo"-gif demonstrates this unloading.

      Note:

      • as shown in the "bug demo"-gif: the problem does not happen in the displayMarginEnd-area
      • triggering a move in DelegateModel, without making use of the DropAreas, also triggers this issue: the drag and drop feature does not seem to be the cause of the problem, just a method of pointing it out.
      • I found this behavior also in earlier versions than 5.15.2

      I tweaked the Qt drag-and-drop example code a bit to demonstrate:

      • I added color to the ListElements to differentiate easier
      • the content.border.color is now held-dependent instead of the content.color.
      • there is a "lightsteelblue"-Rectangle showing the area used by the ListView, to show which delegates are inside the displayMarginBeginning-area
        // dynamicview.qml
        import QtQuick 2.15
        import QtQml.Models 2.1
        //![0]
        Rectangle {
            id: root
        
            width: 500; height: 200
        
            Component {
                id: dragDelegate
        
                MouseArea {
                    id: dragArea
        
                    property bool held: false
        
                    width: 400
                    height: 68
        
                    drag.target: held ? content : undefined
                    drag.axis: Drag.YAxis
        
                    onPressAndHold: held = true
                    onReleased: held = false
        
                    Rectangle {
                        id: content
        //![0]
                        anchors {
                            horizontalCenter: parent.horizontalCenter
                            verticalCenter: parent.verticalCenter
                        }
                        width: dragArea.width; height: column.implicitHeight + 4
        
                        border.width: 3
                        border.color: dragArea.held ? "black" : "lightsteelblue"
        
                        color: cellColor
                        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)
                        }
                    }
        //![3]
                }
            }
        //![2]
        //![4]
            DelegateModel {
                id: visualModel
        
                model: PetsModel {}
                delegate: dragDelegate
            }
        
            ListView {
                id: view
        
                anchors.centerIn: parent
        
                height: 4 * 68 + 3 * spacing
                width: 500
                Rectangle { anchors.fill: parent; opacity: 0.2; color: "lightsteelblue" }
        
                model: visualModel
        
                spacing: 6
                cacheBuffer: 1000
                displayMarginBeginning: 500
                displayMarginEnd: 500
            }
        //![4]
        //![5]
        }
        //![5]
        
        // PetsModel.qml
        import QtQuick 2.0
        
        ListModel {
            ListElement {
                name: "Polly"
                type: "Parrot"
                age: 12
                size: "Small"
            }
            ListElement {
                name: "Penny"
                type: "Turtle"
                age: 4
                size: "Small"
            }
            ListElement {
                name: "Warren"
                type: "Rabbit"
                age: 2
                size: "Small"
            }
            ListElement {
                name: "Spot"
                type: "Dog"
                age: 9
                size: "Medium"
            }
            ListElement {
                name: "Schrödinger"
                type: "Cat"
                age: 2
                size: "Medium"
            }
            ListElement {
                name: "Joey"
                type: "Kangaroo"
                age: 1
                size: "Medium"
            }
            ListElement {
                name: "Kimba"
                type: "Bunny"
                age: 65
                size: "Large"
            }
            ListElement {
                name: "Rover"
                type: "Dog"
                age: 5
                size: "Large"
            }
            ListElement {
                name: "Tiny"
                type: "Elephant"
                age: 15
                size: "Large"
            }
        }

         

       

       

        Attachments

        1. bug delete drag demo.gif
          bug delete drag demo.gif
          349 kB
        2. bug demo.gif
          bug demo.gif
          898 kB
        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

          Activity

            People

            Assignee:
            qt.team.quick.subscriptions Qt Quick and Widgets Team
            Reporter:
            rjmsilf Robert Silfhout
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Dates

              Created:
              Updated:

                Gerrit Reviews

                There are no open Gerrit changes