How to remember the previous selected item in this example



  • This is the simple ListView Example code. Here I need to achieve Highlight the selected/clicked item and de-select the previous highlighted item.
    Can someone help me achieve this. I couldn’t find the way to remember the previously selected item. Will the Javascript help to achieve this?

    Thanks in advance
    ~ Raghava

    @import Qt 4.7
    Rectangle {
    width: 360
    height: 640
    ListModel{
    id: lisModelExample
    ListElement{ name: 'Apple'}
    ListElement{ name: 'Ball'}
    ListElement{ name: 'Cat'}
    ListElement{ name: 'Doll'}
    }
    ListView{
    id: listViewExample
    width: 360
    height: 640
    model: lisModelExample
    delegate: delegateExample
    }
    Component{
    id: delegateExample
    Rectangle{
    id: listItem
    width: 360
    height: 40
    MouseArea {
    anchors.fill: parent
    onClicked: listItem.state == 'highlight' ? listItem.state = "" : listItem.state = 'highlight';
    }
    states: State {
    name: "highlight"
    PropertyChanges {
    target: listItem
    color: "#fbf70a"
    }
    }
    Text{
    x: 10
    y: 10
    text: model.name
    }

         }
     }
    

    }@



  • Why are you creating the highlight like that?

    The QML view elements have a build in capability of creating a highlight for the current item. What's more, you are explicitly warned not to store state in a delegate. That is exactly what you are doing.



  • Hi Andre,

    Do you any link where I can read more about these built-in capabilities in view elements. I couldn't able to find one on documentation.



  • Well, the "QML ListView Element documentation":http://doc.qt.nokia.com/4.7/qml-listview.html would be a good start. Especially the documentation on members that start with the word "highlight" would be relevant, I'd say.



  • Thanks for your input. It helps my requirements.



  • i don't like built-in highlight. You can do this:

    @import Qt 4.7
    Rectangle {
    width: 360
    height: 640
    ListModel{
    id: lisModelExample
    ListElement{ name: 'Apple'}
    ListElement{ name: 'Ball'}
    ListElement{ name: 'Cat'}
    ListElement{ name: 'Doll'}
    }
    ListView{
    id: listViewExample
    width: 360
    height: 640
    model: lisModelExample
    delegate: delegateExample
    }
    Component{
    id: delegateExample
    Rectangle{
    id: listItem
    width: 360
    height: 40
    MouseArea {
    anchors.fill: parent
    onClicked: listViewExample.currentIndex=index
    }
    states: State {
    name: "highlight"
    when:index==listViewExample.currentIndex
    PropertyChanges {
    target: listItem
    color: "#fbf70a"
    }
    }
    Text{
    x: 10
    y: 10
    text: model.name
    }

         }
     }
    

    }@



  • Kxyu, yeah you're code worked quite well. Thanks for that

    Andre, I'm wondering why even after using the "hightlight" property in the ListView didn't work out for me. I just used the sample code and followed the steps as mentioned in the documentation.

    @import Qt 4.7
    Rectangle {
    id: body
    width: 360
    height: 640

     ListModel{
         id: lisModelExample
         ListElement{ name: 'Apple'}
         ListElement{ name: 'Ball'}
         ListElement{ name: 'Cat'}
         ListElement{ name: 'Doll'}
     }
    
     ListView{
         id: listViewExample
         width:  360
         height:  640
         model: lisModelExample
         delegate: delegateExample
         highlight: highLightItem
         focus: true
     }
    
     Component{
         id: delegateExample
         Text{
             id: textLabel
             x: 10
             y: 10
             text:  model.name
         }
     }
    
     Component {
         id: highLightItem
         Rectangle {
             width: 180; height: 20
             color: "lightsteelblue"; radius: 5
             y: listViewExample.currentItem.y
             Behavior on y {
                 SpringAnimation {
                     spring: 3
                     damping: 0.2
                 }
             }
         }
     }
    

    }@



  • Hmm.. Interesting. If I navigate using Keyboard, the Highlight is working fine. But not with the mouse click on the item.

    Added MouseArea in the delegate-item to make it work. Is that right way to do?

    @ Component{
    id: delegateExample
    Text{
    id: textLabel
    x: 10
    y: 10
    text: model.name

             MouseArea{
                 anchors.fill : parent
                 onClicked: {
                     listViewExample.currentIndex = index;
                 }
             }
         }
     }
    

    @



  • [quote author="raghava.chinnappa" date="1294696961"]Added MouseArea in the delegate-item to make it work. Is that right way to do?
    [/quote]

    Yes, that's correct -- the QML views do not automatically set the currentIndex/currentItem by mouse; it is up to the developer to decide how they want to handle that (unfortunately, this doesn't seem to be well documented at the moment; we'll add additional docs for this moving forward).

    Regards,
    Michael


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.