[Solved] iOS Style Rearrange of Icons
-
I can't wait to try this on Monday morning.
Here is another complexity: what if I have two different sizes of rectangles that need rearranging?
-
[quote author="kyleplattner" date="1292095856"]Here is another complexity: what if I have two different sizes of rectangles that need rearranging?[/quote]
The GridView will still be a grid of identically sized areas. You'd have space around the smaller ones.
-
They will certainly appear as different sizes. However, as Bradley says, the center of the rectangle will not change. There will just be more space around them.
You can change the spacing of the GridView by using "cellHeight":http://doc.qt.nokia.com/4.7-snapshot/qml-gridview.html#cellHeight-prop and "cellWidth":http://doc.qt.nokia.com/4.7-snapshot/qml-gridview.html#cellWidth-prop properties.If you need variable spacing, perhaps you would prefer a Flow element.
-
I will have to apologize but I started poking around and I cannot figure out the reparenting code. Here is how I have things setup:
@import Qt 4.7
Rectangle {
width: 640
height: 480
color: "#111111"Component { id: widgetmodel Item { width: grid.cellWidth; height: grid.cellHeight Column { anchors.fill: parent Image { source: portrait; anchors.horizontalCenter: parent.horizontalCenter } } } } GridView { id: grid x: 0 y: 0 width: 640 height: 480 anchors.fill: parent cellWidth: 80; cellHeight: 80 model: WidgetModel {} delegate: widgetmodel highlight: Rectangle { color: "lightsteelblue"; radius: 5 } focus: true } MouseArea { id: mouse_area1 x: 0 y: 0 width: grid.width height: grid.height onPressAndHold: { widgetmodel.move(index, listmodel.count - 1, 1) } }}
@ -
Also, if I use flow with a mousearea over it, how would I reparent each of the items in QML?
-
So far this is my flow implementation and it runs and the icons squiggle but I cannot move the widgets around:
@import Qt 4.7
Rectangle {
width: 640
height: 480
color: "#000000"Flow { id:flowtest x: 0 y: 0 anchors.rightMargin: 0 anchors.bottomMargin: 4 anchors.leftMargin: 8 anchors.topMargin: 4 anchors.fill: parent anchors.margins: 4 spacing: 10 Image { source: "Images/widget.png" id: number1 PropertyAnimation on x { running: number1.state=="squiggle"; from: number1.x; to: number1.x + 1; duration: 100; loops: Animation.Infinite; easing.type: Easing.OutInBounce } PropertyAnimation on y { running: number1.state=="squiggle"; from: number1.y; to: number1.y + 1; duration: 100; loops: Animation.Infinite; easing.type: Easing.OutInBounce } } Image { source: "Images/widget.png" id: number2 PropertyAnimation on x { running: number1.state=="squiggle"; from: number2.x; to: number2.x - 1; duration: 100; loops: Animation.Infinite; easing.type: Easing.OutInBounce } PropertyAnimation on y { running: number1.state=="squiggle"; from: number2.y; to: number2.y - 1; duration: 100; loops: Animation.Infinite; easing.type: Easing.OutInBounce } } Image { source: "Images/widget.png" id: number3 PropertyAnimation on x { running: number1.state=="squiggle"; from: number3.x; to: number3.x + 1; duration: 100; loops: Animation.Infinite; easing.type: Easing.OutInBounce } PropertyAnimation on y { running: number1.state=="squiggle"; from: number3.y; to: number3.y + 1; duration: 100; loops: Animation.Infinite; easing.type: Easing.OutInBounce } } Image { source: "Images/widget.png" id: number4 PropertyAnimation on x { running: number1.state=="squiggle"; from: number4.x; to: number4.x - 1; duration: 100; loops: Animation.Infinite; easing.type: Easing.OutInBounce } PropertyAnimation on y { running: number1.state=="squiggle"; from: number4.y; to: number4.y - 1; duration: 100; loops: Animation.Infinite; easing.type: Easing.OutInBounce } } Image { source: "Images/widget.png" id: number5 PropertyAnimation on x { running: number1.state=="squiggle"; from: number5.x; to: number5.x + 1; duration: 100; loops: Animation.Infinite; easing.type: Easing.OutInBounce } PropertyAnimation on y { running: number1.state=="squiggle"; from: number5.y; to: number5.y + 1; duration: 100; loops: Animation.Infinite; easing.type: Easing.OutInBounce } } Image { source: "Images/widget.png" id: number6 PropertyAnimation on x { running: number1.state=="squiggle"; from: number6.x; to: number6.x - 1; duration: 100; loops: Animation.Infinite; easing.type: Easing.OutInBounce } PropertyAnimation on y { running: number1.state=="squiggle"; from: number6.y; to: number6.y - 1; duration: 100; loops: Animation.Infinite; easing.type: Easing.OutInBounce } } Image { source: "Images/widget.png" id: number7 PropertyAnimation on x { running: number1.state=="squiggle"; from: number7.x; to: number7.x - 1; duration: 100; loops: Animation.Infinite; easing.type: Easing.OutInBounce } PropertyAnimation on y { running: number1.state=="squiggle"; from: number7.y; to: number7.y - 1; duration: 100; loops: Animation.Infinite; easing.type: Easing.OutInBounce } } Image { source: "Images/widget.png" id: number8 PropertyAnimation on x { running: number1.state=="squiggle"; from: number8.x; to: number8.x + 1; duration: 100; loops: Animation.Infinite; easing.type: Easing.OutInBounce } PropertyAnimation on y { running: number1.state=="squiggle"; from: number8.y; to: number8.y + 1; duration: 100; loops: Animation.Infinite; easing.type: Easing.OutInBounce } } Transition { NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad } } } MouseArea { id: mouse_area1 x: 0 y: 0 width: 640 height: 480 drag.target: number1 onPressAndHold:{ if(number1.state != "squiggle") { number1.state="squiggle" number2.state="squiggle" number3.state="squiggle" number4.state="squiggle" number5.state="squiggle" number6.state="squiggle" number7.state="squiggle" number8.state="squiggle" } else { number1.state="Base State" number2.state="Base State" number3.state="Base State" number4.state="Base State" number5.state="Base State" number6.state="Base State" number7.state="Base State" number8.state="Base State" } } }}
@ -
I don't now that reparenting was the right word to use. I just want to move them and have them snap to a new location while the other icons fill in around it.
-
This has been made in to a Wiki Entry: http://developer.qt.nokia.com/wiki/Drag_and_Drop_within_a_GridView
-
I used the code in the following path, but when i added more list modle element in the list , i can't scroll the list if i want to move the last element in the end, what should i do ?
This has been made in to a Wiki Entry: http://developer.qt.nokia.com/wiki/Drag_and_Drop_within_a_GridView