How to highlight the clicked (by mouse) element of a delegate w.r.t FolderListModel?

Question

import QtQuick 2.0
import Qt.labs.folderlistmodel 2.0

Item
{
    Component {
        id: highlight
        Rectangle {
            id: rooot
            width: 180; height: 20
            color: ListView.isCurrentItem ? "black" : "red"; radius: 5

            y: list.currentItem.y
            Behavior on y {
                SpringAnimation {
                    spring: 3
                    damping: 0.2
                }
            }
        }
    }

    ListView {
        id: list
        width: 480; height: 400
        model: folderModel
        delegate: Text { id: h; text: fileName }

        highlight: highlight
        highlightFollowsCurrentItem: false

        focus: true
    }

    FolderListModel
    {
        id: folderModel
        folder:      "/home/anisha/"
        nameFilters: ["*"]
    }
}

This works only when I use keyboard. How to make it work on mouse clicks?

Answer 1

To react on mouse events you need to place MouseArea item.

In the sample below (being an expanded version of the code you provided) I have added a MouseArea to the delegate item that upon being clicked sets the ListView's currentIndex to the delegate's index (a special property visible in the ListView's delegate).

import QtQuick 2.0
import Qt.labs.folderlistmodel 2.0

Item
{
    Component {
        id: highlight
        Rectangle {
            id: rooot
            width: 180; height: 20
            color: ListView.isCurrentItem ? "black" : "red"; radius: 5

            y: list.currentItem.y
            Behavior on y {
                SpringAnimation {
                    spring: 3
                    damping: 0.2
                }
            }
        }
    }

    ListView {
        id: list
        width: 480; height: 400
        model: folderModel
        delegate:
        Text {
            id: h;
            text: fileName

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

        highlight: highlight
        highlightFollowsCurrentItem: false

        focus: true
    }

    FolderListModel
    {
        id: folderModel
        folder:      "/home/anisha/"
        nameFilters: ["*"]
    }
}

As an alternative approach you might try placing a single MouseArea filling the whole ListView and use ListView's indexAt(int x, int y) method to check which delegate was clicked. However, you would need to care about more edge-conditions in such case.