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

View, edit and update data (from C++ ) in QML with multiple views, while the Data stays in C++ (subscribe to data)

本文关键字：数据 C++ 保留 来自 更新 编辑 视图 QML      更新时间：2023-10-16

我有一些数据存储在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;
};

质量管理部分：

    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++的名称，新名称应该显示在两个视图中。

有什么办法可以做到这一点吗？我被困在这个上面好几天了...感谢您的帮助。

编辑：

我在这里问了一个更具体的问题。

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

  1. 您希望将数据对象列表公开为 QQmlListProperty。这是将列表放入QML的正确方法
  2. 如果你的列表被正确地公开为QQmlListProperty，你可以把它设置为你的ListView的模型，而不需要做你现在正在做的奇怪的getModel（）黑客。
  3. 您不应该在 getter 中将项目添加到您的列表中，否则每次 QML 尝试读取它时您都会附加到它。

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

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

主.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"

main.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
    }
}
相关文章：