Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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



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


  • @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

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


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


Log in to reply