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

From Qt Wiki
Jump to navigation Jump to search
(Decode HTML entity names)
(Sub-categorize)
 
(2 intermediate revisions by one other user not shown)
Line 1: Line 1:
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
 
{{LangSwitch}}
[[Category:snippets]]
[[Category:Snippets::QML]]
[[Category:Developing_with_Qt::Qt Quick]]
[[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]]
[[Category:Japanese]]
[[Category:Japanese]]
[[Drag_and_Drop_within_a_GridView|English]] | '''日本語''' | [[Drag_and_Drop_within_a_GridView_Bulgarian|Български]]


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


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


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

Latest revision as of 13:15, 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 でのドラッグ&ドロップ

このサンプルは iOS スタイルのドラッグ&ドロップ( 参考ビデオ )を 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 && 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)
 }
 }
}

ビデオ https://www.youtube.com/watch?v=4tt5hQYS4Fo

関連するフォーラムのスレッド: iOS Style Rearrange of Icons