在拖放项目期间滚动项目
在拖放项目期间滚动项目
提问于 2016-11-24 14:53:50
遵循这个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，我可以用一个很好的移动效果与另一个交换它。
当列表中有很多项并且目标位置在可见项之外时，问题就开始了。我可以把物品拖到左右边框附近.这里的移动效果绝对不是很好。
当一个项目到达边界附近时，是否有正确滚动列表的最佳实践？
我希望滚动开始之前，项目触及边界！
漂亮的那个
坏的那个
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-11-26 08: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
}
}
}Stack Overflow用户
发布于 2021-07-28 09:38:47
简单
MouseArea {
id: dragArea
onPositionChanged:
{
listView.positionViewAtIndex(listView.indexAt(x,y),ListView.Center)
}
//.....
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40789412
复制相关文章
相似问题
腾讯云开发者
