使用多个视图在 QML 中查看、编辑和更新数据（来自 C++），而数据保留在 C++ 中（订阅数据）

Posted 2023-02-17

【中文标题】使用多个视图在 QML 中查看、编辑和更新数据（来自 C++），而数据保留在 C++ 中（订阅数据）

【英文标题】：View, edit and update data (from C++ ) in QML with multiple views, while the Data stays in C++ (subscribe to data)

【发布时间】：2013-11-07 16:30:04

【问题描述】：

我有一些数据存储在 C++ 类 (Data.cpp) 的实例中。现在我希望能够从 QML 中的 2 个单独的表示中查看和编辑这些数据，这样如果 View1 中的值发生更改，数据本身（C++）也会更改并且 View2 显示的值也是如此（因为它会收到通知当 C++ 数据发生变化时）。

这是我目前得到的：

数据.h

class Data : public QObject

    Q_OBJECT
    Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)

public:
    Data(std::string name);
    QString name();
    void setName(const QString &n);

signals:
    void nameChanged();

private:
    std::string _name;
;

Parser.h（提供数据列表）

class Parser : public QObject

    Q_OBJECT
    Q_PROPERTY(QList<QObject*> list READ list NOTIFY listChanged)
    //QList<Data*> is not working with QML :(

public:
    Parser(QObject *parent = 0);
    QList<QObject*> list() //stuff below is implementd in Parser.cpp
    
       _list.append(new Data("name 1"));
       _list.append(new Data("name 2"));
       _list.append(new Data("name 3"));
        return _list;
    


signals:
    void listChanged();

private:
    QList<QObject*> _list;
;

QML 部分：

    ListView
    
        id: view1
        anchors.fill: parent
        spacing: 5
        delegate: Text  text: name
        model: ListModelComponent.onCompleted: getModel()
    
    ListView
    
        id: list2
        anchors.fill: parent
        spacing: 5
        delegate: Text  text: name
        model: ListModelComponent.onCompleted: getModel()
    
    function getModel()
    
        var m = parser.list;
        for(var i=0; i<m.length; i++)
        
            list.model.append(m[i]); //simply returning the list (m) does not work
        
    

现在，如果我单击 view1 中的一个项目（例如），我希望更改相应数据的名称，并相应地在 view2 中显示名称。如果我从 C++ 中修改了名称，则新名称应显示在两个视图中。

有没有办法做到这一点？我被困在这几天... 感谢您的帮助。

---

编辑：

我问了more specific question to this topic here。

【参考方案1】：

这很有可能，但是您遇到了一些问题：

您希望将数据对象列表公开为 QQmlListProperty。这是将列表导入 QML 的正确方法 如果您的列表正确公开为 QQmlListProperty，您可以将其设置为 ListView 的模型，而无需执行您现在正在执行的奇怪的 getModel() hack 不应在 getter 中将项目添加到列表中，否则每次 QML 尝试读取时您都会将其附加到列表中。

解决此问题后，您只需与委托中对当前模型项的引用进行交互，即可更新 Data 对象。

这是一个完整的工作示例。我在 QML 中添加了一个更改模型的 MouseArea，还添加了一个 C++ 中的计时器，它也更改了模型，以显示对任一侧的更改都会立即反映在 UI 中。

ma​​in.cpp：

#include <QGuiApplication>
#include <QtQuick>

class Data : public QObject

    Q_OBJECT
    Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)

public:
    Data(const QString &n) : _name(n)  
    QString name() const  return _name; 

    void setName(const QString &n) 
        if (_name == n)
            return;
        _name = n;
        emit nameChanged(n);
    

signals:
    void nameChanged(const QString &n);

private:
    QString _name;
;

class Parser : public QObject

    Q_OBJECT
    Q_PROPERTY(QQmlListProperty<Data> list READ list CONSTANT)

public:
    Parser(QObject *parent = 0) 
        _list.append(new Data(QStringLiteral("name 1")));
        _list.append(new Data(QStringLiteral("name 2")));
        _list.append(new Data(QStringLiteral("name 3")));

        startTimer(5000);
    

    QQmlListProperty<Data> list() 
        return QQmlListProperty<Data>(this, _list);
    

    void timerEvent(QTimerEvent *) 
        _list[1]->setName(_list[1]->name() + QStringLiteral("C++"));
    

private:
    QList<Data*> _list;
;

int main(int argc, char *argv[])

    QGuiApplication a(argc, argv);

    qmlRegisterType<Data>();

    QQuickView view;
    view.rootContext()->setContextProperty(QStringLiteral("parser"), new Parser);
    view.setSource(QUrl("qrc:///qml/main.qml"));
    view.showNormal();

    return a.exec();


#include "main.moc"

ma​​in.qml:

import QtQuick 2.0

Rectangle 
    width: 800
    height: 600

    ListView 
        id: view1
        anchors  top: parent.top; left: parent.left; bottom: parent.bottom 
        width: parent.width / 2
        spacing: 5

        delegate: Item 
            height: 30
            width: parent.width

            Text  text: name 

            MouseArea 
                anchors.fill: parent
                onClicked: model.name += "1";
            
        
        model: parser.list
    

    ListView 
        id: view2
        anchors  top: parent.top; right: parent.right; bottom: parent.bottom 
        width: parent.width / 2
        spacing: 5

        delegate: Item 
            height: 30
            width: parent.width

            Text  text: name 

            MouseArea 
                anchors.fill: parent
                onClicked: model.name += "2";
            
        
        model: parser.list
    

【讨论】：

非常感谢您快速而详细的回答。我用 QList、QQmlListProperty、QDeclarativeListProperty、、、、 等搞砸了一整天，找不到正确的组合。但是，您的解决方案对我来说很完美，干得好！

@user2965543 没问题。但是，与其不接受我的回答并大幅更改您的问题，不如让答案被接受并创建一个单独的问题，因为它与您最初提出的问题完全不同。

我根据当前的问题扩展了我的问题。请问可以重温一下吗？感谢您的努力。

很抱歉给您带来了麻烦，但我认为最好扩展这个问题并将其放在上下文中，而不是在稍微不同的主题上再次解释所有这些。

@user2965543 不是麻烦，只是你的添加改变了答案。您可能会创建自己的 QAbstractListModel 子类来解决“过滤”问题。