python - Qt5/PyQt5 : Custom QML components with QML frontend and Python backend

Question

如果可行的话，我想创建一个带有 python“后端”的 QML 模块。基本上，我想使用 QML 来定义组件的外观，然后在 python 类中实现特定行为，该类应该扩展此 QML 类型，并且 - 在我的想象中 - 必须以某种方式链接到 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"  
    }
}