How to select a item(ex.image) in listview and display it in a new page?
-
Hi All,
I am trying to develop a code where i have a listview containing 4 images.. when i click on the first image it should display in a new window and when i flick it,the next images should be displayed."I have tried this link but could not find any code for clicking on the list-view:"
http://doc.qt.nokia.com/qt-components-symbian/qml-listitem.html
Thanks if any one finds me a solution!!! -
Hi,
in your delegate you need something like this:
@
ListItem {
onClicked: {
pageId.pageStack.push( Qt.resolvedUrl( "NewWindow.qml" ), { "model" = yourModelId, "index" = index } )
}
}
@This way you pass your model that contains images and current item index to new page. In new page you need to declare two properties:
@
property Item model: 0
property int index: -1
@Now on flick you can increment index and get next image from model. Fr more information see model documentation.
-
Hi,
I had displayed my code which you have asked me to add!! But, I am getting errors.as
Invalid property assignment: unsupported type "UserType"@ ListView {
id: listview1
x: 0
y: 0
width: 360
height: 640
clip: true
header: ListHeading {
ListItemText {
text: "ListHeading"
anchors.fill: parent.paddingItem
role: "Heading"
}
}
delegate: ListItem {
id: listItem
ListItem {
onClicked: {
mainPage.pageStack.push( Qt.resolvedUrl( "hi.qml" ), { "model" : mode , "index" : index } )
}
}Column { anchors.fill: parent.paddingItem ListItemText { width: parent.width Text { x: 100 y: 5 color: blue text: titleText } Image { id:li x: 0 y: 5 width: 50 height: 50 source: model.red } } } } model: id:mode ListModel { ListElement { titleText: "jellyfish" blue: "white" red: "jellyfish.JPG" } ListElement { titleText: "Koala" blue: "white" red: "Koala.JPG" } ListElement { titleText: "Lighthouse" blue: "white" red: "Lighthouse.JPG" } ListElement { titleText: "Penguins" blue: "white" red: "Penguins.JPG" } ListElement { titleText: "Tulips" blue: "white" red: "Tulips.JPG" } } }
} @
Thanks if you find me a solution!
-
Hi,
I can able to send the call to next page.. but i am having trouble in this part..{ "model" = yourModelId, "index" = index } )
where it says: Error: Cannot assign to non-existent property "model"
-
In hi.qml in main element you should define property model :
@
property ListModel model
@ -
Hi,
This is the code i tried in hi.qml@import QtQuick 1.0
import com.nokia.symbian 1.0Rectangle {
property ListModel modelwidth: 360 height: 640
}@
I am getting error as - Error: Cannot assign QString to QDeclarativeListModel*
-
I'm sorry. My mistake. Passing arguments is without ""
@
{ model = yourModelId, currIndex = index }
@ -
HI,
It's Ok sir.But still i am getting error as: Cannot assign to non-existent property "model".. Even though i have removed the double quotes and tried it.. What should i give in hi.qml? I have simply declared what u have said earlier..
I thought that index should be set for all the images and when clicked it should display in a new page and when flicked it should retrive all the images in a queue i guess..
Do you get my point sir. -
Hi,
I can't unterstand what is the problem. But I can suggest you this solution:
Store you model in separate file: Model.qml
@
import QtQuick 1.1ListModel {
ListElement {
titleText: "jellyfish"
blue: "white"
red: "jellyfish.JPG"
}ListElement { titleText: "Koala" blue: "white" red: "Koala.JPG" } ListElement { titleText: "Lighthouse" blue: "white" red: "Lighthouse.JPG" } ListElement { titleText: "Penguins" blue: "white" red: "Penguins.JPG" } ListElement { titleText: "Tulips" blue: "white" red: "Tulips.JPG" }
}
@In fist page you've got:
@
import QtQuick 1.1
import com.nokia.symbian 1.1Page {
id: mainPageListView { id: listview1 anchors.fill: parent x: 0 y: 0 width: 360 height: 640 clip: true header: ListHeading { ListItemText { text: "ListHeading" anchors.fill: parent.paddingItem role: "Heading" } } delegate: ListItem { id: listItem ListItem { onClicked: { mainPage.pageStack.push( Qt.resolvedUrl( "hi.qml" ), { "currIndex" : index } ) } } Column { anchors.fill: parent.paddingItem ListItemText { width: parent.width Text { x: 100 y: 5 color: blue text: titleText } Image { id:li x: 0 y: 5 width: 50 height: 50 source: model.red } } } } model: Model {} }
}
@And in hi.qml something like this:
@
Page {
id: mainPageproperty int currIndex: 0 property ListModel model: Model { id: model } Image { id: img anchors.fill: parent source: model.get( currIndex ).red MouseArea { anchors.fill: parent onClicked: mainPage.currIndex++ } }
}
@ -
Hi Sir,
Thank you very much!!! I got the required result
Again a huge thanks... -
Hi,
one thing i could not do is, i am not able to move the picture back.I mean both sides.
The picture is moving only on one direction.. I want to move it both left and right.
Whether i have to assign index value for all the images or i should change the condition which you had given... -
Hi,
change the condition. currIndex is the index of current image in the model. You can modify this index whatever you want ( increase, decrease, set to some value ). Also you can get model "size":http://doc.qt.nokia.com/4.7-snapshot/qml-listmodel.html#count-prop and check if currIndex is bigger. In that case you can stop increasing currIndex or go back to 0.