Qt5 / PyQt5 : 带有 QML 前端和 Python 后端的自定义 QML 组件

Posted 2023-02-14

【中文标题】Qt5 / PyQt5 : 带有 QML 前端和 Python 后端的自定义 QML 组件

【英文标题】：Qt5 / PyQt5 : Custom QML components with QML frontend and Python backend

【发布时间】：2016-07-12 13:15:18

【问题描述】：

如果有意义的话，我想创建一个带有 python“后端”的 QML 模块。基本上，我想使用 QML 来定义组件的外观，然后在 python 类中实现特定的行为，它应该扩展这个 QML-Type 并且 - 在我的想象中 - 必须以某种方式链接到 QML 组件。

我了解如何在 python 中创建自定义类并通过 qmlRegisterType 将其提供给 QML。到目前为止，这是可行的，但是所有绘图都必须在类本身中实现 ​​- 没有 QML

（基本上，我想要的是类似于使用 kv 语言在 kivy 中完成的方式）

一个小例子：

我实现了一个简单的 ColorPicker 小部件，如下所示：

class ColorWheel(QLabel):
    radius = 0

    color_changed = pyqtSignal(float, float)

    def __init__(self, width, height):
        super().__init__()

        pixmap = QPixmap("colorwheel.png").scaled(width, height)

        self.setFixedSize(width, height)
        self.setPixmap(pixmap)
        self.radius = width / 2

    def mouseReleaseEvent(self, event):
        # ... get mouse position, calc polar corrdinates (omitted)
        # emit signal: new color was selected
        self.color_changed.emit(r, angle)

    def get_polar(self, x, y):
        # ... calculate polar coordinates for HSV color space (omitted)
        return r, theta

现在我想将 GUI 代码（像素图绘图等）移动到 QML 文件 ColorWheel.qml，如下所示：

import QtQuick 2.0
Item 
    Image 
        id: img
        anchors.fill: parent
        source: "./colorwheel.png"  
    

然后在主 QML 文件 main.qml 中，我想做这样的事情：

import QtQuick 2.2
import ColorWheel 1.0

ApplicationWindow 
    title: qsTr("Test Invoke")
    width: 500
    height: 400

    ColorWheel 
        radius: 200
    

这甚至可能吗？我在 Qt 和 pyQt 文档中找不到任何关于此的内容。总是让 C++ 类可用于 QML 或其他方式...

有人能指出正确的方向吗？

非常感谢！

【参考方案1】：

如果您从 QQuickItem 继承并注册它 - 它显然会像 Item 一样。

如果您在 C++/python 端添加一些属性 - 它将是带有属性的 Item。

ColorWheelImpl.h（做一个 python 等价物）：

class ColorWheelImpl: public QQuickItem

...
;
...
qmlRegisterType<ColorWheelImpl>("com.mycompany.myitems", 1, 0, "ColorWheelImpl");

在 Python 中，qmlRegisterType 语法类似于：

qmlRegisterType(ColorWheelImpl, 'com.mycompany.myitems', 1, 0, 'ColorWheelImpl')

ColorWheel.qml:

import QtQuick 2.0
import com.mycompany.myitems 1.0
ColorWheelImpl 
    Image 
        id: img
        anchors.fill: parent
        source: "./colorwheel.png"  
    

【讨论】：

您的解决方案正是我想要的。我花了一些时间弄清楚文件名和类名之间的关系，但现在它变得有意义了。谢谢！

C++/Python Impl 是如何知道使用 ColorWheel.qml 的？

@KevenWang，我添加了 qmlRegisterType 并导入到答案中。我懒得搜索 qmlRegisterType 的 Python 语法。使用 C++/Python Impl 的是 ColorWheel.qml。