从 C++ 更新自定义 QML 组件答案

【问题标题】：Update Custom QML component from from C++从 C++ 更新自定义 QML 组件
【发布时间】：2020-08-18 18:57:04
【问题描述】：

我正在使用 Opencv 项目开发 c++/QML。我发现在 QMl 中查看处理后的图像的最佳方法是编写一个自定义 QML 组件，该组件在 c++ 中扩展 QQuickPaintedItem，并且运行良好：

class ImageView : public QQuickPaintedItem{
 Q_OBJECT
 Q_PROPERTY(QImage image READ image WRITE setImage NOTIFY imageChanged)
 public:
    // I need to pass a pointer of ImageService
  ImageView(QQuickItem *parent = nullptr, ImageService *imageService = nullptr);

  Q_INVOKABLE void updateImage();
  void paint(QPainter *painter);
  QImage image() const;
 signals:
  void imageChanged();
 private:
  QImage m_image;
  ImageService *m_imageService;
};

我在 C++ 中注册了这种类型，如下所示：

 qmlRegisterType<ImageView>("opencv.plugin", 1, 0, "ImageView");

我的问题是： 我有这个类 ImageService 完成所有工作并在处理后保存图像的最后一个版本：

class ImageService
  {

   public:
    ImageService();
    bool openImage(const std::string &);
    QImage toQImage();
    bool isValid();

  private:
    std::string m_imagePath;
    cv::Mat m_image;

 };

我需要ImageView 组件在ImageService 使用updateImage() 函数执行的任何操作后自行更新。

我试过了： 我想了想：

将指向 ImageService 的指针传递给 ImageView，但我不知道如何。
将ImageService设为Qml Property并将QML Image从Qml传递给ImageView组件，但我认为这不是一个好主意。

【问题讨论】：

如果ImageView 的数量应该受到限制，您可以将它们放在另一个类中。如果您希望“用户”能够创建任意数量的ImageView，您可以考虑使ImageService 成为C++ 端的单例，每个ImageView 在构造时都会注册到
Singleton 类听起来很合理。但是关于第一个 Idea，我没有明白。 ImageView 将仅用作发生所有可视化操作的应用程序的主要小部件（可能稍后我将添加创建多个视口的功能，但如果这就是您的意思，则不在此阶段）..跨度>
好的，如果只有一个，您可以制作一个“总体”C++ 模型，它有一个 Q_PROPERTY(ImageView* viewport1 ....)，这样您就可以自己实例化 ImageView因此可以将ImageService 指针放在构造函数中
对不起，我是 qml 的新手。我看不出这对我有什么帮助，因为我会有两个“Imageview”实例，第一个是qmlType，第二个是QProperty。你有什么例子吗？

标签： c++ qt opencv qml qqmlcomponent

【解决方案1】：

如果您只有一个ImageView，则很容易将其设置为模型的Q_PROPERTY。

class ImageModel : public QObject 
{
    Q_OBJECT
    Q_PROPERTY(ImageView *image1 READ image1 CONSTANT)

  public:
    ImageModel(ImageService *service)
      : service_(service)
      , image1_(new ImageView(/*parent=*/ this, /*service=*/service_)
    { }

    ImageView* image1() const { return image1_; }

  private:
    ImageService *service_;
    ImageView *image1_;
}

改变你的主要：

...
qmlRegisterUncreatableType<ImageService>(...);
qmlRegisterUncreatableType<ImageView>(...);
qmlRegisterUncreatableType<ImageModel>(...);

QQmlEngine engine;
ImageService theService;
ImageModel coreModel(&theService);
QQmlContext *context = new QQmlContext(engine.rootContext());
context->setContextProperty("images", &coreModel);

你可以使用的in qml：

<imageproperty>: images.image1

【讨论】：