列表视图高亮显示移动非常缓慢

Question

我已经使用模型-视图-委托范式实现了一个简单的QML应用程序。在我的应用程序中，我使用highlight属性为我的ListView的当前选定项目加下划线。选择效果很好，但当我单击远处的项目时，高亮显示的移动相当缓慢。

考虑以下示例：

import QtQuick 2.5
ApplicationWindow {
    width: 500
    height: 400
    title: qsTr("List test")
    visible: true
    ListView {
        id: view
        anchors.fill: parent
        model: 20
        delegate: Rectangle {
            border.color: "steelblue"
            color: Qt.lighter(border.color)
            width: ListView.view.width
            height: 20
            Text { anchors.centerIn: parent; z: 2; text: index + 1 }
            MouseArea {
                anchors.fill: parent
                onClicked: view.currentIndex = index
            }
        }
        highlight: Rectangle {
            border.color: "yellow"
            border.width: 3
            color: "transparent"
            height: 20
            width: ListView.view.width
            z: Infinity
        }
    }
}

如果选择最后一个元素，高亮显示将在到达选定元素之前移动到所有其他项目上。这不是我所期望的行为。如何将突出显示直接移动到末尾？

Answer 1

根据highlightFollowsCurrentItem:的文档，您所经历的行为是预期的行为

此属性保存高亮显示是否由视图管理。

如果此属性为true（默认值），高亮显示将平滑地移动到当前项之后。否则，高光不会被视图移动，任何移动都必须由高光实现。

高亮显示动画由highlightMoveDuration和highlightMoveVelocity属性控制。速度设置为400 pixels/second，该值可能对应于具有长视图的高密度设备上的长时间运行的动画。

您可以通过两种不同的方式解决问题：

• 通过微调上述特性（例如通过设置非常小的highlightMoveDuration或高的highlightMoveVelocity）
• 通过将highlightFollowsCurrentItem设置为false并直接管理高亮动画

在第二种情况下，放弃动画，直接将高亮显示的y位置与当前选定代理的y绑定。通过这种方式，高亮显示会立即移动到选定的代表，如下面的示例所示：

import QtQuick 2.5
ApplicationWindow {
    width: 500
    height: 400
    title: qsTr("List test")
    visible: true
    ListView {
        id: view
        anchors.fill: parent
        model: 20
        highlightFollowsCurrentItem: false    // force discarding default animation
        delegate: Rectangle {
            border.color: "steelblue"
            color: Qt.lighter(border.color)
            width: ListView.view.width
            height: 20
            Text { anchors.centerIn: parent; z: 2; text: index + 1 }
            MouseArea {
                anchors.fill: parent
                onClicked: view.currentIndex = index
            }
        }
        highlight: Rectangle {
            border.color: "yellow"
            border.width: 3
            color: "transparent"
            height: 20
            width: ListView.view.width
            y:  view.currentItem.y      // highlighting direct binding to selected item!
            z: Infinity
        }
    }
}