I have a small problem, maybe someone on the list can help.
I have an application with two views. In the first view, there are a
number of items displayed in a GridView. In the second view there is
just one item with some text beside it. What I am trying to accomplish
is a smooth transition between two views. When an item is clicked in the
first view, the selected item should slide to the left, and the rest of
the items should fade away.
The attached files contain a minimal implementation I have come up with.
The only problem is that I cannot figure out how to start the animation
of the selected item in the correct place, as indicated in the onClicked
handler in the code. In other words, I need to find the coordinates of
the selected item in the application's coordinate system. It seems that
Item::mapToItem() should do the job, but I have not found a way to use
it from QML without going via C++.
It is certainly possible that there is a much better way to accomplish
the same effect in QML. If so, please show me the error in my ways.
--
Pertti
/* File generated by QtCreator */
import QmlProject 1.0
Project {
/* Include .qml, .js, and image files from current directory and
subdirectories */
QmlFiles {
directory: "."
}
JavaScriptFiles {
directory: "."
}
ImageFiles {
directory: "."
}
/* List of plugin directories passed to QML runtime */
// importPaths: [ "../exampleplugin" ]
}
import Qt 4.7
Rectangle {
width: 200
height: 200
id: app
ListModel {
id: list_model1
ListElement {
name: "red"
}
ListElement {
name: "green"
}
ListElement {
name: "blue"
}
}
Text {
id: text1
x: 133
y: 17
width: 80
height: 20
text: "text"
opacity: 0
}
Component {
id: list_delegate1
Item {
width: parent.width
height: parent.height
Rectangle { color: name; width: 100; height: 100 }
MouseArea {
anchors.fill: parent
onClicked: {
text1.text = name
rectangle1.color = name
// rectangle1.x = ?
// rectangle1.y = ?
app.state = "State1"
}
}
}
}
GridView {
id: grid_view1
model: list_model1
delegate: list_delegate1
x: 0
y: 0
width: 400
height: 200
cellHeight: 120
cellWidth: 120
opacity: 1
}
Rectangle {
id: rectangle1
x: 100
y: 100
width: 100
height: 100
color: "#ffffff"
opacity: 0
}
states: [
State {
name: "State1"
PropertyChanges {
target: text1
opacity: 1
}
PropertyChanges {
target: rectangle1
x: 0
y: 0
opacity: 1
}
PropertyChanges {
target: grid_view1
x: 0
y: 0
opacity: 0
}
}
]
transitions: [
Transition {
from: ""
to: "State1"
NumberAnimation { properties: "x,y,opacity"; duration: 2000 }
}
]
}
_______________________________________________
Qt-qml mailing list
Qt-qml@trolltech.com
http://lists.trolltech.com/mailman/listinfo/qt-qml
