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

【问题标题】：How to highlight the clicked (by mouse) element of a delegate w.r.t FolderListModel?如何突出显示委托 w.r.t FolderListModel 的单击（通过鼠标）元素？
【发布时间】：2015-04-19 04:53:30
【问题描述】：

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

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

【问题讨论】：

QML Listview selected item highlight on click的可能重复
您需要在您的委托中插入MouseArea 并提供下一个代码：MouseArea { anchors.fill: parent; onClicked: list.currentIndex = index }
@troyane 谢谢，我在发布这个问题后发现。
最好以相反的顺序进行:)

标签： qml qtquick2

【解决方案1】：

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

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

导入 QtQuick 2.0 导入 Qt.labs.folderlistmodel 2.0 物品 { 零件 { id: 高亮长方形 { id: 根宽度：180；身高：20 颜色：ListView.isCurrentItem ？ “黑红”;半径：5 y：list.currentItem.y y { 上的行为弹簧动画{ 弹簧：3 阻尼：0.2 } } } } 列表显示 { 编号：列表宽度：480；身高：400 型号：文件夹型号代表：文本 { 编号：h；文本：文件名鼠标区 { anchors.fill：父级 onClicked: list.currentIndex = index } } 亮点：突出 highlightFollowsCurrentItem：假重点：真 } 文件夹列表模型 { id: 文件夹模型文件夹：“/home/anisha/” 名称过滤器：[“*”] } }

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

【讨论】：