QML 中的两种方式绑定 C++ 模型

Question

我正在努力学习更多关于 QtQuick 和 QML 的知识。我当前的目标是了解如何将数据从 C++ 模型绑定到我的视图。到目前为止，我已经能够在我的 QML 中设置模型并从模型中获取数据，但我不知道如何更新我的数据。

如何为我的 C++ 模型设置双向绑定？以下是我到目前为止编写的代码。

message.h

class Message : public QObject
{
    Q_OBJECT

    Q_PROPERTY(QString author READ getAuthor WRITE setAuthor NOTIFY authorChanged)
    Q_PROPERTY(QString message READ getMessage WRITE setMessage NOTIFY messageChanged)

    Q_SIGNALS:
        void authorChanged(QString author);
        void messageChanged(QString message);

    public:
        Message(QObject *parent = 0);

        QString getAuthor();
        void setAuthor(QString author);

        QString getMessage();
        void setMessage(QString message);

    private:
        QString _author;
        QString _message;
};

message.cpp

#include "message.h"

Message::Message(QObject *parent) : QObject(parent)
{
}

QString Message::getAuthor()
{
    return _author;
}

void Message::setAuthor(QString author)
{
    if(author != _author)
    {
        _author = author;
        emit authorChanged(author);
    }
}

QString Message::getMessage()
{
    return _message;
}

void Message::setMessage(QString message)
{
    if(message != _message)
    {
        _message = message;
        emit messageChanged(message);
    }
}

main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import com.butts.messaging 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: "Test"

    Message {
        id: testMessage
        author: "Batman"
        message: "Hello World!"
    }

    Flow {
        TextField {
            text: testMessage.message
        }

        Label {
            text: testMessage.message
        }
    }
}

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "message.h"

int main(int argc, char *argv[])
{
    qmlRegisterType<Message>("com.butts.messaging", 1, 0, "Message");

    //Message msg = Message();

    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QLatin1String("qrc:/main.qml")));

    return app.exec();
}

P.S。我在这方面是个大菜鸟，所以请随时指出我代码中的任何其他问题（格式、标准等），我需要以某种方式学习 lol

编辑 1

阅读@derM 的回答后，我更改了代码以实现我想要的

TextField {
    id: editor

    //Binding model -> view
    text: testMessage.message

    //Binding model <- view
    Binding {
        target: testMessage
        property: "message"
        value: editor.text
    }
}

Label {
    id: display

    //Binding model -> view
    text: testMessage.message
}

Answer 1

双向绑定在 QML 中是一件复杂的事情，因为它通常作为一些赋值。

因此，如果您将属性与 propertyname: valuetobeboundto 绑定，然后再次将某些内容分配给 propertyname，则此绑定将丢失。

作为解决方法，有两种方法：使用 Binding-Objects 或不使用绑定，但处理所有属性-change-signals（理想情况下，您的模型会正确发出）手动。

对于第一个，你可以找到详细的说明here. 在这里，他们为每个方向使用一个 Binding-Object。好消息是，那些 Binding 不会被分配新的 Binding.

覆盖

考虑：

Row {
    spacing: 2
    Rectangle {
        id: r0
        width: 50
        height: 30
    }

    Rectangle {
        id: r1
        width: 50
        height: 30
        color: b2.pressed ? 'red' : 'blue'
    }

    Button {
        id: b2
    }

    Button {
        id: b3
        onPressed: r1.color = 'black'
        onReleased: r1.color = 'green'
    }

    Binding {
        target: r0
        property: 'color'
        value: b2.pressed ? 'red' : 'blue'
    }


    Binding {
        target: r0
        property: 'color'
        value: (b3.pressed ? 'black' : 'green')
    }
}

一开始r1的值绑定到b2的状态，但是一旦b3被按下一次，r1就不会不再通过单击 b2 进行更新。对于 r0 更新将由两个 Binding-Objects 完成，因此 Binding 不会丢失。但是，您可以看到绑定是如何工作的：只要 Button 的状态发生变化，Binding 就会更新。所以 press AND 释放 b2 将触发信号，这将由第一个 Binding 处理，同样适用于 press AND 发布 b3.

现在介绍双向绑定。这里重要的是要避免绑定循环。

Row {
    Button {
        id: count0
        property int count: 0
        onClicked: count += 1
        text: count
    }

    Button {
        id: count1
        property int count: 0
        onClicked: count += 1
        text: count
    }

    Binding {
        target: count0
        property: 'count'
        value: count1.count
    }

    Binding {
        target: count1
        property: 'count'
        value: count0.count
    }
}

虽然这个例子非常好。 count0.count 的变化将触发 count1.count 的变化。现在检查，如果 count0.count 需要更新，但是值已经正确，所以递归结束，没有绑定循环发生。

将第二个绑定更改为

    Binding {
        target: count1
        property: 'count'
        value: count0.count + 1
    }

极大地改变了这种情况：现在随着 count0.count 的每次变化，都需要提高 count1.count。第一个 Binding 然后尝试将 count0.count 设置为与 count1.count 相同的值，但是没有办法同时满足 Binding，并且不需要更改完成，在另一个 Binding 完成后它的工作。它将导致绑定循环。幸运的是，这些在 QML 中检测得很好，因此避免了锁定。

现在只有最后一件事需要处理：考虑这个组件定义：

// TestObj.qml
Item {
    width: 150
    height: 40
    property alias color: rect.color
    Row {
        spacing: 10
        Rectangle {
            id: rect
            width: 40
            height: 40
            radius: 20
            color: butt.pressed ? 'green' : 'red'
        }
        Button {
            id: butt
            text: 'toggle'
        }
    }
}

这里我们使用 propertyname: valueToBeBoundTo-Syntax 对 color-属性进行了内部绑定。这意味着，内部绑定可能会被 color-属性的任何外部赋值覆盖。将此绑定替换为 Binding-Object，您应该没问题。

反之亦然：color在外部绑定到某个值，然后你在内部处理一个信号并为其赋值，如果不创建外部绑定就会丢失通过 Binding-Object.

This is only a general overview. There are way more details that might alter the behavior of Binding. But I think I have shown, how you can create a Two-Way-Binding and mentioned quite some pitfalls, you might encounter.

Answer 2

这适用于我，使用 Qt Quick Controls 2：

TextField {
    id: txt

    text: testMessage.message

    onTextChanged: testMesage.message = txt.text
}

QML 中的两种方式绑定 C++ 模型

Two way binding C++ model in QML

c++

qt

qml

qtquick2