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

Question

如果有意义的话，我想创建一个带有 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 或其他方式...

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

非常感谢！

Answer 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"  
    }
}