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