High light do not upate?

Hi All,
I whan to high light the current item of listview. But the highlight bar do not update when I click , it always say at top of list.
It seems that current item never updated when mouse clicked! If I update currentItemIndex manually, the hightlight bar can move. What's wrong with it?

Code:

---

Rectangle {
        width: 180; height: 200
        ListModel {
            id: contactModel
            ListElement {
                name: "Bill Smith"
                number: "555 3264"
            }
            ListElement {
                name: "John Brown"
                number: "555 8426"
            }
            ListElement {
                name: "Sam Wise"
                number: "555 0473"
            }
        }
        Component {
            id: contactDelegate
            Item {
                width: 180; height: 40
                Column {
                    Text { text: '<b>Name:</b> ' + name }
                    Text { text: '<b>Number:</b> ' + number }
                }
            }
        }
 
        ListView {
            anchors.fill: parent
            model: contactModel
            delegate: contactDelegate
            highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
            focus: true
        }
    }

---

The current item is not updated when you click the mouse because you have no mouse areas that would accept the click and interpret it. You need to modify the currentIndex property of the view yourself if you want the current index to change upon clicking an item.

I add mouse area to change current index. But it is ugly to hard code view id in mourse area. How can mourse area know delegate's view?

Code:

---

ListModel {
        id: contactModel
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
    }
 
 
    Rectangle {
        width: 180; height: 200
 
        Component {
            id: contactDelegate
            Item {
                width: 180; height: 40
                Column {
                    Text { text: '<b>Name:</b> ' + name }
                    Text { text: '<b>Number:</b> ' + number }
                }
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        testListView.currentIndex = index  [COLOR="#FF0000"]# it is ugly, how can mouse area know view but not hard code view's ID?[/COLOR]
                    }
                }
            }
        }
 
        ListView {
            id: testListView
            anchors.fill: parent
            model: contactModel
            delegate: contactDelegate
            highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
            focus: true
        }
    }

---

Quote:

---

Originally Posted by Abel

I add mouse area to change current index. But it is ugly to hard code view id in mourse area. How can mourse area know delegate's view?

---

Each item gets a "ListView" attached property which in turn has a "view" property pointing to the view itself.

Code:

---

Component {
  id: contactDelegate
  Item {
    id: delegateRoot
    // ...
    MouseArea {
      // ...
      onClicked: {
        delegateRoot.ListView.view.currentIndex = index
      }
    }
  }
}

---

wysota,
when I try with this code,

Code:

---

Component {
                        id: listControlerDelegate
                        Item{
                            width : parent.width
                            height: 25
                            MouseArea{
                                anchors.fill: parent
                                onClicked: {
//                                    listControler.currentIndex = index
[B]                                    delegateRoot.ListView.view.currentIndex = index[/B]
                                }
                            }

---

it report that:
ReferenceError: delegateRoot is not defined.
How can a item know it's view?

Compare my code and yours. Look for "delegateRoot".

wysota,
Thank you. After set id : delegateRoot, it works.
I thought delegateRoot is attribute of Item, so made such mistake.