How to slide ListView to the end and start from beginning?

[bladekel]

Hello,

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

[ODБOï]

@bladekel

   Timer{   
        interval: 5000/modelCount
        running: true
        repeat: true
        onTriggered:view.currentIndex++
    }

    property int modelCount : 10

    PathView {
        id: view
        currentIndex: 0
        anchors.centerIn: parent
        height: 200
        width: 200

        model: modelCount

        highlight: Rectangle { width: 60; height: 60; color: "red" }

        delegate: Item {
            width: 60; height: 60
            Text {
                anchors.centerIn: parent
                text: modelData                
            }
        }
        path: Path {
            startX: 60
            startY: 0
            PathLine { x: 60; y: 500 }
        }
    }

[bladekel]

@LeLev thanks dude. That exactly what I need....