High light do not upate?

[Abel]

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?

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

[wysota]

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.

[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?

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 # it is ugly, how can mouse area know view but not hard code view's ID?
}
}
}
}

ListView {
id: testListView
anchors.fill: parent
model: contactModel
delegate: contactDelegate
highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
focus: true
}
}

[wysota]

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.

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

[Abel]

wysota,
when I try with this code,


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

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

[wysota]

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

[Abel]

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