问在拖放项目期间滚动项目
EN

Stack Overflow用户

提问于 2016-11-24 06:53:50

回答 2查看 2.4K关注 0票数 7

遵循这个Qt教程，我编写了这段简单的代码。有一个水平ListView，上面有一些简单的彩色矩形作为模型项的委托。

import QtQuick 2.5
import QtQuick.Window 2.0
import QtQml.Models 2.2

Window {
    visible: true
    width: 300
    height: 120
    title: qsTr("Hello World")

    Rectangle {
        anchors.fill: parent;

        ListView{
            id: timeline
            anchors.fill: parent
            orientation: ListView.Horizontal
            model: visualModel
            delegate: timelineDelegate

            moveDisplaced: Transition {
                NumberAnimation{
                    properties: "x,y"
                    duration: 200
                }
            }

            DelegateModel {
                id: visualModel
                model: timelineModel
                delegate: timelineDelegate
            }

            Component {
                id: timelineDelegate


                MouseArea {
                    id: dragArea

                    width: 100; height: 100

                    property bool held: false

                    drag.target: held ? content : undefined
                    drag.axis: Drag.XAxis

                    onPressAndHold: held = true
                    onReleased: held = false

                    Rectangle {
                        id: content

                        anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter }
                        width: 100
                        height: 100

                        color: colore
                        opacity: dragArea.held ? 0.8 : 1.0

                        Drag.active: dragArea.held
                        Drag.source: dragArea
                        Drag.hotSpot.x: width / 2
                        Drag.hotSpot.y: height / 2

                        states: State{
                            when: dragArea.held
                            ParentChange { target: content; parent: timeline }
                            AnchorChanges {
                                target: content
                                anchors { horizontalCenter: undefined; verticalCenter: undefined }
                            }
                        }
                    }

                    DropArea {
                        anchors.fill: parent
                        onEntered: {
                            visualModel.items.move( drag.source.DelegateModel.itemsIndex, dragArea.DelegateModel.itemsIndex)
                            timeline.currentIndex = dragArea.DelegateModel.itemsIndex
                        }
                    }
                }
            }

            ListModel {
                id: timelineModel
                // @disable-check M16
                ListElement { colore: "blue" }
                // @disable-check M16
                ListElement { colore: "orange" }
                // @disable-check M16
                ListElement { colore: "red" }
                // @disable-check M16
                ListElement { colore: "yellow" }
                // @disable-check M16
                ListElement { colore: "green" }
                // @disable-check M16
                ListElement { colore: "yellow" }
                // @disable-check M16
                ListElement { colore: "red" }
                // @disable-check M16
                ListElement { colore: "blue" }
                // @disable-check M16
                ListElement { colore: "green" }
            }
        }
    }
}

如果我按下并保持一个Item，我可以用一个很好的移动效果与另一个交换它。

当列表中有很多项并且目标位置在可见项之外时，问题就开始了。我可以把物品拖到左右边框附近.这里的移动效果绝对不是很好。

当一个项目到达边界附近时，是否有正确滚动列表的最佳实践？

我希望滚动开始之前，项目触及边界！

漂亮的那个

坏的那个

drag-and-drop

qml

drag

qtquick2

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-11-26 00:40:59

ListView在更改ListView.currentIndex时滚动。也就是说，放置区域中的最后一行：

timeline.currentIndex = dragArea.DelegateModel.itemsIndex

表示始终可见的当前索引是拖放的项。但是，如果拖动的项目到达边框，用户希望不仅看到拖动的项目，而且看到它旁边的项目。因此，您需要在currentIndex中再添加一项

timeline.currentIndex = dragArea.DelegateModel.itemsIndex + 1

现在，如果将项目拖到右边框，则列表视图将正确地滚动到右侧。为了使它在左边框和右边框中都是可维护的，我们需要在其中添加一些数学：

MouseArea {
    id: dragArea

    property int lastX: 0
    property bool moveRight: false

    onXChanged: {
        moveRight = lastX < x;
        lastX = x;
    }

    //....

    DropArea {
        anchors.fill: parent
        onEntered: {
            visualModel.items.move( drag.source.DelegateModel.itemsIndex, 
                                    dragArea.DelegateModel.itemsIndex)
            if (dragArea.moveRight)
                timeline.currentIndex = dragArea.DelegateModel.itemsIndex + 1
            else
                timeline.currentIndex = dragArea.DelegateModel.itemsIndex - 1
        }
    }
}

票数 5

Stack Overflow用户

发布于 2021-07-28 01:38:47

简单

MouseArea {
    id: dragArea

         onPositionChanged:
            {   
             listView.positionViewAtIndex(listView.indexAt(x,y),ListView.Center)
            }

//.....

}