如何突出显示委托 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: ["*"]
    }
}

这仅在我使用键盘时有效。如何让它在鼠标点击时起作用？

Answer 1

要对鼠标事件做出反应，您需要放置 MouseArea 项。

在下面的示例中（作为您提供的代码的扩展版本），我向委托项添加了一个 MouseArea，单击该委托项将设置 ListView 的 currentIndex 到代表的 index（在 ListView 的代表中可见的特殊属性）。

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: ["*"]
    }
}

作为替代方法，您可以尝试放置一个 MouseArea 来填充整个 ListView 并使用 ListView 的 indexAt(int x, int y) 方法来检查单击了哪个委托。但是，在这种情况下，您需要关心更多的边缘条件。

如何突出显示委托 w.r.t FolderListModel 的单击（鼠标）元素？

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

qml

qtquick2