Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to select a item(ex.image) in listview and display it in a new page?
Forum Updated to NodeBB v4.3 + New Features

How to select a item(ex.image) in listview and display it in a new page?

Scheduled Pinned Locked Moved QML and Qt Quick
12 Posts 2 Posters 7.8k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • T Offline
    T Offline
    task_struct
    wrote on last edited by
    #2

    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.

    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program."

    • Linu...
    1 Reply Last reply
    0
    • N Offline
      N Offline
      Naufal
      wrote on last edited by
      #3

      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!

      Regards,
      Naufal.A

      1 Reply Last reply
      0
      • N Offline
        N Offline
        Naufal
        wrote on last edited by
        #4

        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"

        Regards,
        Naufal.A

        1 Reply Last reply
        0
        • T Offline
          T Offline
          task_struct
          wrote on last edited by
          #5

          In hi.qml in main element you should define property model :

          @
          property ListModel model
          @

          "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program."

          • Linu...
          1 Reply Last reply
          0
          • N Offline
            N Offline
            Naufal
            wrote on last edited by
            #6

            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*

            Regards,
            Naufal.A

            1 Reply Last reply
            0
            • T Offline
              T Offline
              task_struct
              wrote on last edited by
              #7

              I'm sorry. My mistake. Passing arguments is without ""

              @
              { model = yourModelId, currIndex = index }
              @

              "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program."

              • Linu...
              1 Reply Last reply
              0
              • N Offline
                N Offline
                Naufal
                wrote on last edited by
                #8

                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.

                Regards,
                Naufal.A

                1 Reply Last reply
                0
                • T Offline
                  T Offline
                  task_struct
                  wrote on last edited by
                  #9

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

                  }
                  @

                  "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program."

                  • Linu...
                  1 Reply Last reply
                  0
                  • N Offline
                    N Offline
                    Naufal
                    wrote on last edited by
                    #10

                    Hi Sir,
                    Thank you very much!!! I got the required result
                    Again a huge thanks...

                    Regards,
                    Naufal.A

                    1 Reply Last reply
                    0
                    • N Offline
                      N Offline
                      Naufal
                      wrote on last edited by
                      #11

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

                      Regards,
                      Naufal.A

                      1 Reply Last reply
                      0
                      • T Offline
                        T Offline
                        task_struct
                        wrote on last edited by
                        #12

                        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.

                        "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program."

                        • Linu...
                        1 Reply Last reply
                        0

                        • Login

                        • Login or register to search.
                        • First post
                          Last post
                        0
                        • Categories
                        • Recent
                        • Tags
                        • Popular
                        • Users
                        • Groups
                        • Search
                        • Get Qt Extensions
                        • Unsolved