列表视图突出显示移动非常缓慢

Listview highlight moves very slowly

我已经使用模型-视图-委托范例实现了一个简单的 QML 应用程序。在我的应用程序中,我使用 highlight 属性 来强调我的 ListView 当前 selected 项目。选择工作正常,但是当我单击远离的项目时,突出显示移动得非常慢。

考虑以下示例:

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

如果您 select 最后一个元素,突出显示会在到达 selected 之前移过所有其他项目。那不是我期望的行为。怎样才能把高亮直接移到最后?

根据 highlightFollowsCurrentItem 的文档:

,您遇到的行为是预期行为

This property holds whether the highlight is managed by the view.

If this property is true (the default value), the highlight is moved smoothly to follow the current item. Otherwise, the highlight is not moved by the view, and any movement must be implemented by the highlight.

高亮动画由highlightMoveDuration and highlightMoveVelocity 属性控制。速度设置为400 pixels/second,该值可以对应于具有长视图的高密度设备上的长运行动画。

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

  • 通过微调上述属性(例如,设置非常小的 highlightMoveDuration 或很高的 highlightMoveVelocity
  • 通过设置highlightFollowsCurrentItemfalse直接管理高亮动画

在第二种情况下,您放弃动画并直接将突出显示 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
        }
    }
}