Drag and Drop within a GridView/bg

From Qt Wiki
Jump to: navigation, search
This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine.
Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh

Тази статия е създадена заради няколко теми във форума (линковете са в края на статията), в които се пита за такъв метод. Чувствайте се свободни да добавяте коментари и код.

Влачене и пускане на елементи в GridView

Този пример ще покаже влачене и пускане на елелемeнти в GridView по подобен на iOS начин (видео ).

В примера има 3 файла. Един за модела (WidgetModel.qml), един за делегата (IconItem.qml) и един за GridView (Main.qml).

WidgetModel.qml import QtQuick 1.0

ListModel { 

ListElement { icon: "Images/widget1.png"; gridId: 0}
ListElement { icon: "Images/widget2.png"; gridId: 1}
ListElement { icon: "Images/widget3.png"; gridId: 2}
ListElement { icon: "Images/widget4.png"; gridId: 3}
ListElement { icon: "Images/widget5.png"; gridId: 4}
ListElement { icon: "Images/widget6.png"; gridId: 5}
ListElement { icon: "Images/widget7.png"; gridId: 6}
ListElement { icon: "Images/widget8.png"; gridId: 7}
ListElement { icon: "Images/widget9.png"; gridId: 8}

}

IconItem.qml import QtQuick 1.0

Component { 

Item {
id: main
width: grid.cellWidth; height: grid.cellHeight
Image {
id: item; parent: loc
x: main.x + 5; y: main.y + 5
width: main.width - 10; height: main.height - 10;
fillMode: Image.PreserveAspectFit; smooth: true
source: icon
Rectangle {
anchors.fill: parent;
border.color: "#326487"; border.width: 6
color: "transparent"; radius: 5
visible: item.state  "active"
           }
           Behavior on x { enabled: item.state != "active"; NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
           Behavior on y { enabled: item.state != "active"; NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
           SequentialAnimation on rotation {
               NumberAnimation { to:  2; duration: 60 }
               NumberAnimation { to: -2; duration: 120 }
               NumberAnimation { to:  0; duration: 60 }
               running: loc.currentId != -1 && item.state != "active"
               loops: Animation.Infinite; alwaysRunToEnd: true
           }
           states: State {
               name: "active"; when: loc.currentId  gridId
PropertyChanges { target: item; x: loc.mouseX - width/2; y: loc.mouseY - height/2; scale: 0.5 }
}
transitions: Transition { NumberAnimation { property: "scale"; duration: 200} }
}
}

}

Main.qml import QtQuick 1.0

Rectangle { 

width: 640; height: 480
color: "#222222"
GridView {
id: grid
interactive: false
anchors {
topMargin: 60; bottomMargin: 60
leftMargin: 140; rightMargin: 140
fill: parent
}
cellWidth: 120; cellHeight: 120;
model: WidgetModel { id: icons }
delegate: IconItem { }
MouseArea {
property int currentId: –1 // Original position in model
property int newIndex // Current Position in model
property int index: grid.indexAt(mouseX, mouseY) // Item underneath cursor
id: loc
anchors.fill: parent
onPressAndHold: currentId = icons.get(newIndex = index).gridId
onReleased: currentId = –1
onMousePositionChanged:
if (loc.currentId = -1 && index= –1 && index != newIndex)
icons.move(newIndex, newIndex = index, 1)
}
}

}

Video https://www.youtube.com/watch?v=4tt5hQYS4Fo

Теми от форума: iOS Style Rearrange of Icons QML and Drag and Drop

Retrieved from "https://wiki.qt.io/index.php?title=Drag_and_Drop_within_a_GridView/bg&oldid=29336"