4
繼此Qt tutorial我寫了這個簡單的代碼。有一個水平的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
,我可以將它與另一個具有良好的移動效果交換。
當列表中有很多項目並且目標位置超出可見項目時,問題就會開始。我可以將物品拖動到靠近右邊或左邊的位置......這裏的移動效果絕對不好。
當物品到達邊界附近時,是否有正確滾動列表的最佳做法?
我想在項目觸及邊界之前開始滾動!
的好處一個
壞一個