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

问题描述

我正在尝试更多地了解 QtQuick 和 QML.我目前的目标是了解如何将数据从 C++ 模型绑定到我的视图.到目前为止，我已经能够在我的 QML 中设置模型并从模型中获取数据，但我不知道如何更新我的数据.

I'm trying to learn more about QtQuick and QML. My current goal is to understand how to bind data from a C++ model to my view. So far I've been able to setup the model in my QML and get data from the model but I can't figure out how to update my data.

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

How do I setup two way binding for my C++ model? Below is the code I've written so far.

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

ma​​in.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
        }
    }
}

ma​​in.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. I'm a giant noob at this so feel free to point out any other issues (formatting, standards, etc.) I have in my code, I need to learn somehow lol

编辑 1

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

After reading @derM's answer I changed my code to achieve what I wanted

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
}

推荐答案

双向绑定在 QML 中是一个复杂的问题，因为它通常用作某种赋值.

Twoway binding is a complicated matter in QML, as it usually works as some assignment.

所以，如果你用 propertyname: valuetobeboundto 绑定一个属性，然后再给 propertyname 赋值，这个绑定就会丢失.

So, if you bind a property with propertyname: valuetobeboundto and later assign something to propertyname again, this binding will be lost.

解决方法有两种:使用绑定-对象或不使用绑定，但手动处理所有属性更改信号(理想情况下您的模型正确发出).

As a workaround there are two ways: The use of Binding-Objects or to not use binding, but handle all the property-change-signals (which your model ideally properly emits) manually.

首先，您可以在此处找到详细说明.在这里，他们为每个方向使用一个 Binding-Object.好消息是，那些 Binding 不会通过分配新的 Binding 被覆盖.

For the first, you can find a detailed instruction here. Here they use the one Binding-Object for each direction. The good thing is, those Bindings will not be overridden, by assignment of a new 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 都会更新.因此按下 AND 释放 b2 将触发信号，该信号将由第一个 Binding 处理，按下 也是如此b3 的 >AND 发布.

At the beginning the value of r1 is bound to the state of b2, but as soon as b3 has been pressed once, r1 won't be updated by a click on b2 anymore. For r0 the updating will be done by the two Binding-Objects, and therefore the Binding won't be lost. However, you can see, how the binding works: When ever the state of the Button changes, the Binding will be updated. So the press AND the release of b2 will fire signals, that will be handled by the first Binding and the same goes for the press AND relase of b3.

现在来到双向绑定.在这里，避免绑定循环很重要.

Now coming to the two-way binding. Here it is important to avoid 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 需要更新，但值已经是正确的，所以递归结束，并且没有发生绑定循环.

While this example is perfectly fine. The changing of count0.count will trigger a change of count1.count. Now it is checked, if count0.count would need an update, but the value is already the right, so the recursion ends, and no binding-loop occures.

将第二个绑定更改为

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

彻底改变情况:现在随着count0.count 的每次变化，count1.count 需要提高.第一个 Binding 然后尝试将 count0.count 设置为与 count1.count 相同的值，但是没有办法让 Binding 就满足了，其他的Binding 完成后不需要做任何改变.这将导致绑定循环.幸运的是，这些在 QML 中检测得很好，因此避免了锁定.

drastically changes the situation: Now with each change of count0.count, count1.count needs to be raised. The first Binding then tries to set count0.count to the same value as count1.count but there is just no way that both Binding will be satisfied, and no change is needed to be done, after the other Binding did it's work. It will result in a binding-loop. Luckily those are detected pretty fine in QML, so a lock is avoided.

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

Now there is only one last thing to take care of: Consider this Component-Definition:

// 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-property 的内部绑定，通过使用 propertyname: valueToBeBoundTo-Syntax.这意味着，内部绑定可能会被 color 属性的任何外部赋值覆盖.用 Binding-Object 替换这个绑定，你应该没问题.

Here we have an internal binding of the color-property, by using the propertyname: valueToBeBoundTo-Syntax. This means, the internal binding might be overwritten by any external assignemtn of the color-property. Replace this binding by a Binding-Object, and you should be fine.

反之亦然:color 在外部绑定到某个值，然后您在内部处理一个信号并为其分配一个值，如果没有，外部绑定将丢失由 Binding-Object 创建.

The same would go the other way around: color is externally bound to some value, and then you handle a signal internally and assign a value to it, the external binding would be lost, if not created by a 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.

这篇关于QML中的两种方式绑定C++模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！