Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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.0

    Rectangle {
    property ListModel model

    width: 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.1

    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"
    }
    

    }
    @

    In fist page you've got:
    @
    import QtQuick 1.1
    import com.nokia.symbian 1.1

    Page {
    id: mainPage

    ListView {
        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: mainPage

    property 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.


Log in to reply