QML 中的两种方式绑定 C++ 模型
Two way binding C++ model in QML
我正在努力学习更多关于 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
}
双向绑定在 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.
这适用于我,使用 Qt Quick Controls 2:
TextField {
id: txt
text: testMessage.message
onTextChanged: testMesage.message = txt.text
}
我正在努力学习更多关于 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
}
双向绑定在 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.
这适用于我,使用 Qt Quick Controls 2:
TextField {
id: txt
text: testMessage.message
onTextChanged: testMesage.message = txt.text
}