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();
}

PS我是一个巨大的菜鸟,所以随时指出我的代码中的任何其他问题(格式,标准等),我需要以某种方式学习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

Twoway绑定在QML中是一个复杂的问题,因为它通常用作某些赋值.

因此,如果您将属性绑定propertyname: valuetobeboundto并稍后再分配一些内容propertyname,则此绑定将丢失.

作为一种解决方法,有两种方法:使用Binding-Objects或不使用绑定,但手动处理所有属性更改信号(您的模型理想地正确发出).

首先,您可以在此处找到详细说明. 在这里,他们使用Binding每个方向的一个对象.好消息是,Binding通过分配一个新的,不会覆盖那些s 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对象完成,因此Binding不会丢失.但是,您可以看到绑定是如何工作的:当Button更改状态时,Binding将更新.所以按下和释放b2将触发信号,这将由第一个处理,Binding同样适用于新闻和重新发布b3.

现在进入双向约束.这里避免Binding-Loops非常重要.

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'
        }
    }
}

在这里,我们color使用propertyname: valueToBeBoundTo-Syntax 对-property 进行内部绑定.这意味着,内部绑定可能会被color-property的任何外部assignemtn覆盖.用Binding-Object 替换这个绑定,你应该没问题.

反之亦然:color外部绑定某个值,然后在内部处理信号并为其赋值,如果不是由Binding-Object 创建,外部绑定将丢失.

这只是一般概述.有更多细节可能会改变Binding的行为.但是我想我已经证明了,如何创建一个双向绑定并提到你可能会遇到的一些陷阱.