如何将 Python 和 QML 与 PySide2 连接？

Question

我想在 Ubuntu 上编写一个简单的桌面应用程序，我认为一个简单的方法是使用 Qt 和 QML 作为 GUI，Python 作为逻辑语言，因为我有点熟悉 Python.

现在我花了好几个小时尝试以某种方式连接 GUI 和逻辑，但它不起作用。我管理了连接 QML --> Python 但不是相反。我有 Python classes 代表我的数据模型，我添加了 JSON 编码和解码函数。所以现在没有涉及 SQL 数据库。但也许 QML 视图和某些数据库之间的直接连接会使事情变得更容易？

所以现在是一些代码。

QML --> Python

QML 文件：

ApplicationWindow {

// main window
id: mainWindow
title: qsTr("Test")
width: 640
height: 480

signal tmsPrint(string text)

Page {
    id: mainView

    ColumnLayout {
        id: mainLayout

        Button {
            text: qsTr("Say Hello!")
            onClicked: tmsPrint("Hello!")
        }
    }
}    
}

然后我有我的 slots.py:

from PySide2.QtCore import Slot

def connect_slots(win):
    win.tmsPrint.connect(say_hello)

@Slot(str)
def say_hello(text):
    print(text)

最后是我的 main.py:

import sys
from controller.slots import connect_slots

from PySide2.QtWidgets import QApplication
from PySide2.QtQml import QQmlApplicationEngine 

if __name__ == '__main__':
    app = QApplication(sys.argv)

    engine = QQmlApplicationEngine()
    engine.load('view/main.qml')

    win = engine.rootObjects()[0]
    connect_slots(win)

    # show the window
    win.show()
    sys.exit(app.exec_())

这很好用，我可以打印 "Hello!"。但这是最好的方法还是创建一个带插槽的 class 并使用 setContextProperty 能够直接调用它们而不添加额外的信号更好？

Python --> QML

我做不到。我尝试了不同的方法，但 none 有效，但我也不知道哪种方法最好用。例如，我想做的是显示一个对象列表并提供在应用程序中操作数据的方法等。

包括Javascript：我添加了一个附加文件 application.js，其功能只是打印一些东西，但它可能用于设置文本字段的上下文等。然后我尝试使用 QMetaObject 和 invokeMethod，但只是遇到错误参数等错误

这种方法有意义吗？其实我什么都不知道javascript，所以如果没有必要，我宁愿不用它。

ViewModel 方法我创建了一个文件 viewmodel.py

from PySide2.QtCore import QStringListModel

class ListModel(QStringListModel):

def __init__(self):
     self.textlines = ['hi', 'ho']
     super().__init__()

并且在 main.py 我添加了：

model = ListModel()
engine.rootContext().setContextProperty('myModel', model)

ListView 如下所示：

ListView {
            width: 180; height: 200

            model: myModel
            delegate: Text {
                text: model.textlines
            }
        }

我收到一个错误 "myModel is not defined"，但我猜它无论如何都无法工作，因为代表只接受一个元素而不是列表。这种方法好吗？如果是，我该如何让它发挥作用？

是否有完全不同的方法来在 QML 视图中操作数据？

感谢您的帮助！我知道 Qt 文档，但我对它不满意。所以也许我错过了什么。但是 PyQt 似乎比 PySide2 更受欢迎（至少 google 搜索似乎表明了这一点）并且 PySide 引用经常使用 PySide1 或不使用 QML QtQuick 做事的方式...

Answer 1

你的问题涉及很多方面，所以我会尽量在我的回答中详细说明，而且这个答案会不断更新，因为这类问题经常被问到，但它们是针对特定情况的解决方案，所以我将采取给它一个通用的方法并在可能的情况下具体化的自由。

QML 到 Python:

您的方法有效，因为 python 中的类型转换是动态的，在 C++ 中不会发生。它适用于小任务，但不可维护，逻辑必须与视图分离，因此它不应该依赖。具体来说，假设打印的文本将被逻辑用来执行一些处理，那么如果您修改信号的名称，或者如果数据不依赖于 ApplicationWindow 而是依赖于另一个元素等.那么你将不得不更改很多连接代码。

如您所言，建议创建一个 class 负责映射您需要逻辑的数据并将其嵌入 QML，因此如果您更改视图中的某些内容，您只需更改连接：

示例：

main.py

import sys

from PySide2.QtCore import QObject, Signal, Property, QUrl
from PySide2.QtGui import QGuiApplication
from PySide2.QtQml import QQmlApplicationEngine

class Backend(QObject):
    textChanged = Signal(str)

    def __init__(self, parent=None):
        QObject.__init__(self, parent)
        self.m_text = ""

    @Property(str, notify=textChanged)
    def text(self):
        return self.m_text

    @text.setter
    def setText(self, text):
        if self.m_text == text:
            return
        self.m_text = text
        self.textChanged.emit(self.m_text)   

if __name__ == '__main__':
    app = QGuiApplication(sys.argv)
    backend = Backend()

    backend.textChanged.connect(lambda text: print(text))
    engine = QQmlApplicationEngine()
    engine.rootContext().setContextProperty("backend", backend)
    engine.load(QUrl.fromLocalFile('main.qml'))
    if not engine.rootObjects():
        sys.exit(-1)
    sys.exit(app.exec_())

main.qml

import QtQuick 2.10
import QtQuick.Controls 2.1
import QtQuick.Window 2.2

ApplicationWindow {
    title: qsTr("Test")
    width: 640
    height: 480
    visible: true
    Column{
        TextField{
            id: tf
            text: "Hello"
        }
        Button {
            text: qsTr("Click Me")
            onClicked: backend.text = tf.text
        } 
    }
}

现在，如果您希望文本由另一个元素提供，您只需更改以下行：onClicked: backend.text = tf.text.

Python 到 QML:

我不能告诉你这个方法做错了什么，因为你没有显示任何代码，但我确实指出了缺点。主要缺点是要使用此方法，您必须有权访问该方法，并且有两种可能性，第一种是它是第一个示例中显示的 rootObjects 或搜索 objectName，但它发生了你最初寻找对象，你得到它并且它从 QML 中删除，例如每次更改页面时都会创建和删除 StackView 的页面，所以这种方法是不正确的。
第二种方法对我来说是正确的，但你没有正确使用它，不像 QtWidgets 在 QML 中关注行和列使用角色。首先让我们正确地实现你的代码。

第一个 textlines 无法从 QML 访问，因为它不是 qproperty。正如我所说，您必须通过角色访问，要查看模型的角色，您可以打印 roleNames():

的结果

model = QStringListModel()
model.setStringList(["hi", "ho"])
print(model.roleNames())

输出：

{
    0: PySide2.QtCore.QByteArray('display'),
    1: PySide2.QtCore.QByteArray('decoration'),
    2: PySide2.QtCore.QByteArray('edit'),
    3: PySide2.QtCore.QByteArray('toolTip'),
    4: PySide2.QtCore.QByteArray('statusTip'),
    5: PySide2.QtCore.QByteArray('whatsThis')
}

如果要获取文本必须使用角色Qt::DisplayRole，根据docs其数值为：

Qt::DisplayRole 0   The key data to be rendered in the form of text. (QString)

所以在 QML 中你应该使用 model.display（或者只使用 display）。所以正确的代码如下：

main.py

import sys

from PySide2.QtCore import QUrl, QStringListModel
from PySide2.QtGui import QGuiApplication
from PySide2.QtQml import QQmlApplicationEngine  

if __name__ == '__main__':
    app = QGuiApplication(sys.argv)
    model = QStringListModel()
    model.setStringList(["hi", "ho"])

    engine = QQmlApplicationEngine()
    engine.rootContext().setContextProperty("myModel", model)
    engine.load(QUrl.fromLocalFile('main.qml'))
    if not engine.rootObjects():
        sys.exit(-1)
    sys.exit(app.exec_())

main.qml

import QtQuick 2.10
import QtQuick.Controls 2.1
import QtQuick.Window 2.2

ApplicationWindow {
    title: qsTr("Test")
    width: 640
    height: 480
    visible: true
    ListView{
        model: myModel
        anchors.fill: parent
        delegate: Text { text: model.display }
    }
}

如果您希望它是可编辑的，您必须使用 model.display = foo:

import QtQuick 2.10
import QtQuick.Controls 2.1
import QtQuick.Window 2.2

ApplicationWindow {
    title: qsTr("Test")
    width: 640
    height: 480
    visible: true
    ListView{
        model: myModel
        anchors.fill: parent
        delegate: 
        Column{
            Text{ 
                text: model.display 
            }
            TextField{
                onTextChanged: {
                    model.display = text
                }
            }
        }
    }
}

还有许多其他方法可以通过 QML 与 Python/C++ 交互，但最好的方法是通过 setContextProperty.[=33= 嵌入在 Python/C++ 中创建的对象]

如您所说PySide2的文档不多，正在实现中，您可以通过下面的link查看。现在最多的是PyQt5的例子，所以我建议你了解两者之间的等价物并进行翻译，这个翻译并不难，因为它们是最小的变化。

如何将 Python 和 QML 与 PySide2 连接？

How to connect Python and QML with PySide2?

python

qt

qml

pyside2