c++ - 使用 QSortFilterProxyModel 对 Qml ListView 的数据进行排序。

Question

我正在制作一个聊天客户端，并且使用 qml ListView 来显示“聊天室”中的所有消息。

我正在使用派生自 QAbstractListModel 的自己的模型类来存储用户所属的所有房间中的所有消息。

我希望所有消息根据最初发送的时间戳进行排序，最新的消息应显示在 View 的底部，最旧的消息应显示在顶部。

我还希望用户能够根据他们发送的房间来过滤消息。我已经解决了这个问题。

这是我的自定义模型的声明

class MessageModel : public QAbstractListModel
{
public:
    enum MessageRoles {
            Id = Qt::UserRole + 1,
            RoomId = Qt::UserRole + 2,
            PersonId = Qt::UserRole + 3,
            PersonEmail = Qt::UserRole + 4,
            Created = Qt::UserRole + 5,
            Text = Qt::UserRole + 6
        };
    explicit MessageModel(QObject * parent = nullptr);
    int rowCount(const QModelIndex &parent = QModelIndex()) const override;
    QHash<int, QByteArray> roleNames() const;
    QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override; 
    void reset_data(QJsonArray new_data);
    void insert_unique_data(QJsonArray new_data);
private:
    QList<LocalData::Message> m_data;

};

这是我的模型的实现

MessageModel::MessageModel(QObject *parent) : QAbstractListModel(parent)
{}

int MessageModel::rowCount(const QModelIndex &parent) const
{
    return m_data.size();
}

QHash<int, QByteArray> MessageModel::roleNames() const
{
    QHash<int, QByteArray> roles;
    roles[Id] = "id";
    roles[RoomId] = "roomId";
    roles[PersonId] = "personId";
    roles[PersonEmail] = "personEmail";
    roles[Created] = "created";
    roles[Text] = "messageText";
    return roles;
}

QVariant MessageModel::data(const QModelIndex &index, int role) const {

    if(!index.isValid())
        return QVariant();

    if(index.row() >= m_data.size())
        return QVariant();

    switch (role) {
        case Id:
            return m_data.at(index.row()).id;
        case RoomId:
            return m_data.at(index.row()).roomId;
        case PersonId:
            return m_data.at(index.row()).personId;
        case PersonEmail:
            return m_data.at(index.row()).personEmail;
        case Text:
            return m_data.at(index.row()).text;
        case Created:
            return m_data.at(index.row()).created.toString(Qt::ISODateWithMs);
    }

    return QVariant();
}

void MessageModel::update_data(QJsonArray new_data)
{
    beginResetModel();
    m_data.clear();

    foreach (const QJsonValue & val, new_data) {
        m_data.push_back(LocalData::Message(val.toObject()));
    }
    endResetModel();
}

void MessageModel::insert_unique_data(QJsonArray new_data)
{
    QList<LocalData::Message> temp;
    foreach (const QJsonValue & val, new_data) {
        auto obj_to_insert = LocalData::Message(val.toObject());
        if(!m_data.contains(obj_to_insert))
            temp.push_back(obj_to_insert);
    }
    int begin = rowCount();
    int end = rowCount() + temp.size() - 1;

    beginInsertRows(QModelIndex(), begin, end);
    foreach (const LocalData::Message & msg, temp) {
        m_data.push_back(msg);
    }
    endInsertRows();
}

我想使用QSortFilterProxyModel对消息进行排序和过滤。我已设法使其根据 RoomId 角色正确过滤消息，但在 Created 角色上正确排序消息时遇到问题。

我使用的代理模型非常简单，我只是尝试重写 lessThan() 函数，如下所示:

bool SortFilterProxyModel::lessThan(const QModelIndex &source_left, const QModelIndex &source_right) const
    {
        QVariant leftData = sourceModel()->data(source_left);
        QVariant rightData = sourceModel()->data(source_right);

        if(leftData.type() == QVariant::DateTime)
        {
            return leftData.toDateTime() < rightData.toDateTime();
        }
        else {
            return leftData.toString() < rightData.toString();
        }
    }

否则它只是一个普通的QSortFilterProxyModel。当它被初始化时，我调用以下函数:

m_messageModel = new MessageModel;
m_messageProxyModel = new SortFilterProxyModel;

m_messageProxyModel->setSourceModel(qobject_cast<QAbstractListModel *>(m_messageModel));

m_engine.rootContext()->setContextProperty("messages", m_messageProxyModel);

m_messageProxyModel.setSortRole(MessageModel::Created);   

m_messageProxyModel.setDynamicSortFilter(true); 

m_messageProxyModel.sort(0, Qt::AscendingOrder);

m_messageModel、m_messageProxyModel 和 m_engine 是在 main( 中实例化的类中声明的所有成员变量(指针)) )。m_engine 是一个QQmlApplicationEngine，它将变量公开给qml。

这是包含带有所有消息的 ListView 的 qml 文件。

import QtQuick 2.0
import QtQuick.Controls 1.4

Rectangle{
    property alias messageView: _messagePanelView
    Component {
        id: _messagePanelDelegate
        Item{
            id: _messagePanelDelegateItem;

            width: root.width * 0.8
            height: _messagePanelMessageColumn.height
            Column{
                id: _messagePanelMessageColumn;
                height: children.height;
                spacing: 20
                Text{ text: "<b>" + personEmail + "</b> <t />" + created; font.pointSize: 7 + Math.log(root.width) }
                Text{ text: messageText }
                Rectangle{
                    width: parent.width
                    height: 20
                    color: "#FFFFFF"
                }
            }
        }
    }
    ScrollView{
        anchors.fill: parent
        ListView {
            id: _messagePanelView
            height: root.height - 100
            model: messages
            delegate: _messagePanelDelegate
            interactive: true
        }
    }
}

当用户请求特定“聊天室”中的所有消息时，源模型当前会填充数据。当用户按下按钮时，将调用与此类似的函数。

void sync_messages_and_filter_based_on_roomId(QString roomId)
{
    m_messageProxyModel->setFilterRole(MessageModel::RoomId);
    m_messageProxyModel->setFilterCaseSensitivity(Qt::CaseInsensitive);
    m_messageProxyModel->setFilterRegExp(QRegExp::escape(roomId));

    fetch_messages_in_room_from_server_async(roomId); 
}

fetch_messages_in_room_from_server_async(roomId); 是一个向服务器请求新消息、接收 JSON 格式的响应负载、创建一个 QJsonArray 对象并调用 void 的函数MessageModel::insert_unique_data(QJsonArray new_data) 所有这些都发生在单独的工作线程中。

第一次调用时，数据实际上按降序排序(最旧的在底部，最新的在顶部)。但是，当第二次调用它时，当服务器有更多数据要提供时，客户端应该将所有新消息作为源模型中的行插入，并让代理模型按升序对其进行排序(最近的在插入新数据后，最旧的在顶部)。

当前模型仅按降序排序，这是第一次将数据插入模型时。但是，一旦模型第一次更新，它就不再对数据进行排序，并且新消息出现在 ListView 的底部而不是顶部，这意味着代理模型已停止对模型进行排序。

Here is an image of the ListView, after inserting a second time. Notice the timestamps This is what happens when I terminate the program, and insert all the messages at once

我想要的结果是让代理模型在每次更新/更改源模型时按升序对消息进行排序(最新的在底部，最旧的在顶部)。这意味着当调用 void MessageModel::insert_unique_data(QJsonArray new_data) 时，我期望新消息出现在底部，最新消息作为最后一条消息。

感谢您花时间阅读我这篇超长的帖子。我只是想介绍所有细节，因为将 C++ 模型暴露给 qml 需要很多步骤。

Answer 1

我的猜测是你的 lessThan函数什么也没做。

当您调用QVariant leftData = sourceModel()->data(source_left);时它调用 data具有角色 Qt::DisplayRole 的功能返回无效的 QVariant为你的模型。您的if(leftData.type() == QVariant::DateTime)从来没有 true .

您应该做的是使用 QDateTime leftTimestamp = m_data.at(source_left.row()).created; 显式获取时间戳source_right 也一样。您的if那么就没用了，你可以这样做 return leftTimestamp < rightTimeStamp;

<小时/>

或者，如果您想从 QML 而不是 C++ 进行排序和过滤，您可以使用我的 SortFilterProxyModel像这样:

import QtQuick 2.0
import QtQuick.Controls 1.4
import SortFilterProxyModel 0.2

Rectangle{
    property alias messageView: _messagePanelView

    SortFilterProxyModel {
         id: proxyMessageModel
         sourceModel: sourceMessageModel // a context property you exposed
         filters: ValueFilter {
             roleName: "roomId"
             value: currentRoomId // a property you could add somewhere
         }
         sorters : RoleSorter {
             roleName: "created"
         }
    }
    Component {
        id: _messagePanelDelegate
        Item{
            id: _messagePanelDelegateItem;

            width: root.width * 0.8
            height: _messagePanelMessageColumn.height
            Column{
                id: _messagePanelMessageColumn;
                height: children.height;
                spacing: 20
                Text{ text: "<b>" + personEmail + "</b> <t />" + created; font.pointSize: 7 + Math.log(root.width) }
                Text{ text: messageText }
                Rectangle{
                    width: parent.width
                    height: 20
                    color: "#FFFFFF"
                }
            }
        }
    }
    ScrollView{
        anchors.fill: parent
        ListView {
            id: _messagePanelView
            height: root.height - 100
            model: proxyMessageModel
            delegate: _messagePanelDelegate
            interactive: true
        }
    }
}