qt - How to slide QListView to the end and start from beginning?

Question

I'm working on a project that gets news with API. I can clearly get the news from api and load them to the listview.

I simplify the code for telling my problem clearly. Here is a 2 questions...

1 - I need to slide this list from top to the bottom basic sliding animation with given time. (eg. y from 0 to en of list with 5secs). The important point is the item count of the list can be changeable.

2 - When the animation reachs to the end of the list, I need to see the first item after the last item. But it has to be like this; after the last item of list, the first item has to shown( like infinite list) while the sliding process going on.

Here are my codes;

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QDebug>
#include <QQmlContext>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QStringList news = {    "news01",
                            "news02",
                            "news03",
                            "news04",
                            "news05",
                            "news06",
                            "news07",
                            "news08",
                            "news09",
                            "news10",
                            "news11",
                            "news12",
                            "news13",
                            "news14",
                            "news15",
                            "news16",
                            "news17",
                            "news18",
                            "news19",
                           };

    QQmlApplicationEngine engine;
    engine.rootContext()->setContextProperty("listNews",news);

    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.3

Window {
    id:pencere
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: "black"

    ListView{
        id: newsListView
        implicitWidth: parent.width
        implicitHeight: parent.height
        model:listNews

        spacing: 5

        delegate: Rectangle {
            id: delegateBackground
            color:"#505051"
            radius: 10
            width: parent.width
            height: contentContainer.height + 20

            Item {
                id: contentContainer
                width: parent.width - 20
                height: column.height
                anchors.centerIn: delegateBackground

                RowLayout {
                    width: parent.width

                    Rectangle {
                        id: newsicon
                        width: 16
                        height: 16
                        color: "steelblue"
                        Layout.alignment: Qt.AlignTop
                    }

                    ColumnLayout {
                        id: column
                        Layout.fillWidth: true
                        spacing: 100

                        Text {
                            Layout.fillWidth: true
                            Layout.alignment: Qt.AlignBottom
                            id: messageText
                            text: modelData
                            wrapMode: TextEdit.WordWrap
                            verticalAlignment: index %2 == 0 ? Text.AlignBottom : Text.AlignTop
                            color: "white"
                        }
                    }
                }
            }
        }
    }
}

question from:https://stackoverflow.com/questions/66059930/how-to-slide-qlistview-to-the-end-and-start-from-beginning

Answer 1

For the first question you could add something like the following to your ListView. This will trigger an animation if you press the arrow key up/down. It isn't perfect, but it explains how to use NumberAnimations. The key to move the ListView content is the property contentY. If you want to scroll all the way to the bottom of the news feed you could calculate the position by using contentHeight of the ListView and the Window height.

ListView {
    id: newsListView

    property bool scrollUp: false
    property bool scrollDown: false

    focus: true

    Keys.onUpPressed: newsListView.scrollUp = true
    Keys.onDownPressed: newsListView.scrollDown = true

    NumberAnimation on contentY {
        running: newsListView.scrollDown
        from: 0
        to: newsListView.contentHeight
        duration: 1000
        onFinished: newsListView.scrollDown = false
    }

    NumberAnimation on contentY {
        running: newsListView.scrollUp
        from: newsListView.contentHeight
        to: 0
        duration: 1000
        onFinished: newsListView.scrollUp = false
    }

    ...
}