如何将 QListView 滑到最后并从头开始？

如何解决如何将 QListView 滑到最后并从头开始？

我正在处理一个通过 API 获取新闻的项目。我可以清楚地从 api 获取消息并将它们加载到列表视图中。

为了清楚地说明我的问题，我简化了代码。这里有两个问题...

1 - 我需要在给定的时间内将这个列表从顶部滑动到底部基本滑动动画。（例如，y 从 0 到列表中的 5 秒）。重要的一点是列表的项目数是可以改变的。

2 - 当动画到达列表末尾时，我需要看到最后一项之后的第一项。但它必须是这样的；在列表的最后一项之后，第一项必须在滑动过程中显示（如无限列表）。

这是我的代码；

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

解决方法

对于第一个问题，您可以在 ListView 中添加如下内容。如果您按向上/向下箭头键，这将触发动画。它并不完美，但它解释了如何使用 NumberAnimations。移动 ListView 内容的关键是属性 contentY。如果您想一直滚动到新闻提要的底部，您可以使用 contentHeight 的 ListView 和 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
    }

    ...
}

对于@iam_peter 提出的第一个问题，您可以尝试使用 NumberAnimation 来制作滚动动画。对于第二个查询，我认为您可以尝试研究 PathView，因为它更容易在 PathView 中获得循环列表行为，而无需繁琐的索引计算。

另外，请查看此主题 ListView Scrolling。