当前位置：首页 > article >正文

QML优化，当列表数据过多时，切换tab可能会导致卡顿的情况。

article 2024/9/18 17:05:26

当列表数据过多时，切换tab可能会导致卡顿的情况。为了优化这个问题，我们可以采取以下措施：

分页加载数据：不要一次性加载所有数据，而是分页加载。当用户切换到列表时，只加载当前页的数据，而不是全部数据。这可以减少初始加载时间和内存占用。
使用虚拟视图：在QML中，可以使用ListView的flickableItem属性来实现虚拟视图。这意味着只有在视图中可见的项才会被实例化，而不是所有项都会被创建。这可以减少内存占用和加速切换tab的速度。
异步加载数据：使用后台线程来加载数据，以避免阻塞主线程。这样可以确保用户界面在加载数据时仍然保持响应。
数据缓存：对于已加载的数据，可以进行缓存，以便在用户切换回来时不需要重新加载数据。
优化数据模型：如果可能的话，可以对数据模型进行优化，例如使用QAbstractListModel来实现自定义数据模型，以提高数据的访问效率。

下面是一个简单的示例，演示了如何使用分页加载、虚拟视图和异步加载来优化列表数据过多时切换tab的性能问题。

1.QML部分：

main.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import com.example 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Tab View Example")

    TabView {
        anchors.fill: parent

        Tab {
            title: "Tab 1"
            ListView {
                id: listView1
                anchors.fill: parent
                model: {
                    var model = Qt.createQmlObject("import QtQuick 2.12; ListModel {}", parent);
                    for(var i = 0; i < 100; i++){
                        model.append({"text": "Item " + i});
                    }
                    model
                }
                delegate: Item {
                    width: parent.width
                    height: 40
                    visible: index >= listView1.currentIndex - 5 && index <= listView1.currentIndex + 5
                    Text {
                        text: modelData.text
                        anchors.fill: parent
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                    }
                }
            }
            Component.onCompleted: {
                var generator = new RandomDataGenerator();
                generator.dataGenerated.connect(function(data){
                    RandomDataGenerator.onDataGenerated(data, 1);
                });
                generator.start();
            }
        }

        Tab {
            title: "Tab 2"
            ListView {
                id: listView2
                anchors.fill: parent
                model: {
                    var model = Qt.createQmlObject("import QtQuick 2.12; ListModel {}", parent);
                    for(var i = 0; i < 100; i++){
                        model.append({"text": ""});
                    }
                    model
                }
                delegate: Item {
                    width: parent.width
                    height: 40
                    visible: index >= listView2.currentIndex - 5 && index <= listView2.currentIndex + 5
                    Text {
                        text: modelData.text
                        anchors.fill: parent
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                    }
                }
            }
            Component.onCompleted: {
                var generator = new RandomDataGenerator();
                generator.dataGenerated.connect(function(data){
                    RandomDataGenerator.onDataGenerated(data, 2);
                });
                generator.start();
            }
        }
    }
}

2.C++部分：

我们创建了一个简单的QML应用程序，用于展示一个包含1000个项目的列表。我们使用了ListView和ListModel来实现列表视图，并通过JavaScript代码来生成随机数据。我们还使用了Qt Quick Compiler来编译QML代码，以提高应用程序的启动速度。

为了进一步优化性能，我们使用了以下技术：

使用了QML中的懒加载机制，只有在需要显示时才会实例化列表项。
使用了QML中的异步加载机制，在后台线程中生成随机数据，以避免阻塞主线程。
在C++中使用了QThreadPool来管理线程池，以提高并发性能。

以下是完整的源码：

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QThreadPool>
#include <QTimer>
#include "randomdatagenerator.h"

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

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;

    // Register RandomDataGenerator class to QML
    qmlRegisterType<RandomDataGenerator>("com.example", 1, 0, "RandomDataGenerator");

    // Load QML file
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    // Start generating random data in background thread
    RandomDataGenerator generator;
    QThreadPool::globalInstance()->start(&generator);

    // Set up timer to update list view every 100ms
    QTimer timer;
    QObject::connect(&timer, &QTimer::timeout, [&engine](){
        engine.rootObjects().first()->findChild<QObject*>("listView")->setProperty("currentIndex", 0);
    });
    timer.start(100);

    return app.exec();
}

RandomDataGenerator.h

#ifndef RANDOMDATAGENERATOR_H
#define RANDOMDATAGENERATOR_H

#include <QObject>
#include <QRunnable>
#include <QVector>

class RandomDataGenerator : public QObject, public QRunnable
{
    Q_OBJECT
public:
    explicit RandomDataGenerator(QObject *parent = nullptr);

signals:
    void dataGenerated(const QVector<QString>& data);

protected:
    void run() override;

private:
    QVector<QString> m_data;
};

#endif // RANDOMDATAGENERATOR_H

RandomDataGenerator.cpp

#include "randomdatagenerator.h"
#include <QThread>

RandomDataGenerator::RandomDataGenerator(QObject *parent) : QObject(parent)
{

}

void RandomDataGenerator::run()
{
    // Generate random data in background thread
    for(int i = 0; i < 1000; i++){
        QString data = QString::number(qrand());
        m_data.append(data);
    }

    // Emit signal to notify data generation complete
    emit dataGenerated(m_data);
}