Drag and Drop within a GridView/bg: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
(Sub-categorize)
 
(5 intermediate revisions by one other user not shown)
Line 1: Line 1:
[[Category:snippets]]
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
[[Category:Developing_with_Qt::Qt Quick]]
{{LangSwitch}}
[[Category:Snippets::QML]]
[[Category:Developing_with_Qt::Qt Quick::QML]]
[[Category:Developing_with_Qt::Qt Quick::QML]]
[[Category:Developing_with_Qt::Qt Quick::Tutorial]]
[[Category:Developing_with_Qt::Qt Quick::Tutorial]]
'''Български''' | [[Drag_and_Drop_within_a_GridView|English]] | [[Drag_and_Drop_within_a_GridView_Japanese|日本語]]


Тази статия е създадена заради няколко теми във форума (линковете са в края на статията), в които се пита за такъв метод. Чувствайте се свободни да добавяте коментари и код.
Тази статия е създадена заради няколко теми във форума (линковете са в края на статията), в които се пита за такъв метод. Чувствайте се свободни да добавяте коментари и код.
Line 9: Line 9:
= Влачене и пускане на елементи в GridView =
= Влачене и пускане на елементи в GridView =


Този пример ще покаже влачене и пускане на елелемeнти в ''GridView'' по подобен на iOS начин ("видео":http://www.youtube.com/watch?v=qnXoGnUU6uI ).
Този пример ще покаже влачене и пускане на елелемeнти в ''GridView'' по подобен на iOS начин ([http://www.youtube.com/watch?v=qnXoGnUU6uI видео] ).


В примера има 3 файла. Един за модела (WidgetModel.qml), един за делегата (IconItem.qml) и един за GridView (Main.qml).
В примера има 3 файла. Един за модела (WidgetModel.qml), един за делегата (IconItem.qml) и един за GridView (Main.qml).
Line 53: Line 53:
                 NumberAnimation { to: -2; duration: 120 }
                 NumberAnimation { to: -2; duration: 120 }
                 NumberAnimation { to:  0; duration: 60 }
                 NumberAnimation { to:  0; duration: 60 }
                 running: loc.currentId != -1 && item.state != "active"
                 running: loc.currentId != -1 && item.state != "active"
                 loops: Animation.Infinite; alwaysRunToEnd: true
                 loops: Animation.Infinite; alwaysRunToEnd: true
             }
             }
Line 91: Line 91:
  onReleased: currentId = –1
  onReleased: currentId = –1
  onMousePositionChanged:
  onMousePositionChanged:
  if (loc.currentId [[Image:= -1 && index |= -1 && index ]]= –1 && index != newIndex)
  if (loc.currentId [[Image:= -1 && index |= -1 && index ]]= –1 && index != newIndex)
  icons.move(newIndex, newIndex = index, 1)
  icons.move(newIndex, newIndex = index, 1)
  }
  }
Line 98: Line 98:


'''Video'''
'''Video'''
[YouTubeID:4tt5hQYS4Fo]
https://www.youtube.com/watch?v=4tt5hQYS4Fo


Теми от форума:
Теми от форума:
"iOS Style Rearrange of Icons":http://developer.qt.nokia.com/forums/viewthread/2327/
[http://developer.qt.nokia.com/forums/viewthread/2327/ iOS Style Rearrange of Icons]
"QML and Drag and Drop":http://developer.qt.nokia.com/forums/viewthread/2426/
[http://developer.qt.nokia.com/forums/viewthread/2426/ QML and Drag and Drop]

Latest revision as of 13:14, 28 November 2016

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 [[Image:= -1 && index |= -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"