QML无法调用C++实现的QQuickPaintedItem单例报Element is not creatable错误

问题原因 #

• 你遇到的Element is not creatable报错，核心原因是通过qmlRegisterSingletonType注册的单例类型属于QML全局唯一对象，引擎禁止用户通过类型名{}的方式手动创建新实例，只能直接调用已经注册好的全局单例对象。
• 额外逻辑问题：QQuickPaintedItem是可视化组件，每个实例只能绑定一个父节点，做成单例的话只能在一个QML页面挂载一次，无法满足多场景复用需求。

推荐解决方案（拆分逻辑单例和渲染组件） #

这种方案更符合Qt架构设计，灵活性更高，支持多个位置同时显示摄像头图像：

步骤1：实现纯逻辑的图像存储单例 #

该类仅负责存储摄像头输出的QImage，对外提供读写接口和更新信号，不需要继承可视化相关类：

// imageprovider.h
#include <QObject>
#include <QImage>

class ImageProvider : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QImage image READ image WRITE setImage NOTIFY imageChanged)
public:
    static ImageProvider* instance() {
        static ImageProvider ins;
        return &ins;
    }
    QImage image() const { return m_image; }
    void setImage(const QImage& img) {
        if (img != m_image) {
            m_image = img;
            emit imageChanged();
        }
    }
signals:
    void imageChanged();
private:
    explicit ImageProvider(QObject *parent = nullptr) : QObject(parent) {}
    QImage m_image;
};

步骤2：注册单例和可复用渲染组件 #

在main.cpp中分别注册逻辑单例，以及可实例化的渲染组件：

// 注册逻辑单例
qmlRegisterSingletonType<ImageProvider>("s0.image", 1, 0, "ImageProvider", [](QQmlEngine *engine, QJSEngine *scriptEngine) -> QObject* {
    Q_UNUSED(engine)
    Q_UNUSED(scriptEngine)
    return ImageProvider::instance();
});
// 注册可实例化的图像渲染组件
qmlRegisterType<MyImageItem>("s0.image", 1, 0, "MyImageItem");

其中MyImageItem是继承QQuickPaintedItem的渲染类，实现如下：

// myimageitem.h
#include <QQuickPaintedItem>
#include <QPainter>
#include "imageprovider.h"

class MyImageItem : public QQuickPaintedItem
{
    Q_OBJECT
public:
    explicit MyImageItem(QQuickItem *parent = nullptr) : QQuickPaintedItem(parent) {
        // 绑定单例图像更新信号，自动刷新渲染
        connect(ImageProvider::instance(), &ImageProvider::imageChanged, this, &MyImageItem::update);
    }
    void paint(QPainter *painter) override {
        QImage currentImg = ImageProvider::instance()->image();
        if (currentImg.isNull()) return;
        painter->setRenderHint(QPainter::Antialiasing, true);
        painter->setRenderHint(QPainter::SmoothPixmapTransform, true);
        // 自适应组件尺寸绘制
        painter->drawImage(boundingRect(), currentImg);
    }
};

步骤3：QML中调用 #

直接像普通可视化组件一样使用渲染组件即可，会自动同步单例中的最新图像：

import s0.image 1.0

MyImageItem {
    width: 320
    height: 240
}

后端更新图像逻辑 #

摄像头拿到新的QImage后，直接调用单例的写接口即可，所有挂载了MyImageItem的位置都会自动更新：

// 后端代码示例
ImageProvider::instance()->setImage(capturedCameraImage);

兼容原方案的临时解决方法（不推荐） #

如果坚持要使用原来的单例可视化组件实现，不能手动创建实例，需要手动给全局单例设置父项挂载到QML树中：

import s0.image 1.0

Item {
    id: rootContainer
    Component.onCompleted: {
        MyImage.parent = rootContainer
        MyImage.width = 320
        MyImage.height = 240
    }
}

该方案缺点是单例组件只能挂载到一个父节点，切换页面后组件会被移除，无法多位置复用。

内容的提问来源于stack exchange，提问作者Ning