[Solved] iOS Style Rearrange of Icons
-
So has anyone confirmed that rearranging an item in the grid view will cause the items to rearrange.
-
I can confirm this.
Where your model is:
@
model: EventModel {id: listmodel}
@
You can remove the object from the grid using:
@
listmodel.remove(index)
@
Or simply move it to the end of the grid while you re-parent it and assign it to a new object:
@
listmodel.move(index, listmodel.count - 1, 1)
@
And the grid will automatically refit. Note: Use the onRemove signal to create a fancy animation to go with this. Or use Behaviour modifiers.You can also use "Flow":http://doc.qt.nokia.com/latest/qml-flow.html QML element as an alternative to GridView. It doesn't support model/delegate but rather Loader's and Qt.createObject's. As there is no predefined order, the order is created only from what appears. So you can remove objects from the view and have them realign depending on visibility/opacity and position.
-
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