c++ - 在具有多个 View 的 QML 中查看、编辑和更新数据(来自 C++)，而数据保留在 C++ 中(订阅数据)

Question

我有一些数据存储在 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(提供Data列表)

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: ListModel{Component.onCompleted: getModel()}
    }
    ListView
    {
        id: list2
        anchors.fill: parent
        spacing: 5
        delegate: Text { text: name}
        model: ListModel{Component.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++ 修改名称，新名称应该显示在两个 View 中。

有什么办法吗？我坚持了好几天...感谢您的帮助。

---

编辑:

我问了一个more specific question to this topic here .

Answer 1

这很有可能，但你遇到了一些问题:

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

一旦解决了这个问题，您就可以通过与委托(delegate)中对当前模型项的引用进行交互来简单地更新数据对象。

这是一个完整的工作示例。我在 QML 中添加了一个 MouseArea 来更改模型，还在 C++ 中添加了一个计时器来更改模型，以表明对任何一侧的更改都会立即反射(reflect)在 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
    }
}