Qt wiki will be updated on October 12th 2023 starting at 11:30 AM (EEST) and the maintenance will last around 2-3 hours. During the maintenance the site will be unavailable.

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:
[[Drag and Drop within a GridView|English]] | '''日本語''' | [[Drag and Drop within a GridView Bulgarian|Български]]
[[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|Български]]


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


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


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


このサンプルは3つのファイルから構成されています。一つがモデル(WidgetModel.qml)で、一つがデリゲート(IconItem.qml)、最後が GridView (Main.qml)です。
このサンプルは3つのファイルから構成されています。一つがモデル(WidgetModel.qml)で、一つがデリゲート(IconItem.qml)、最後が GridView (Main.qml)です。


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


'''IconItem.qml'''<br />
ListModel {<br /> ListElement { icon: &quot;Images/widget1.png&amp;quot;; gridId: 0}<br /> ListElement { icon: &quot;Images/widget2.png&amp;quot;; gridId: 1}<br /> ListElement { icon: &quot;Images/widget3.png&amp;quot;; gridId: 2}<br /> ListElement { icon: &quot;Images/widget4.png&amp;quot;; gridId: 3}<br /> ListElement { icon: &quot;Images/widget5.png&amp;quot;; gridId: 4}<br /> ListElement { icon: &quot;Images/widget6.png&amp;quot;; gridId: 5}<br /> ListElement { icon: &quot;Images/widget7.png&amp;quot;; gridId: 6}<br /> ListElement { icon: &quot;Images/widget8.png&amp;quot;; gridId: 7}<br /> ListElement { icon: &quot;Images/widget9.png&amp;quot;; gridId: 8}<br />}</code>


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


'''ビデオ'''<br />
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: &quot;#326487&amp;quot;; border.width: 6<br /> color: &quot;transparent&amp;quot;; radius: 5<br /> visible: item.state  &amp;quot;active&amp;quot;
            &amp;#125;
            Behavior on x &amp;#123; enabled: item.state != &amp;quot;active&amp;quot;; NumberAnimation &amp;#123; duration: 400; easing.type: Easing.OutBack &amp;#125; &amp;#125;
            Behavior on y &amp;#123; enabled: item.state != &amp;quot;active&amp;quot;; NumberAnimation &amp;#123; duration: 400; easing.type: Easing.OutBack &amp;#125; &amp;#125;
            SequentialAnimation on rotation &amp;#123;
                NumberAnimation &amp;#123; to:  2; duration: 60 &amp;#125;
                NumberAnimation &amp;#123; to: -2; duration: 120 &amp;#125;
                NumberAnimation &amp;#123; to:  0; duration: 60 &amp;#125;
                running: loc.currentId != -1 &amp;amp;&amp;amp; item.state != &amp;quot;active&amp;quot;
                loops: Animation.Infinite; alwaysRunToEnd: true
            &amp;#125;
            states: State &amp;#123;
                name: &amp;quot;active&amp;quot;; 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: &quot;scale&amp;quot;; duration: 200} }<br /> }<br /> }<br />}</code>


関連するフォーラムのスレッド:<br />[http://developer.qt.nokia.com/forums/viewthread/2327/ iOS Style Rearrange of Icons] ''[developer.qt.nokia.com]''<br />[http://developer.qt.nokia.com/forums/viewthread/2426/ <span class="caps">QML</span> and Drag and Drop] ''[developer.qt.nokia.com]''
'''Main.qml'''<br /><code>import QtQuick 1.0


===Categories:===
Rectangle {<br /> width: 640; height: 480<br /> color: &quot;#222222&amp;quot;<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>


* [[:Category:Developing with Qt|Developing_with_Qt]]
'''ビデオ'''<br />[YouTubeID:4tt5hQYS4Fo]
** [[:Category:Developing with Qt::Qt-Quick|Qt Quick]]
* [[:Category:Developing with Qt::Qt-Quick::QML|QML]]


* [[:Category:Developing with Qt::Qt-Quick::Tutorial|Tutorial]]
関連するフォーラムのスレッド:<br />&quot;iOS Style Rearrange of Icons&amp;quot;:http://developer.qt.nokia.com/forums/viewthread/2327/
 
* [[:Category:Japanese|Japanese]]
* [[:Category:snippets|snippets]]

Revision as of 11:22, 24 February 2015






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

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

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

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

このサンプルは3つのファイルから構成されています。一つがモデル(WidgetModel.qml)で、一つがデリゲート(IconItem.qml)、最後が GridView (Main.qml)です。

WidgetModel.qml

import QtQuick 1.0

ListModel {<br /> ListElement { icon: &quot;Images/widget1.png&amp;quot;; gridId: 0}<br /> ListElement { icon: &quot;Images/widget2.png&amp;quot;; gridId: 1}<br /> ListElement { icon: &quot;Images/widget3.png&amp;quot;; gridId: 2}<br /> ListElement { icon: &quot;Images/widget4.png&amp;quot;; gridId: 3}<br /> ListElement { icon: &quot;Images/widget5.png&amp;quot;; gridId: 4}<br /> ListElement { icon: &quot;Images/widget6.png&amp;quot;; gridId: 5}<br /> ListElement { icon: &quot;Images/widget7.png&amp;quot;; gridId: 6}<br /> ListElement { icon: &quot;Images/widget8.png&amp;quot;; gridId: 7}<br /> ListElement { icon: &quot;Images/widget9.png&amp;quot;; gridId: 8}<br />}

IconItem.qml

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: &quot;#326487&amp;quot;; border.width: 6<br /> color: &quot;transparent&amp;quot;; radius: 5<br /> visible: item.state  &amp;quot;active&amp;quot;
            &amp;#125;
            Behavior on x &amp;#123; enabled: item.state != &amp;quot;active&amp;quot;; NumberAnimation &amp;#123; duration: 400; easing.type: Easing.OutBack &amp;#125; &amp;#125;
            Behavior on y &amp;#123; enabled: item.state != &amp;quot;active&amp;quot;; NumberAnimation &amp;#123; duration: 400; easing.type: Easing.OutBack &amp;#125; &amp;#125;
            SequentialAnimation on rotation &amp;#123;
                NumberAnimation &amp;#123; to:  2; duration: 60 &amp;#125;
                NumberAnimation &amp;#123; to: -2; duration: 120 &amp;#125;
                NumberAnimation &amp;#123; to:  0; duration: 60 &amp;#125;
                running: loc.currentId != -1 &amp;amp;&amp;amp; item.state != &amp;quot;active&amp;quot;
                loops: Animation.Infinite; alwaysRunToEnd: true
            &amp;#125;
            states: State &amp;#123;
                name: &amp;quot;active&amp;quot;; 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: &quot;scale&amp;quot;; duration: 200} }<br /> }<br /> }<br />}

Main.qml

import QtQuick 1.0

Rectangle {<br /> width: 640; height: 480<br /> color: &quot;#222222&amp;quot;<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 />}

ビデオ
[YouTubeID:4tt5hQYS4Fo]

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

Retrieved from "https://wiki-qt-io-staging.herokuapp.com/index.php?title=Drag_and_Drop_within_a_GridView/ja&oldid=5288"