不能在 QML 中使用 C++ QQuickPaintedItem Singleton答案

【问题标题】：Cannot use C++ QQuickPaintedItem Singleton in QML不能在 QML 中使用 C++ QQuickPaintedItem Singleton
【发布时间】：2021-09-27 04:20:20
【问题描述】：

我必须创建一个 C++ 单例类，但它在 qml 中不起作用。

#include "myimage.h"
MyImage::MyImage(QQuickPaintedItem *parent)
{

}

MyImage* MyImage::myImage = new MyImage;

MyImage *MyImage::instance()
{
    return myImage;
}

void MyImage::paint(QPainter *painter)
{
    QRectF target(10.0, 20.0, 80.0, 60.0);
    QRectF source(0.0, 0.0, 70.0, 40.0);
    painter->setRenderHint(QPainter::Antialiasing, true);
    painter->setRenderHint(QPainter::SmoothPixmapTransform, true );
    painter->drawImage(target, this->m_Image, source);
}

const QImage &MyImage::getM_Image() const
{
    return m_Image;
}

void MyImage::setM_Image(const QImage &mimage)
{
    if (mimage != m_Image) {
        m_Image = mimage;
        emit m_ImageChanged();
    }
}//This is my singleton class.

然后我在 main.cpp 中注册它。

QObject *getMySingletonImage(QQmlEngine *engine, QJSEngine *scriptEngine)
{
    Q_UNUSED(engine)
    Q_UNUSED(scriptEngine)

    return MyImage::instance();
}
...
qmlRegisterSingletonType<MyImage>("s0.image", 1, 0, "MyImage", &getMySingletonImage);

在 QML 中：

import s0.image 1.0
MyImage{

            }

我无法成功运行程序。

qrc:/Camview_Page.qml:371:13: Element is not creatable.

实际上，我在后端和 qml 中都使用了单例类。在我的后端，我会得到 QImage 类型的图像，但不会保存在本地，所以我不能使用 QUrl，我只是想出了这个方法。

期望：我的后端将QImage类型的图片传给单例类，我的单例类实现了paint的方法，我的qml展示了图片。

顺便说一句...我的后端从相机获取图像。

【问题讨论】：

标签： c++ qt qml

【解决方案1】：

已经为 QML 创建了一个单例，因此您会收到该错误消息，因为您正在尝试使用“{}”创建对象。

在这种情况下，设置父级和大小就足够了：

import QtQuick 2.15
import QtQuick.Window 2.15

import s0.image 1.0

Window {
    id: root
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Component.onCompleted: {
        MyImage.parent = root.contentItem
        MyImage.width = 100
        MyImage.height = 100
    }
}

如果要创建绑定，例如设置anchors.fill: parent，则可以使用Binding 组件，如果您想听到任何信号，则必须使用Connections 组件。

import QtQuick 2.15
import QtQuick.Window 2.15

import s0.image 1.0

Window {
    id: root
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Binding{
        target: MyImage
        property: "parent"
        value: root.contentItem
    }
    Binding {
        target: MyImage
        property: "anchors.fill"
        value: MyImage.parent
    }
    Connections{
        target: MyImage
        function onWidthChanged(){
            console.log("width:", MyImage.width)
        }
        function onHeightChanged(){
            console.log("height:", MyImage.height)
        }
    }
}

【讨论】：