动画 `positionViewAtIndex`

Question

我ListView展示了一个模型，我可能会在其中的随机位置添加一个条目。

现在我想查看我的新条目，并尝试将 ListView 移动到它，使用

positionViewAtIndex(newIndex, ListView.Visible)

但这种改变有时感觉很艰难。有没有可能用som动画来平滑它？

一个有点冗长的例子：

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow
{
    width: 1024
    height: 800
    visible: true
    property int lastAddedIndex: -1
    onLastAddedIndexChanged: lv.positionViewAtIndex(lastAddedIndex, ListView.Contain)

    Button {
        property int num: 10
        text: 'Add element: ' + num
        onClicked: {
            lastAddedIndex = Math.floor(Math.random(num) * lm.count)
            lm.insert(lastAddedIndex, { num : this.num })
            num++
        }
    }

    ListModel {
        id: lm
        ListElement { num: 0 }
        ListElement { num: 1 }
        ListElement { num: 2 }
        ListElement { num: 3 }
        ListElement { num: 4 }
        ListElement { num: 5 }
        ListElement { num: 6 }
        ListElement { num: 7 }
        ListElement { num: 8 }
        ListElement { num: 9 }
    }

    ListView {
        id: lv
        model: lm
        y: 150
        width: 800
        height: 100
        spacing: 2
        clip: true
        orientation: ListView.Horizontal
        delegate: Rectangle {
            width: 150
            height: 100
            border.color: 'black'
            color: lastAddedIndex === index ? 'purple' : 'white'
            Text {
                anchors.centerIn: parent
                text: index + ': ' + num
            }
        }
        add: Transition { NumberAnimation { property: 'width'; from: 0; to: 150; duration: 600 } }
    }
}

Answer 1

您可以通过为 contentX 添加附加动画元素（因为您的元素水平放置）来实现，并且运行它是为了在给定索引处动画更改视图位置，它会给你平滑动画：

source

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow
{
    width: 1024
    height: 800
    visible: true
    property int lastAddedIndex: -1
    onLastAddedIndexChanged: gotoIndex(lastAddedIndex)

    function gotoIndex(idx) {
        anim.running = false;

        var pos = lv.contentX;
        var destPos;

        lv.positionViewAtIndex(idx, ListView.Contain);
        destPos = lv.contentX;

        anim.from = pos;
        anim.to = destPos;
        anim.running = true;
    }

    NumberAnimation { id: anim; target: lv; property: "contentX"; duration: 500 }

    Button {
        property int num: 10
        text: 'Add element: ' + num
        onClicked: {
            lastAddedIndex = Math.floor(Math.random(num) * lm.count)
            lm.insert(lastAddedIndex, { num : this.num })
            num++
        }
    }

    ListModel {
        id: lm
        ListElement { num: 0 }
        ListElement { num: 1 }
        ListElement { num: 2 }
        ListElement { num: 3 }
        ListElement { num: 4 }
        ListElement { num: 5 }
        ListElement { num: 6 }
        ListElement { num: 7 }
        ListElement { num: 8 }
        ListElement { num: 9 }
    }

    ListView {
        id: lv
        model: lm
        y: 150
        width: 800
        height: 100
        spacing: 2
        clip: true
        orientation: ListView.Horizontal
        delegate: Rectangle {
            width: 150
            height: 100
            border.color: 'black'
            color: lastAddedIndex === index ? 'purple' : 'white'
            Text {
                anchors.centerIn: parent
                text: index + ': ' + num
            }
        }

        add: Transition { NumberAnimation { property: 'width'; from: 0; to: 150; duration: 600 } }
    }
}

动画 `positionViewAtIndex`

Animate `positionViewAtIndex`

animation

qt

listview

qml

qtquick2