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

From Qt Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
[[Category:snippets]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:Developing_with_Qt::Qt Quick::QML]]<br />[[Category:Developing_with_Qt::Qt Quick::Tutorial]]<br />[[Category:Japanese]]<br />[[Drag_and_Drop_within_a_GridView|English]] | '''日本語''' | [[Drag_and_Drop_within_a_GridView_Bulgarian|Български]]
[[Category:snippets]]
[[Category:Developing_with_Qt::Qt Quick]]
[[Category:Developing_with_Qt::Qt Quick::QML]]
[[Category:Developing_with_Qt::Qt Quick::Tutorial]]
[[Category:Japanese]]
[[Drag_and_Drop_within_a_GridView|English]] | '''日本語''' | [[Drag_and_Drop_within_a_GridView_Bulgarian|Български]]


この記事はいくつかのフォーラムのスレッド(下部にリンクしました)での質問と回答を受けて作成されたものです。コードや解説でのこの記事への貢献を歓迎します。
この記事はいくつかのフォーラムのスレッド(下部にリンクしました)での質問と回答を受けて作成されたものです。コードや解説でのこの記事への貢献を歓迎します。
Line 9: Line 14:
このサンプルは3つのファイルから構成されています。一つがモデル(WidgetModel.qml)で、一つがデリゲート(IconItem.qml)、最後が GridView (Main.qml)です。
このサンプルは3つのファイルから構成されています。一つがモデル(WidgetModel.qml)で、一つがデリゲート(IconItem.qml)、最後が GridView (Main.qml)です。


'''WidgetModel.qml'''<br /><code>import QtQuick 1.0
'''WidgetModel.qml'''
<code>import QtQuick 1.0


ListModel {<br /> ListElement { icon: "Images/widget1.png"; gridId: 0}<br /> ListElement { icon: "Images/widget2.png"; gridId: 1}<br /> ListElement { icon: "Images/widget3.png"; gridId: 2}<br /> ListElement { icon: "Images/widget4.png"; gridId: 3}<br /> ListElement { icon: "Images/widget5.png"; gridId: 4}<br /> ListElement { icon: "Images/widget6.png"; gridId: 5}<br /> ListElement { icon: "Images/widget7.png"; gridId: 6}<br /> ListElement { icon: "Images/widget8.png"; gridId: 7}<br /> ListElement { icon: "Images/widget9.png"; gridId: 8}<br />}</code>
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}
}</code>


'''IconItem.qml'''<br /><code>import QtQuick 1.0
'''IconItem.qml'''
<code>import QtQuick 1.0


Component {<br /> Item {<br /> id: main<br /> width: grid.cellWidth; height: grid.cellHeight<br /> Image {<br /> id: item; parent: loc<br /> x: main.x + 5; y: main.y + 5<br /> width: main.width - 10; height: main.height - 10;<br /> fillMode: Image.PreserveAspectFit; smooth: true<br /> source: icon<br /> Rectangle {<br /> anchors.fill: parent;<br /> border.color: "#326487"; border.width: 6<br /> color: "transparent"; radius: 5<br /> visible: item.state  "active"
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 x { enabled: item.state != "active"; NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
Line 27: Line 58:
             }
             }
             states: State {
             states: State {
                 name: "active"; when: loc.currentId  gridId<br /> PropertyChanges { target: item; x: loc.mouseX - width/2; y: loc.mouseY - height/2; scale: 0.5 }<br /> }<br /> transitions: Transition { NumberAnimation { property: "scale"; duration: 200} }<br /> }<br /> }<br />}</code>
                 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} }
}
}
}</code>


'''Main.qml'''<br /><code>import QtQuick 1.0
'''Main.qml'''
<code>import QtQuick 1.0


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


'''ビデオ'''<br />[YouTubeID:4tt5hQYS4Fo]
'''ビデオ'''
[YouTubeID:4tt5hQYS4Fo]


関連するフォーラムのスレッド:<br />"iOS Style Rearrange of Icons":http://developer.qt.nokia.com/forums/viewthread/2327/
関連するフォーラムのスレッド:
"iOS Style Rearrange of Icons":http://developer.qt.nokia.com/forums/viewthread/2327/

Revision as of 11:40, 25 February 2015

English | 日本語 | Български

この記事はいくつかのフォーラムのスレッド(下部にリンクしました)での質問と回答を受けて作成されたものです。コードや解説でのこの記事への貢献を歓迎します。

GridView でのドラッグ&amp;ドロップ

このサンプルは iOS スタイルのドラッグ&amp;ドロップ( "参考ビデオ":http://www.youtube.com/watch?v=qnXoGnUU6uI )を GridView と ListModel で作成したものです。

このサンプルは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 &amp;amp;&amp;amp; 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 &amp;&amp; index |= -1 &amp;&amp; index ]]= 1 &amp;&amp; index != newIndex)
 icons.move(newIndex, newIndex = index, 1)
 }
 }
}

ビデオ [YouTubeID:4tt5hQYS4Fo]

関連するフォーラムのスレッド: "iOS Style Rearrange of Icons":http://developer.qt.nokia.com/forums/viewthread/2327/