在QGraphicsView中集成QQuickView仅显灰色矩形的解决方案咨询

我完全理解你的困境——团队基于QGraphicsView深耕3年的项目，不可能轻易替换主框架，但又需要集成QML内容。你当前代码只显示灰色矩形的问题，核心原因是**QQuickView作为独立窗口，其渲染上下文与QGraphicsScene的默认渲染机制不兼容**，导致QML内容无法正确绘制到场景中。

下面提供两种经过验证的可行方案，附修改后的代码示例：

方案1：使用QQuickWidget（推荐） #

QQuickWidget是Qt专门为在Widget环境中嵌入QML设计的组件，它本身就是QWidget子类，可直接添加到QGraphicsScene，无需额外窗口容器，兼容性最好。

修改后的main.cpp代码：

#include <QApplication>
#include <QMainWindow>
#include <QtQuickWidgets/QQuickWidget>
#include <QGraphicsView>
#include <QGraphicsScene>

int main(int argc, char *argv[]) {
    QApplication a(argc, argv);

    QGraphicsScene *scene = new QGraphicsScene;
    QGraphicsView *view = new QGraphicsView(scene);

    // 使用QQuickWidget替代QQuickView
    QQuickWidget *quickWidget = new QQuickWidget;
    quickWidget->setSource(QUrl::fromLocalFile("test.qml"));
    quickWidget->setFixedSize(500, 100);
    // 确保QML内容随Widget大小适配
    quickWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);

    scene->addWidget(quickWidget);
    scene->addEllipse(50, 50, 100, 100); // 验证场景正常绘制

    view->show();
    return a.exec();
}

test.qml可保持不变：

import QtQuick 2.15
Rectangle {
    width: 500
    height: 100
    Text {
        text: "This is a text in a QML view"
        anchors.left: parent.left
        anchors.top: parent.top
    }
}

方案2：保留QQuickView并统一渲染上下文 #

如果因特殊需求必须使用QQuickView，可以强制QGraphicsView使用OpenGL渲染，让两者共享相同的渲染上下文，解决灰色矩形问题：

修改后的main.cpp代码：

#include <QApplication>
#include <QMainWindow>
#include <QtQuick/QQuickView>
#include <QGraphicsView>
#include <QGraphicsScene>
#include <QOpenGLWidget>

int main(int argc, char *argv[]) {
    QApplication a(argc, argv);

    QGraphicsScene *scene = new QGraphicsScene;
    QGraphicsView *view = new QGraphicsView(scene);

    // 设置QGraphicsView使用OpenGL视口，与QQuickView共享渲染上下文
    view->setViewport(new QOpenGLWidget);

    QQuickView *quickView = new QQuickView;
    quickView->setSource(QUrl::fromLocalFile("test.qml"));
    QWidget *container = QWidget::createWindowContainer(quickView);
    container->setFixedSize(500, 100);

    scene->addWidget(container);
    scene->addEllipse(50, 50, 100, 100);

    view->show();
    return a.exec();
}

关键注意事项 #

• 方案1的QQuickWidget是官方推荐的Widget嵌入QML的方式，稳定性和兼容性都优于方案2。
• 如果QML内容涉及复杂OpenGL渲染，两种方案都需要确保Qt环境的OpenGL配置正确。
• 注意QQuickWidget的resizeMode设置，SizeRootObjectToView可避免QML内容被裁剪。

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